Sidebar: must for modern dashboard

[IRahman2024]

Nowadays it's important to have a sidebar in a dashboard. So I think you guys should also start working on creating a customizable sidebar as a component.

Screen.Recording.2025-01-28.005935.mp4

[saadeghi]

Can you help me understand the use case?

What's a layout that requires a compact sidebar and if compact sidebar works, what's the benefit of a wide sidebar there?

On the other hand if a wide sidebar can fit in a layout and is required for menu items to have label text, what's the benefit of a compact sidebar?

[IRahman2024]

I'm sorry for not getting back to you sooner. Most of the modern UI in web applications that are used in enterprise or e-commerce has a switchable sidebar. So you can directly navigate to the desired page and in some cases you can also click to open the wide sidebar so that you can jump to more detailed navigation.

Again you can actually focus on the content more, by separating the navigation and tools on the sidebar. Also it's make the navigation panel more easy to be responsive.

Besides this I feel daisyUi lacks a sidebar component as most of the other component library has sidebar as there reusable components.

[saadeghi]

I understand, but my question is:

What's a layout that requires a compact sidebar and if compact sidebar works, what's the benefit of a wide sidebar there?
On the other hand if a wide sidebar can fit in a layout and is required for menu items to have label text, what's the benefit of a compact sidebar?

Direct navigation is not a benefit of a specific layout, as it is possible anyway.
"Being able to open/close it" is not a benefit of "being able to open/close it"

[ray73864]

Would love a sidebar component.

You only have to look at YouTube to see what a sidebar is, it starts off wide, but you can click the hamburger menu to make it compact.

Sidebars are pretty much a necessity in anything enterprise.

These days people often have wide monitors, so you can utilise more of the width to not sacrifice precious height.

[saadeghi]

@ray73864 https://daisyui.com/components/drawer/#icon-only-drawer-sidebar-when-its-closed-using-is-drawer-close-and-is-drawer-open-variants

[IRahman2024]

Well, I think you wanted to know "Why choose both?". The answer is in the context of use and user behavior.

As said earlier in data or content intensive apps the focus does note compete with the menu itself but the sidebar can ensure the main focus on the content. On smaller screens it's crucial to to have a toggling sidebar to avoid over usage of the screen but focusing on content.
On the other hand, a wide sidebar with labels can help new users learn the navigation structure. Once they’re familiar, they can switch to a compact view. A compact sidebar can expand to a wide sidebar when needed by hovering or clicking providing additional details or options without permanently taking up space.

Now if you why and when you need it.... on the content-rich websites like e-commerce, blogs, newspapers or in cases to enrich application with features, a wide sidebar helps to display labels and maintain clarity. Also tools with advanced functionality like design software, CRM systems often require a wide sidebar to display detailed menus, tooltips, or status indicators.

Although you’re right that “being able to open/close it” isn’t a that much of a benefit—it’s how this functionality serves the user that matters.

• Allowing users to toggle between compact and wide sidebars gives them control over their workspace.
• This is especially useful in apps where screen space is at a premium or where users have varying levels of expertise.
• A collapsible sidebar ensures the app can adapt to different screen sizes, devices, and user preferences without requiring separate designs for each scenario.

The real benefits are in responsive design, user preferences, and usage of the web application itself.

[saadeghi]

Update:
This was added in daisyUI 5.2.0
https://daisyui.com/components/drawer/#icon-only-drawer-sidebar-when-its-closed-using-is-drawer-close-and-is-drawer-open-variants

[waseigo]

YSK that this example is broken, or at least the code you provide is broken. It does not collapse to w-14 when closed; the entire drawer hides. Or perhaps the daisyUI version that Phoenix LiveView ships isn't 5.2.0? I'll check.

Edit: nope, that's not it. I grabbed the latest version of daisyui.js with curl and the example cannot be reproduced.

[waseigo]

OK, the example for this is broken. Here's what works for me, @saadeghi:

<div class="overflow-hidden rounded drawer drawer-open">
      <input id="my-drawer-4" type="checkbox" class="drawer-toggle" />
      <div class="drawer-content">
        <!-- Page content here -->
      </div>
      <div class="h-full drawer-side is-drawer-close:overflow-visible">
        <label for="my-drawer-4" aria-label="close sidebar" class="drawer-overlay"></label>
        <div class="flex flex-col items-start h-full is-drawer-close:w-14 is-drawer-open:w-64 bg-base-200">
          <!-- Sidebar content here -->
          <ul class="w-full menu grow">
            <!-- list item -->
            <li>
              <button
                class="is-drawer-close:tooltip is-drawer-close:tooltip-right rtl:is-drawer-close:tooltip-left"
                data-tip="Homepage"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  stroke-linejoin="round"
                  stroke-linecap="round"
                  stroke-width="2"
                  fill="none"
                  stroke="currentColor"
                  class="inline-block my-1.5 size-4"
                >
                  <path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path>
                  <path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z">
                  </path>
                </svg>
                <span class="is-drawer-close:hidden">Homepage</span>
              </button>
            </li>
            
            <!-- list item -->
            <li>
              <button
                class="is-drawer-close:tooltip is-drawer-close:tooltip-right rtl:is-drawer-close:tooltip-left"
                data-tip="Settings"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  stroke-linejoin="round"
                  stroke-linecap="round"
                  stroke-width="2"
                  fill="none"
                  stroke="currentColor"
                  class="inline-block my-1.5 size-4"
                >
                  &gt;
                  <path d="M20 7h-9"></path>
                  <path d="M14 17H5"></path>
                  <circle cx="17" cy="17" r="3"></circle>
                  <circle cx="7" cy="7" r="3"></circle>
                </svg>
                <span class="is-drawer-close:hidden">Settings</span>
              </button>
            </li>
          </ul>

          <!-- button to open/close drawer -->
          <div
            class="m-2 is-drawer-close:tooltip is-drawer-close:tooltip-right rtl:is-drawer-close:tooltip-left"
            data-tip="Open"
          >
            <label
              for="my-drawer-4"
              class="btn btn-ghost btn-circle drawer-button is-drawer-open:rotate-y-180"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                stroke-linejoin="round"
                stroke-linecap="round"
                stroke-width="2"
                fill="none"
                stroke="currentColor"
                class="inline-block my-1.5 size-4"
              >
                <path d="M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z">
                </path>
                <path d="M9 4v16"></path>
                <path d="M14 10l2 2l-2 2"></path>
              </svg>
            </label>
          </div>
        </div>
      </div>
    </div>