Custom Sidebar v1 Components
Sidebar
<![CDATA[
<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>
]]>