About side navigation bars and what some users expect

[fernandocanizo]

Hello, I don't know if this qualifies as rambling, Q&A or feature request, so I decided to put it in the general category. In any case, is a help request :)

I'm trying to build a side navigation bar (sidenav from here onward) which:

• is permanently shown
• can be minified into a slim bar of icons on the side
• doesn't cover the content, the content shrinks or expands as the sidenav shows or minifies

I'm after this behavior from Material UI: Persistent drawer with mini variant.

I've been reading several related discussions here, in particular #2535, and I think that if not a new DaisyUi component, at least a full example with proper explanation of the missing JS parts is needed in the docs.

I've been trying the whole morning to implement it by adding TailwindCss classes and some JS too, but without success.

Some thoughts about how currently drawer is implemented, I don't know if they are possible with only CSS, if not, a note should be added in the docs:

1. as is currently implemented, a drawer should be hidden with an ESC key press or a click outside the drawer
2. it should not cover the content when shown
3. content should not be a part of the drawer definition

I want to expand on the last one: drawer tags structure is

.drawer // The root container
  ├── .drawer-toggle // A hidden checkbox to toggle the visibility of the sidebar
  ├── .drawer-content // All your page content goes here
  │    ├── // navbar
  │    ├── // content
  │    ╰── // footer
  ╰── .drawer-side // Sidebar wrapper
       ├── .drawer-overlay // A dark overlay that covers the whole page when the drawer is open
       ╰── // Sidebar content (menu or anything)

But why is the navbar, the content and the footer wrapped by the drawer? This structure generates an unnecessary coupling. I would rather have:

<aside className="drawer">
  <input id="sidenav" type="checkbox" className="drawer-toggle" hidden />
</aside>

<header>
  <nav>...</nav>
</header>
<main>
  <section>...</section>
  <section>...</section>
</main>

<footer>

All separate components/things.

I see that somehow part of what I want is implemented on the DaisyUi site:

But I don't see what's the difference with my implementation:

I see there are some other classes in the DaisyUi screenshot, but those classes don't seem relevant to this issue.

Can someone point me in the right direction?

[saadeghi]

Hey, Here's an example:
https://svelte.dev/repl/1117baf37a8a4c8299349d21c68039a2?version=4.2.8

daisyUI can show or hide the sidebar but if you want:

• the sidebar to be always visible
• some parts of sidebar (text of the menu items) to hide conditionally
• an icon to change

You need JS for that, like the example I linked.

Let me know if you have a question.

[fernandocanizo]

Beautiful, thank you very much indeed! 😄
Did I miss that example on the docs?

[saadeghi]

You're welcome.
It's not on the docs because it's not something daisyUI does. daisyUI can show/hide the sidebar but in this example we're just showing/hiding menu item texts and changing the sidebar width conditionally using JS.

There are many ways to implement this type of collapsible sidebar so we can't simply do it in CSS using a class name.
For example, what should be the sidebar width values, what parts of the menu items should be hidden? if there's a search input on the sidebar how should it look like when collapsed? If there are buttons, logos, links without icon, select box, how's should they look like when collapsed?

It's a very opinionated case 😅