Edge Sidebar

Usage

An edge sidebar requires a structure of:

jun-edgeSidebar: the sidebar container
- jun-edgeContent: the sidebar body.
  - div: wrapper of the content

<aside className="jun-edgeSidebar">
  <div className="jun-edgeContent">
    <div className="flex flex-col gap-2 p-2">navigation...</div>
  </div>
</aside>

DO NOT add padding, margin or changing the display of jun-edgeSidebar and jun-edgeContent.

Controlling width

Use jun-edgeSidebar-w-[*] to change the width of the sidebar:

<aside className="jun-edgeSidebar jun-edgeSidebar-w-[200px] lg:jun-edgeSidebar-w-[300px]">
  <div className="jun-edgeContent">
    <div className="flex flex-col gap-2 p-2">navigation...</div>
  </div>
</aside>

Permanent mode

This is the default mode of the edge sidebar unless switched to drawer mode.

🧠 Note

The modifiers with jun-edgeSidebar-permanent-* does NOT take effect in drawer mode.

Hidden/Visible

To hide the sidebar initially, use jun-edgeSidebar-permanent-hidden and then use [breakpoint]:jun-edgeSidebar-permanent-visible to make the sidebar visible.

<aside className="jun-edgeSidebar jun-edgeSidebar-permanent-hidden md:jun-edgeSidebar-permanent-visible">
  <div className="jun-edgeContent">
    <div className="flex flex-col gap-2 p-2">navigation...</div>
  </div>
</aside>

Collapsible

Create a button with class jun-edgeCollapseTrigger and then call the triggerEdgeCollapse({ event }) on click:

import { toggleEdgeCollapse } from "tailwindcss-jun-layout";
 
<div className="jun-edgeSidebar">
  <div className="jun-edgeContent">
    <button
      className="jun-edgeCollapseTrigger"
      onClick={(event) => triggerEdgeCollapse({ event })}
    >
      Toggle
    </button>
  </div>
</div>;

The visibility of the trigger will be handled by Jun Layout. Do not need to specify hidden with responsive classes.

Next, to customize the width of the sidebar in collapsed state, use jun-edgeSidebar-collapsed-w-[*]:

<div className="jun-edgeSidebar jun-edgeSidebar-collapsed-w-[80px]">
  <div className="jun-edgeContent">
    <div className="flex flex-col gap-2 p-2">navigation...</div>
  </div>
</div>

Collapsed Icon

To display icon between collapsed/uncollapsed state:

Use jun-edgeCollapsed-visible to show the icon when the sidebar is collapsed.
Use jun-edgeUncollapsed-visible to show the icon when the sidebar is in normal state.

<button
  className="jun-edgeCollapseTrigger"
  onClick={(event) => triggerEdgeCollapse({ event })}
>
  <MoreVertical className="jun-edgeCollapsed-visible" />
  <SidebarOpen className="jun-edgeUncollapsed-visible" />
</button>

Hover to expand

To make the collapsed sidebar expand when hover, use jun-edgeSidebar-hoverUncollapse:

<div className="jun-edgeSidebar jun-edgeSidebar-permanent-hoverUncollapse">
  <div className="jun-edgeContent">
    <div className="flex flex-col gap-2 p-2">navigation...</div>
  </div>
</div>

Auto Collapse

Use jun-edgeSidebar-permanent-autoCollapse-[breakpoint] to make the sidebar collapsed automatically when the viewport is below the specified breakpoint:

<div className="jun-edgeSidebar jun-edgeSidebar-permanent-autoCollapse-lg">
  <div className="jun-edgeContent">
    <div className="flex flex-col gap-2 p-2">navigation...</div>
  </div>
</div>

With the snippet above, when the viewport is below lg (1024px), the sidebar will collapsed automatically.

The breakpoint has to be the end of the modifier. DO NOT use responsive classes like lg:jun-edgeSidebar-permanent-autoCollapse.

Drawer mode

Use jun-edgeSidebar-drawer to turn the sidebar from permanent to drawer mode:

The sidebar is hidden by default and can be visible by calling triggerEdgeDrawer function.
When the sidebar is visibile, the overlay of the sidebar will cover the whole screen. Clicking on the overlay will close the drawer.

<div className="jun-edgeSidebar jun-edgeSidebar-drawer">
  <div className="jun-edgeContent">
    <div className="flex flex-col gap-2 p-2">navigation...</div>
  </div>
</div>

Triggering drawer

Create a button with class jun-edgeCollapseTrigger and then call the triggerEdgeDrawer() on click:

import { triggerEdgeDrawer } from "tailwindcss-jun-layout";
 
