Custom Sidebar v1 Components

Sidebar

<div class="sidebar"> <div class="sidebar__primary"> <div class="sidebar__primary-nav"> <div class="sidebar__toggle" id="sidebarToggle"> <i data-lucide="panel-left-close"></i> </div> <div class="sidebar__nav-item sidebar__nav-item--active"> <i data-lucide="layout-dashboard"></i> </div> <div class="sidebar__nav-item"> <i data-lucide="shopping-cart"></i> </div> <div class="sidebar__nav-item"> <i data-lucide="truck"></i> </div> <div class="separator"></div> <div class="sidebar__nav-item"> <i data-lucide="plus"></i> </div> </div> <div class="sidebar__spacer"></div> <div class="sidebar__nav-item"> <i data-lucide="user"></i> </div> <div class="sidebar__nav-item"> <i data-lucide="help-circle"></i> </div> </div> <div class="sidebar__secondary"> <div class="sidebar__header"> <div class="sidebar__header-title">Invincible Private Limited</div> </div> <div class="sidebar__menu"> <div class="sidebar__menu-section"> <a href="#" class="sidebar__menu-item"> <div class="sidebar__menu-icon"> <i data-lucide="home"></i> </div> <span>Home</span> </a> <a href="#" class="sidebar__menu-item"> <div class="sidebar__menu-icon sidebar__menu-icon--badge"> <i data-lucide="inbox"></i> </div> <span>Inbox</span> <div class="sidebar__spacer"></div> <span class="badge badge-gradient badge--sm">79</span> </a> <a href="#" class="sidebar__menu-item"> <div class="sidebar__menu-icon"> <i data-lucide="more-horizontal"></i> </div> <span>More</span> </a> </div> <div class="separator"></div> <div class="sidebar__menu-section"> <div class="sidebar__section-header"> <span>Spaces</span> <div class="sidebar__section-actions"> <div class="sidebar__section-action"> <i data-lucide="more-horizontal"></i> </div> <div class="sidebar__section-action"> <i data-lucide="search"></i> </div> <div class="sidebar__section-action"> <i data-lucide="plus"></i> </div> </div> </div> <a href="#" class="sidebar__menu-item"> <div class="sidebar__menu-icon"> <i data-lucide="user"></i> </div> <span>User Menu</span> </a> <div class="has-submenu"> <a href="#" class="sidebar__menu-item sidebar__menu-item--active"> <div class="sidebar__menu-indicator bg-pumpkin">U</div> <span>User Kit</span> <div class="sidebar__spacer"></div> <i data-lucide="chevron-down" data-target="#menu1"></i> <i data-lucide="more-horizontal" data-target="#menu2"></i> </a> <div id="menu1" class="dropdown dropdown--relative"> <div class="dropdown__content"> <div class="dropdown__section"> <div class="dropdown__item"> <div class="dropdown__item-icon"> <i data-lucide="calendar"></i> </div> <span class="dropdown__item-text">Calendar</span> </div> <div class="dropdown__item"> <div class="dropdown__item-icon"> <i data-lucide="smile"></i> </div> <span class="dropdown__item-text">Search Emoji</span> </div> <div class="dropdown__item"> <div class="dropdown__item-icon"> <i data-lucide="calculator"></i> </div> <span class="dropdown__item-text">Calculator</span> </div> </div> </div> </div> </div> <a href="#" class="sidebar__menu-item"> <div class="sidebar__menu-indicator bg-darkblue">D</div> <span>Development</span> </a> <div class="sidebar__create-button"> <i data-lucide="plus"></i> <span>Create Space</span> </div> </div> </div> </div> </div>