Custom Sidebar v2 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>
</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>Dashboard</span>
</a>
<a href="#" class="sidebar__menu-item sidebar__menu-item--active">
<div class="sidebar__menu-icon sidebar__menu-icon--badge">
<i data-lucide="inbox"></i>
</div>
<span>Support Tickets</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 sidebar__menu-icon--badge">
<i data-lucide="layout-panel-left"></i>
</div>
<span>App Store</span>
</a>
<a href="#" class="sidebar__menu-item">
<div class="sidebar__menu-icon sidebar__menu-icon--badge">
<i data-lucide="handshake"></i>
</div>
<span>Affiliate Program</span>
</a>
</div>
<div class="separator"></div>
<div class="sidebar__menu-section">
<div class="sidebar__section-header">
<span>Tenant System</span>
</div>
<a href="#" class="sidebar__menu-item">
<div class="sidebar__menu-icon">
<i data-lucide="pyramid"></i>
</div>
<span>Client System</span>
</a>
<a href="#" class="sidebar__menu-item">
<div class="sidebar__menu-icon">
<i data-lucide="globe"></i>
</div>
<span>Domain Management</span>
</a>
<a href="#" class="sidebar__menu-item">
<div class="sidebar__menu-icon">
<i data-lucide="palette"></i>
</div>
<span>Theme Management</span>
</a>
<a href="#" class="sidebar__menu-item">
<div class="sidebar__menu-icon">
<i data-lucide="toy-brick"></i>
</div>
<span>Plugin Management</span>
</a>
</div>
<div class="separator"></div>
<div class="sidebar__menu-section">
<div class="sidebar__section-header">
<span>Website</span>
</div>
<a href="#" class="sidebar__menu-item">
<div class="sidebar__menu-icon">
<i data-lucide="earth"></i>
</div>
<span>Website Management</span>
</a>
<a href="#" class="sidebar__menu-item">
<div class="sidebar__menu-icon">
<i data-lucide="mails"></i>
</div>
<span>Newsletter Management</span>
</a>
<a href="#" class="sidebar__menu-item">
<div class="sidebar__menu-icon">
<i data-lucide="contact-round"></i>
</div>
<span>Contact Us</span>
</a>
<a href="#" class="sidebar__menu-item">
<div class="sidebar__menu-icon">
<i data-lucide="id-card"></i>
</div>
<span>Career Responses</span>
</a>
</div>
<div class="separator"></div>
<div class="sidebar__menu-section">
<div class="sidebar__section-header">
<span>Human Resouce Management</span>
</div>
<a href="#" class="sidebar__menu-item">
<div class="sidebar__menu-icon">
<i data-lucide="users"></i>
</div>
<span>Employee Management</span>
</a>
</div>
</div>
</div>
</div>
]]>