<div className="jun-layout">
  <header>
    <button
      className="jun-edgeDrawerTrigger"
      onClick={() => triggerEdgeDrawer()}
    >
      Toggle
    </button>
  </header>
  <div className="jun-edgeSidebar jun-edgeSidebar-drawer">
    <div className="jun-edgeContent">
      <div className="flex flex-col gap-2 p-2">navigation...</div>
    </div>
  </div>
</div>;

The visibility of the trigger will be handled by Jun Layout. Do not need to specify hidden with responsive classes.

Open/closed icon

To display icon between open/closed state:

Use jun-edgeDrawerOpen-visible to show the icon when the drawer is open.
Use jun-edgeDrawerClosed-visible to show the icon when the drawer is closed.

<button className="jun-edgeDrawerTrigger" onClick={() => triggerEdgeDrawer()}>
  <PanelLeftClose className="jun-edgeDrawerOpen-visible" />
  <PanelRightClose className="jun-edgeDrawerClosed-visible" />
</button>

jun-edgeDrawerOpen-visible and jun-edgeDrawerClosed-visible require a parent with jun-edgeDrawerTrigger to work properly.

Without overlay

Use jun-edgeSidebar-drawer-withoutOverlay to remove the overlay when the drawer sidebar is visible:

<div className="jun-edgeSidebar jun-edgeSidebar-drawer-withoutOverlay">
  <div className="jun-edgeContent">
    <div className="flex flex-col gap-2 p-2">navigation...</div>
  </div>
</div>

Responsive sidebar

Use Tailwind CSS responsive variants to create a drawer sidebar on mobile and switch to permanent sidebar on desktop:

<div className="jun-edgeSidebar jun-edgeSidebar-drawer md:jun-edgeSidebar-permanent">
  <div className="jun-edgeContent">
    <div className="flex flex-col gap-2 p-2">navigation...</div>
  </div>
</div>

Right sidebar

To create a right edge sidebar, use jun-edgeSidebarR-* with all the modifiers above to build a drawer and a permanent sidebar.

<div className="jun-edgeSidebarR">
  <div className="jun-edgeContent">
    <div className="flex flex-col gap-2 p-2">navigation...</div>
  </div>
</div>

API

Class	Description
`jun-edgeSidebar`	Creates a left-aligned sidebar (Required)
`jun-edgeContent`	The content container of the sidebar (Required) (works within left & right sidebars)
`jun-edgeSidebar-w-[*]`	Sets the width of the sidebar
`jun-edgeSidebar-collapsed-w-[*]`	Sets the width of the sidebar when collapsed
`jun-edgeSidebar-permanent-hidden`	Hides the sidebar in permanent mode
`jun-edgeSidebar-permanent-visible`	Shows the sidebar in permanent mode
`jun-edgeSidebar-permanent-hoverUncollapse`	Makes the collapsed sidebar expand on hover
`jun-edgeSidebar-permanent-autoCollapse-[breakpoint]`	Auto collapses the sidebar below specified breakpoint
`jun-edgeSidebar-drawer`	Enables drawer mode for the sidebar
`jun-edgeSidebar-drawer-withoutOverlay`	Removes the overlay in drawer mode
`jun-edgeSidebarR`	Creates a right-aligned sidebar (Required)
`jun-edgeSidebarR-w-[*]`	Sets the width of the right sidebar
`jun-edgeSidebarR-collapsed-w-[*]`	Sets the width of the right sidebar when collapsed
`jun-edgeSidebarR-drawer`	Enables drawer mode for the right sidebar
`jun-edgeSidebarR-permanent`	Enables permanent mode for the right sidebar
`jun-edgeSidebarR-permanent-hidden`	Hides the right sidebar in permanent mode
`jun-edgeSidebarR-permanent-visible`	Shows the right sidebar in permanent mode
`jun-edgeSidebarR-permanent-autoCollapse-[breakpoint]`	Auto collapses the right sidebar below specified breakpoint
`jun-edgeCollapseTrigger`	Button class to trigger sidebar collapse
`jun-edgeDrawerTrigger`	Button class to trigger drawer open/close
`jun-edgeDrawerTriggerR`	Button class to trigger right drawer open/close
`jun-edgeCollapseTriggerR`	Button class to trigger right sidebar collapse
`jun-edgeCollapsed-visible`	Shows the element only when sidebar is collapsed (works within left & right sidebars)
`jun-edgeUncollapsed-visible`	Shows the element only when sidebar is expanded (works within left & right sidebars)

Getting Started

Configuration

Integration

Examples