<nav class="sidebar">
  <div class="sidebar-header">
    <a href="dashboard.php" class="sidebar-brand">
      Unbox<span>Catalyst</span>
    </a>
    <div class="sidebar-toggler not-active">
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
  <div class="sidebar-body">
    <ul class="nav">
      <li class="nav-item nav-category">Main</li>
      <li class="nav-item">
        <a href="dashboard.php" class="nav-link">
          <i class="link-icon" data-feather="box"></i>
          <span class="link-title">Dashboard</span>
        </a>
      </li>
      <li class="nav-item nav-category">Detail</li>
      <!-- <li class="nav-item">
        <a class="nav-link" data-bs-toggle="collapse" href="#emails" role="button" aria-expanded="false" aria-controls="emails">
          <i class="link-icon" data-feather="mail"></i>
          <span class="link-title">Email</span>
          <i class="link-arrow" data-feather="chevron-down"></i>
        </a>
        <div class="collapse" id="emails">
          <ul class="nav sub-menu">
            <li class="nav-item">
              <a href="#" class="nav-link">Inbox</a>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link">Read</a>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link">Compose</a>
            </li>
          </ul>
        </div>
      </li> 
      <li class="nav-item">
        <a href="#" class="nav-link">
          <i class="link-icon" data-feather="message-square"></i>
          <span class="link-title">Chat</span>
        </a>
      </li>-->
      <li class="nav-item">
        <a href="add-invoice.php" class="nav-link">
          <i class="link-icon" data-feather="message-square"></i>
          <span class="link-title">Add Invoice</span>
        </a>
      </li>
      <li class="nav-item">
        <a href="invoice-list.php" class="nav-link">
          <i class="link-icon" data-feather="message-square"></i>
          <span class="link-title">Invoice Detail</span>
        </a>
      </li>
      <!--<li class="nav-item">
        <a href="#" class="nav-link">
          <i class="link-icon" data-feather="calendar"></i>
          <span class="link-title">Calendar</span>
        </a>
      </li>
       <li class="nav-item nav-category">Components</li>
      <li class="nav-item">
        <a class="nav-link" data-bs-toggle="collapse" href="#uiComponents" role="button" aria-expanded="false" aria-controls="uiComponents">
          <i class="link-icon" data-feather="feather"></i>
          <span class="link-title">UI Kit</span>
          <i class="link-arrow" data-feather="chevron-down"></i>
        </a>
        <div class="collapse" id="uiComponents">
          <ul class="nav sub-menu">
            <li class="nav-item">
              <a href="pages/ui-components/accordion.php" class="nav-link">Accordion</a>
            </li>
            <li class="nav-item">
              <a href="pages/ui-components/alerts.php" class="nav-link">Alerts</a>
            </li>
            <li class="nav-item">
              <a href="pages/ui-components/badges.php" class="nav-link">Badges</a>
            </li>
            <li class="nav-item">
              <a href="pages/ui-components/breadcrumbs.php" class="nav-link">Breadcrumbs</a>
            </li>
            <li class="nav-item">
              <a href="pages/ui-components/buttons.php" class="nav-link">Buttons</a>
            </li>
            <li class="nav-item">
              <a href="pages/ui-components/button-group.php" class="nav-link">Button group</a>
            </li>
            <li class="nav-item">
              <a href="pages/ui-components/cards.php" class="nav-link">Cards</a>
            </li>
            <li class="nav-item">
              <a href="pages/ui-components/carousel.php" class="nav-link">Carousel</a>
            </li>
            <li class="nav-item">
              <a href="pages/ui-components/collapse.php" class="nav-link">Collapse</a>
            </li>
            <li class="nav-item">
              <a href="pages/ui-components/dropdowns.php" class="nav-link">Dropdowns</a>
            </li>
            <li class="nav-item">
              <a href="pages/ui-components/list-group.php" class="nav-link">List group</a>
            </li>
            <li class="nav-item">
              <a href="pages/ui-components/media-object.php" class="nav-link">Media object</a>
            </li>
            <li class="nav-item">
              <a href="pages/ui-components/modal.php" class="nav-link">Modal</a>
            </li>
            <li class="nav-item">
              <a href="pages/ui-components/navs.php" class="nav-link">Navs</a>
            </li>
            <li class="nav-item">
              <a href="pages/ui-components/navbar.php" class="nav-link">Navbar</a>
            </li>
            <li class="nav-item">
              <a href="pages/ui-components/pagination.php" class="nav-link">Pagination</a>
            </li>
            <li class="nav-item">
              <a href="pages/ui-components/popover.php" class="nav-link">Popovers</a>
            </li>
            <li class="nav-item">
              <a href="pages/ui-components/progress.php" class="nav-link">Progress</a>
            </li>
            <li class="nav-item">
              <a href="pages/ui-components/scrollbar.php" class="nav-link">Scrollbar</a>
            </li>
            <li class="nav-item">
              <a href="pages/ui-components/scrollspy.php" class="nav-link">Scrollspy</a>
            </li>
            <li class="nav-item">
              <a href="pages/ui-components/spinners.php" class="nav-link">Spinners</a>
            </li>
            <li class="nav-item">
              <a href="pages/ui-components/tabs.php" class="nav-link">Tabs</a>
            </li>
            <li class="nav-item">
              <a href="pages/ui-components/tooltips.php" class="nav-link">Tooltips</a>
            </li>
          </ul>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-bs-toggle="collapse" href="#advancedUI" role="button" aria-expanded="false" aria-controls="advancedUI">
          <i class="link-icon" data-feather="anchor"></i>
          <span class="link-title">Advanced UI</span>
          <i class="link-arrow" data-feather="chevron-down"></i>
        </a>
        <div class="collapse" id="advancedUI">
          <ul class="nav sub-menu">
            <li class="nav-item">
              <a href="pages/advanced-ui/cropper.php" class="nav-link">Cropper</a>
            </li>
            <li class="nav-item">
              <a href="pages/advanced-ui/owl-carousel.php" class="nav-link">Owl carousel</a>
            </li>
            <li class="nav-item">
              <a href="pages/advanced-ui/sortablejs.php" class="nav-link">SortableJs</a>
            </li>
            <li class="nav-item">
              <a href="pages/advanced-ui/sweet-alert.php" class="nav-link">Sweet Alert</a>
            </li>
          </ul>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-bs-toggle="collapse" href="#forms" role="button" aria-expanded="false" aria-controls="forms">
          <i class="link-icon" data-feather="inbox"></i>
          <span class="link-title">Forms</span>
          <i class="link-arrow" data-feather="chevron-down"></i>
        </a>
        <div class="collapse" id="forms">
          <ul class="nav sub-menu">
            <li class="nav-item">
              <a href="pages/forms/basic-elements.php" class="nav-link">Basic Elements</a>
            </li>
            <li class="nav-item">
              <a href="pages/forms/advanced-elements.php" class="nav-link">Advanced Elements</a>
            </li>
            <li class="nav-item">
              <a href="pages/forms/editors.php" class="nav-link">Editors</a>
            </li>
            <li class="nav-item">
              <a href="pages/forms/wizard.php" class="nav-link">Wizard</a>
            </li>
          </ul>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-bs-toggle="collapse" href="#charts" role="button" aria-expanded="false" aria-controls="charts">
          <i class="link-icon" data-feather="pie-chart"></i>
          <span class="link-title">Charts</span>
          <i class="link-arrow" data-feather="chevron-down"></i>
        </a>
        <div class="collapse" id="charts">
          <ul class="nav sub-menu">
            <li class="nav-item">
              <a href="pages/charts/apex.php" class="nav-link">Apex</a>
            </li>
            <li class="nav-item">
              <a href="pages/charts/chartjs.php" class="nav-link">ChartJs</a>
            </li>
            <li class="nav-item">
              <a href="pages/charts/flot.php" class="nav-link">Flot</a>
            </li>
            <li class="nav-item">
              <a href="pages/charts/peity.php" class="nav-link">Peity</a>
            </li>
            <li class="nav-item">
              <a href="pages/charts/sparkline.php" class="nav-link">Sparkline</a>
            </li>
          </ul>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-bs-toggle="collapse" href="#tables" role="button" aria-expanded="false" aria-controls="tables">
          <i class="link-icon" data-feather="layout"></i>
          <span class="link-title">Table</span>
          <i class="link-arrow" data-feather="chevron-down"></i>
        </a>
        <div class="collapse" id="tables">
          <ul class="nav sub-menu">
            <li class="nav-item">
              <a href="pages/tables/basic-table.php" class="nav-link">Basic Tables</a>
            </li>
            <li class="nav-item">
              <a href="pages/tables/data-table.php" class="nav-link">Data Table</a>
            </li>
          </ul>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-bs-toggle="collapse" href="#icons" role="button" aria-expanded="false" aria-controls="icons">
          <i class="link-icon" data-feather="smile"></i>
          <span class="link-title">Icons</span>
          <i class="link-arrow" data-feather="chevron-down"></i>
        </a>
        <div class="collapse" id="icons">
          <ul class="nav sub-menu">
            <li class="nav-item">
              <a href="pages/icons/feather-icons.php" class="nav-link">Feather Icons</a>
            </li>
            <li class="nav-item">
              <a href="pages/icons/flag-icons.php" class="nav-link">Flag Icons</a>
            </li>
            <li class="nav-item">
              <a href="pages/icons/mdi-icons.php" class="nav-link">Mdi Icons</a>
            </li>
          </ul>
        </div>
      </li>
      <li class="nav-item nav-category">Pages</li>
      <li class="nav-item">
        <a class="nav-link" data-bs-toggle="collapse" href="#general-pages" role="button" aria-expanded="false" aria-controls="general-pages">
          <i class="link-icon" data-feather="book"></i>
          <span class="link-title">Special pages</span>
          <i class="link-arrow" data-feather="chevron-down"></i>
        </a>
        <div class="collapse" id="general-pages">
          <ul class="nav sub-menu">
            <li class="nav-item">
              <a href="pages/general/blank-page.php" class="nav-link">Blank page</a>
            </li>
            <li class="nav-item">
              <a href="pages/general/faq.php" class="nav-link">Faq</a>
            </li>
            <li class="nav-item">
              <a href="pages/general/invoice.php" class="nav-link">Invoice</a>
            </li>
            <li class="nav-item">
              <a href="pages/general/profile.php" class="nav-link">Profile</a>
            </li>
            <li class="nav-item">
              <a href="pages/general/pricing.php" class="nav-link">Pricing</a>
            </li>
            <li class="nav-item">
              <a href="pages/general/timeline.php" class="nav-link">Timeline</a>
            </li>
          </ul>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-bs-toggle="collapse" href="#authPages" role="button" aria-expanded="false" aria-controls="authPages">
          <i class="link-icon" data-feather="unlock"></i>
          <span class="link-title">Authentication</span>
          <i class="link-arrow" data-feather="chevron-down"></i>
        </a>
        <div class="collapse" id="authPages">
          <ul class="nav sub-menu">
            <li class="nav-item">
              <a href="pages/auth/login.php" class="nav-link">Login</a>
            </li>
            <li class="nav-item">
              <a href="pages/auth/register.php" class="nav-link">Register</a>
            </li>
          </ul>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-bs-toggle="collapse" href="#errorPages" role="button" aria-expanded="false" aria-controls="errorPages">
          <i class="link-icon" data-feather="cloud-off"></i>
          <span class="link-title">Error</span>
          <i class="link-arrow" data-feather="chevron-down"></i>
        </a>
        <div class="collapse" id="errorPages">
          <ul class="nav sub-menu">
            <li class="nav-item">
              <a href="pages/error/404.php" class="nav-link">404</a>
            </li>
            <li class="nav-item">
              <a href="pages/error/500.php" class="nav-link">500</a>
            </li>
          </ul>
        </div>
      </li> -->
    </ul>
  </div>
</nav>