<div class="app-sidebar">
  <div class="h-100" data-simplebar>
    <div class="sidebar-menu">
      <ul id="side-menu">
        <li class="menu-title no-margin">Dashboard</li>
        <li>
          <a
            href="../index.html"
            aria-expanded="false"
            class="waves-effect primary-light"
          >
            <span class="icon-box"><i class="ph-house-line"></i></span>
            <div class="text-box">Dashboard</div>
          </a>
        </li>
        <li>
          <a
            href="../full-calendar.html"
            aria-expanded="false"
            class="waves-effect primary-light"
          >
            <span class="icon-box"><i class="ph-calendar-blank"></i></span>
            <div class="text-box">Calendar</div>
          </a>
        </li>
        <li>
          <a
            href="../kanban-board.html"
            aria-expanded="false"
            class="waves-effect primary-light"
          >
            <span class="icon-box"><i class="ph-clipboard-text"></i></span>
            <div class="text-box">Kanban Board</div>
          </a>
        </li>
        <li class="has-child">
          <a
            href="javascript: void(0);"
            aria-expanded="false"
            class="waves-effect primary-light"
          >
            <span class="icon-box"><i class="ph-folder-notch-open"></i></span>
            <div class="text-box">File Manager</div>
          </a>
          <ul class="sub-menu" aria-expanded="false">
            <li><a href="file-manager.html">File Manager</a></li>
            <li><a href="file-manager-new.html">Upload New File</a></li>
          </ul>
        </li>
        <li class="has-child waves-effect primary-light">
          <a href="javascript: void(0);" aria-expanded="false">
            <span class="icon-box"><i class="ph-puzzle-piece"></i></span>
            <div class="text-box">Authentication</div>
          </a>
          <ul class="sub-menu" aria-expanded="false">
            <li><a href="../login.html">login</a></li>
            <li><a href="../registration.html">Registration</a></li>
          </ul>
        </li>
        <li class="menu-title">pages</li>

        <li>
          <a
            href="../profile.html"
            aria-expanded="false"
            class="waves-effect primary-light"
          >
            <span class="icon-box"><i class="ph-user"></i></span>
            <div class="text-box">Profile</div>
          </a>
        </li>
        <li>
          <a
            href="../setting.html"
            aria-expanded="false"
            class="waves-effect primary-light"
          >
            <span class="icon-box"><i class="ph-gear"></i></span>
            <div class="text-box">Setting</div>
          </a>
        </li>
        <li class="has-child">
          <a
            href="javascript: void(0);"
            aria-expanded="false"
            class="waves-effect primary-light"
          >
            <span class="icon-box"><i class="ph-notebook"></i></span>
            <div class="text-box">Invoice</div>
          </a>
          <ul class="sub-menu" aria-expanded="false">
            <li><a href="../invoice.html">Invoice</a></li>
            <li><a href="../invoice-detail.html">Invoice Details</a></li>
          </ul>
        </li>
        <li>
          <a
            href="../billing.html"
            aria-expanded="false"
            class="waves-effect primary-light"
          >
            <span class="icon-box"><i class="ph-credit-card"></i></span>
            <div class="text-box">Billing</div>
          </a>
        </li>
        <li>
          <a
            href="../pricing-plans.html"
            aria-expanded="false"
            class="waves-effect primary-light"
          >
            <span class="icon-box"><i class="ph-lightning"></i></span>
            <div class="text-box">Pricing Plans</div>
          </a>
        </li>
        <li>
          <a
            href="../faq.html"
            aria-expanded="false"
            class="waves-effect primary-light"
          >
            <span class="icon-box"><i class="ph-question"></i></span>
            <div class="text-box">FAQs</div>
          </a>
        </li>
        <li>
          <a
            href="../blank-page.html"
            aria-expanded="false"
            class="waves-effect primary-light"
          >
            <span class="icon-box"><i class="ph-note-blank"></i></span>
            <div class="text-box">Blank Page</div>
          </a>
        </li>

        <li class="menu-title">Components</li>
        <li class="has-child">
          <a
            href="javascript: void(0);"
            aria-expanded="false"
            class="waves-effect primary-light"
          >
            <span class="icon-box"><i class="ph-book-open"></i></span>
            <div class="text-box">UI Elements</div>
          </a>
          <ul class="sub-menu" aria-expanded="false">
            <li><a href="../button.html">Button</a></li>
            <li><a href="../badge.html">Badge</a></li>
            <li><a href="../checkbox.html">Checkbox</a></li>
            <li><a href="../radio.html">Radio</a></li>
            <li><a href="../switch.html">Switch</a></li>
            <li><a href="../pagination.html">Pagination</a></li>
            <li><a href="../accordion.html">Accordion</a></li>
            <li><a href="../alerts.html">Alerts</a></li>
            <li><a href="../input.html">Input</a></li>
            <li><a href="../banner.html">Banner</a></li>
            <li><a href="../file.html">File</a></li>
          </ul>
        </li>

        <li>
          <a
            href="../component-card.html"
            aria-expanded="false"
            class="waves-effect primary-light"
          >
            <span class="icon-box"><i class="ph-cards"></i></span>
            <div class="text-box">Card</div>
          </a>
        </li>
        <li>
          <a
            href="../component-table.html"
            aria-expanded="false"
            class="waves-effect primary-light"
          >
            <span class="icon-box"><i class="ph-list-dashes"></i></span>
            <div class="text-box">Table</div>
          </a>
        </li>
        <li>
          <a
            href="../form-elements.html"
            aria-expanded="false"
            class="waves-effect primary-light"
          >
            <span class="icon-box"><i class="ph-swatches"></i></span>
            <div class="text-box">Form Elements</div>
          </a>
        </li>
        <li>
          <a
            href="../component-widget.html"
            aria-expanded="false"
            class="waves-effect primary-light"
          >
            <span class="icon-box"><i class="ph-leaf"></i></span>
            <div class="text-box">Widgets</div>
          </a>
        </li>
        <li class="menu-title">Documentation</li>
        <li>
          <a
            href="index.html"
            aria-expanded="false"
            class="waves-effect primary-light"
          >
            <span class="icon-box"><i class="ph-info"></i></span>
            <div class="text-box">Introduction</div>
          </a>
        </li>
        <li class="has-child">
          <a
            href="javascript: void(0);"
            aria-expanded="false"
            class="waves-effect primary-light"
          >
            <span class="icon-box"><i class="ph-browser"></i></span>
            <div class="text-box">Getting started</div>
          </a>
          <ul class="sub-menu" aria-expanded="false">
            <li><a href="started.html">quick start</a></li>
            <li><a href="started.html#environment">Environments Setup</a></li>
            <li><a href="started.html#folder ">Folder Structure</a></li>
            <li><a href="started.html#colors ">Colors</a></li>
            <li><a href="started.html#typography ">Typography</a></li>
            <li><a href="started.html#icons ">Icons</a></li>
          </ul>
        </li>
        <li class="has-child">
          <a
            href="javascript: void(0);"
            aria-expanded="false"
            class="waves-effect primary-light"
          >
            <span class="icon-box"><i class="ph-layout"></i></span>
            <div class="text-box">Layouts</div>
          </a>
          <ul class="sub-menu" aria-expanded="false">
            <li><a href="layouts.html">Layouts</a></li>
            <li><a href="layouts.html#theme">theme</a></li>
          </ul>
        </li>
        <li class="has-child">
          <a
            href="javascript: void(0);"
            aria-expanded="false"
            class="waves-effect primary-light"
          >
            <span class="icon-box">
              <i class="ph-puzzle-piece"></i>
            </span>
            <div class="text-box">Plugins</div>
          </a>
          <ul class="sub-menu" aria-expanded="false">
            <li><a href="plugin.html">Map</a></li>
            <li><a href="plugin.html#calendars">Calendar</a></li>
            <li><a href="plugin.html#chart">Chart</a></li>
          </ul>
        </li>
        <li>
          <a
            href="browser-support.html"
            aria-expanded="false"
            class="waves-effect primary-light"
          >
            <span class="icon-box"><i class="ph-disc"></i></span>
            <div class="text-box">Browser Supports & Credit</div>
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>
