Sidebar slide in from right #1754
Replies: 2 comments 2 replies
-
|
Possibly using the same "position" attribute as the "modal". Please! |
Beta Was this translation helpful? Give feedback.
-
|
How can we promote this feature? I argue that this is a bug, especially since a modal (no different from a sidebar) has the property to position itself on the right. Your paying customer! |
Beta Was this translation helpful? Give feedback.
-
|
The main sidebar ( from flux.css: *:has(>[data-flux-main]) {
display: grid;
grid-area: body;
grid-template-rows: auto 1fr auto;
grid-template-columns: min-content minmax(0, 1fr) min-content;
grid-template-areas:
"header header header"
"sidebar main aside"
"sidebar footer aside";
}
*:has(>[data-flux-sidebar]+[data-flux-header]) {
grid-template-areas:
"sidebar header header"
"sidebar main aside"
"sidebar footer aside";
}If you'd like to keep using flux:sidebar (which comes with the toggle and collapse features then you could add the css below to your app.css: /* position flux:sidebar after flux:main */
*:has(>[data-flux-header]+[data-flux-main]+[data-flux-sidebar]),
/* position flux:sidebar after flux:header and add align="right" property to it */
*:has(>[data-flux-header]+[data-flux-sidebar][align="right"]) {
grid-template-areas:
"header header header"
"aside main sidebar"
"aside footer sidebar";
}
/* position flux:sidebar right between flux:header and flux:main
this one is a little confusing as it could also be interpreted as having a full width header instead of a full height sidebar */
*:has(>[data-flux-header]+[data-flux-sidebar]+[data-flux-main]),
/* or add align="right" on your flux:sidebar and have it positioned before flux:header */
*:has(>[data-flux-sidebar][align="right"]+[data-flux-header]),
{
grid-template-areas:
"header header sidebar"
"aside main sidebar"
"aside footer sidebar";
}You would use it like this for right side sidebars with a full-width header: <body>
<flux:header></flux:header>
<flux:main></flux:main>
<flux:sidebar></flux:sidebar>
</body>
<!-- or -->
<body>
<flux:header></flux:header>
<flux:sidebar align="right"></flux:sidebar>
<flux:main></flux:main>
</body>
or for full height sidebar: <body>
<flux:header></flux:header>
<flux:sidebar></flux:sidebar>
<flux:main></flux:main>
</body>
<!-- or -->
<body>
<flux:sidebar align="right"></flux:sidebar>
<flux:header></flux:header>
<flux:main></flux:main>
</body>
I haven't tested this yet and it might not properly work with the collapsible sidebar feature for example. |
Beta Was this translation helpful? Give feedback.
-
|
I guess it might be usefull if there would be some more documenation on this grid layout and |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
The sidebar's default position is to slide in from the left. Would be nice to be able to toggle this to come in from the right side
Beta Was this translation helpful? Give feedback.
All reactions