Skip to content

Commit

Permalink
Merge pull request #5599 from nextcloud-libraries/feat/NcAppSidebar--…
Browse files Browse the repository at this point in the history
…add-css-variable-for-offset

feat(NcAppSidebar): add CSS variables for toggle button offset
  • Loading branch information
susnux authored May 17, 2024
2 parents 2a6c03d + 404c9d7 commit a812d08
Showing 1 changed file with 41 additions and 15 deletions.
56 changes: 41 additions & 15 deletions src/components/NcAppSidebar/NcAppSidebar.vue
Original file line number Diff line number Diff line change
Expand Up @@ -376,18 +376,21 @@ A working alternative would be using an icon together with an `aria-label`:
If the sidebar should be shown conditionally (e.g. using a button)
and the users are expected to open and close the sidebar multiple times,
then using `v-if` might result in bad performance.
So instead use the `open` property:
So instead use the `open` property.

You can also use `--app-sidebar-offset` CSS variable to preserve space for the toggle button, for example, in top bar of NcAppContent.

```vue
<template>
<!-- This is in most cases NcContent -->
<div class="content-wrapper">
<!-- The main content - In most cases NcAppContent -->
<div>
<NcButton @click.prevent="showSidebar = !showSidebar">
Toggle sidebar
</NcButton>
</div>
<NcContent app-name="styleguidist" class="content-styleguidist">
<NcAppContent>
<div class="top-bar">
<NcButton @click.prevent="showSidebar = !showSidebar">
Toggle sidebar
</NcButton>
</div>
</NcAppContent>
<!-- The sidebar -->
<NcAppSidebar
:open.sync="showSidebar"
Expand All @@ -400,8 +403,9 @@ So instead use the `open` property:
Single tab content
</NcAppSidebarTab>
</NcAppSidebar>
</div>
</NcContent>
</template>

<script>
import Cog from 'vue-material-design-icons/Cog'
Expand All @@ -418,8 +422,8 @@ export default {
</script>
<style scoped>
/* This styles just mock NcContent and NcAppContent */
.content-wrapper {
position: relative;
.content-styleguidist {
position: relative !important;
/* Just to prevent jumping when the sidebar is hidden */
min-height: 360px;
}
Expand All @@ -436,14 +440,23 @@ export default {
width: calc(100vw - 64px) !important;
}
}
.top-bar {
display: flex;
justify-content: flex-end;
/* preserve space for toggle button */
padding-inline-end: var(--app-sidebar-offset);
/* same as on toggle button, but doesn't have to be the same */
margin: var(--app-sidebar-padding);
}
</style>
```
</docs>

<template>
<Fragment>
<!-- With vue3 we can move this inside the transition, but vue2 does not allow v-show in transition -->
<NcButton v-show="!open"
<NcButton v-if="!open"
:aria-label="t('Open sidebar')"
class="app-sidebar__toggle"
:class="toggleClasses"
Expand Down Expand Up @@ -1101,6 +1114,20 @@ export default {
},
}
</script>
<style lang="scss">
.content {
// A padding between the toggle button and the page border
--app-sidebar-padding: #{$app-navigation-padding};
// A padding between the toggle button and the page border
--app-sidebar-offset: 0;
}
.content:has(.app-sidebar__toggle) {
--app-sidebar-offset: calc(var(--app-sidebar-padding) + var(--default-clickable-area));
}
</style>
<style lang="scss" scoped>
$sidebar-min-width: 300px;
$sidebar-max-width: 500px;
Expand Down Expand Up @@ -1137,10 +1164,9 @@ $top-buttons-spacing: 6px;
background: var(--color-main-background);
&__toggle {
--sidebar-toggle-position: #{$app-navigation-padding};
position: absolute !important;
inset-block-start: var(--sidebar-toggle-position);
inset-inline-end: var(--sidebar-toggle-position);
inset-block-start: var(--app-sidebar-padding);
inset-inline-end: var(--app-sidebar-padding);
// app-content has z-index 1000 so we need 1001
z-index: 1001;
}
Expand Down

0 comments on commit a812d08

Please sign in to comment.