<!-- Sidebar scroll-->
<div>
  <!-- Sidebar navigation-->
  <nav id="sidebarnavh" class="sidebar-nav scroll-sidebar container-fluid">
    <ul id="sidebarnav">
      <!-- ============================= -->
      <!-- Home -->
      <!-- ============================= -->
      <li class="nav-small-cap">
        <i class="ti ti-dots nav-small-cap-icon fs-4"></i>
        <span class="hide-menu">Home</span>
      </li>
      <!-- =================== -->
      <!-- Dashboard -->
      <!-- =================== -->
      <?php $activePages = ['','index', 'index2', 'index3', 'index4', 'index5', 'index6']; ?>
      <li class="sidebar-item <?= in_array(uri_string(), $activePages) ? 'selected' : '' ?>">
        <a class="sidebar-link has-arrow" href="javascript:void(0)" aria-expanded="false">
          <span>
            <i class="ti ti-home-2"></i>
          </span>
          <span class="hide-menu">Dashboard</span>
        </a>
        <ul aria-expanded="false" class="collapse first-level">
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === '') ? 'active' : '' ?>" href="/">
              <i class="ti ti-aperture"></i>
              <span class="hide-menu">Modern</span>
            </a>
          </li>
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'index2') ? 'active' : '' ?>" href="index2">
              <i class="ti ti-shopping-cart"></i>
              <span class="hide-menu">eCommerce</span>
            </a>
          </li>
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'index3') ? 'active' : '' ?>" href="index3">
              <i class="ti ti-currency-dollar"></i>
              <span class="hide-menu">NFT</span>
            </a>
          </li>
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'index4') ? 'active' : '' ?>" href="index4">
              <i class="ti ti-cpu"></i>
              <span class="hide-menu">Crypto</span>
            </a>
          </li>
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'index5') ? 'active' : '' ?>" href="index5">
              <i class="ti ti-activity-heartbeat"></i>
              <span class="hide-menu">General</span>
            </a>
          </li>
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'index6') ? 'active' : '' ?>" href="index6">
              <i class="ti ti-playlist"></i>
              <span class="hide-menu">Music</span>
            </a>
          </li>
        </ul>
      </li>
      <!-- ============================= -->
      <!-- Apps -->
      <!-- ============================= -->
      <li class="nav-small-cap">
        <i class="ti ti-dots nav-small-cap-icon fs-4"></i>
        <span class="hide-menu">Apps</span>
      </li>
      <?php $activePages = ['app-calendar', 'app-kanban', 'app-chat', 'app-email', 'app-contact', 'app-contact2', 'app-notes', 'app-invoice', 'page-user-profile', 'blog-posts', 'blog-detail', 'eco-shop', 'eco-shop-detail', 'eco-product-list', 'eco-checkout', 'eco-add-product', 'eco-edit-product']; ?>
      <li class="sidebar-item <?= in_array(uri_string(), $activePages) ? 'selected' : '' ?>">
        <a class="sidebar-link two-column has-arrow" href="javascript:void(0)" aria-expanded="false">
          <span>
            <i class="ti ti-archive"></i>
          </span>
          <span class="hide-menu">Apps</span>
        </a>
        <ul aria-expanded="false" class="collapse first-level">
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'app-calendar') ? 'active' : '' ?>" href="app-calendar">
              <i class="ti ti-calendar"></i>
              <span class="hide-menu">Calendar</span>
            </a>
          </li>
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'app-kanban') ? 'active' : '' ?>" href="app-kanban">
              <i class="ti ti-layout-kanban"></i>
              <span class="hide-menu">Kanban</span>
            </a>
          </li>
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'app-chat') ? 'active' : '' ?>" href="app-chat">
              <i class="ti ti-message-dots"></i>
              <span class="hide-menu">Chat</span>
            </a>
          </li>
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'app-email') ? 'active' : '' ?>" href="app-email" aria-expanded="false">
              <span>
                <i class="ti ti-mail"></i>
              </span>
              <span class="hide-menu">Email</span>
            </a>
          </li>
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'app-contact') ? 'active' : '' ?>" href="app-contact">
              <i class="ti ti-phone"></i>
              <span class="hide-menu">Contact Table</span>
            </a>
          </li>
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'app-contact2') ? 'active' : '' ?>" href="app-contact2">
              <i class="ti ti-list-details"></i>
              <span class="hide-menu">Contact List</span>
            </a>
          </li>
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'app-notes') ? 'active' : '' ?>" href="app-notes">
              <i class="ti ti-notes"></i>
              <span class="hide-menu">Notes</span>
            </a>
          </li>
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'app-invoice') ? 'active' : '' ?>" href="app-invoice">
              <i class="ti ti-file-text"></i>
              <span class="hide-menu">Invoice</span>
            </a>
          </li>
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'page-user-profile') ? 'active' : '' ?>" href="page-user-profile">
              <i class="ti ti-user-circle"></i>
              <span class="hide-menu">User Profile</span>
            </a>
          </li>
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'blog-posts') ? 'active' : '' ?>" href="blog-posts">
              <i class="ti ti-article"></i>
              <span class="hide-menu">Posts</span>
            </a>
          </li>
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'blog-detail') ? 'active' : '' ?>" href="blog-detail">
              <i class="ti ti-details"></i>
              <span class="hide-menu">Detail</span>
            </a>
          </li>
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'eco-shop') ? 'active' : '' ?>" href="eco-shop">
              <i class="ti ti-shopping-cart"></i>
              <span class="hide-menu">Shop</span>
            </a>
          </li>
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'eco-shop-detail') ? 'active' : '' ?>" href="eco-shop-detail">
              <i class="ti ti-basket"></i>
              <span class="hide-menu">Shop Detail</span>
            </a>
          </li>
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'eco-product-list') ? 'active' : '' ?>" href="eco-product-list">
              <i class="ti ti-list-check"></i>
              <span class="hide-menu">List</span>
            </a>
          </li>
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'eco-checkout') ? 'active' : '' ?>" href="eco-checkout">
              <i class="ti ti-brand-shopee"></i>
              <span class="hide-menu">Checkout</span>
            </a>
          </li>
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'eco-add-product') ? 'active' : '' ?>" href="eco-add-product">
              <i class="ti ti-file-plus"></i>
              <span class="hide-menu">Add Product</span>
            </a>
          </li>
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'eco-edit-product') ? 'active' : '' ?>" href="eco-edit-product">
              <i class="ti ti-file-pencil"></i>
              <span class="hide-menu">Edit Product</span>
            </a>
          </li>
        </ul>
      </li>
      <!-- ============================= -->
      <!-- PAGES -->
      <!-- ============================= -->
      <li class="nav-small-cap">
        <i class="ti ti-dots nav-small-cap-icon fs-4"></i>
        <span class="hide-menu">PAGES</span>
      </li>
      <?php $activePages = ['page-faq', 'page-account-settings', 'page-pricing', 'widgets-cards', 'widgets-banners', 'widgets-charts']; ?>
      <li class="sidebar-item <?= in_array(uri_string(), $activePages) ? 'selected' : '' ?>">
        <a class="sidebar-link has-arrow" href="javascript:void(0)" aria-expanded="false">
          <span>
            <i class="ti ti-notebook"></i>
          </span>
          <span class="hide-menu">Pages</span>
        </a>
        <ul aria-expanded="false" class="collapse first-level">
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'page-faq') ? 'active' : '' ?>" href="page-faq">
              <i class="ti ti-help"></i>
              <span class="hide-menu">FAQ</span>
            </a>
          </li>
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'page-account-settings') ? 'active' : '' ?>" href="page-account-settings">
              <i class="ti ti-user-circle"></i>
              <span class="hide-menu">Account Setting</span>
            </a>
          </li>
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'page-pricing') ? 'active' : '' ?>" href="page-pricing">
              <i class="ti ti-currency-dollar"></i>
              <span class="hide-menu">Pricing</span>
            </a>
          </li>
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'widgets-cards') ? 'active' : '' ?>" href="widgets-cards">
              <i class="ti ti-cards"></i>
              <span class="hide-menu">Card</span>
            </a>
          </li>
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'widgets-banners') ? 'active' : '' ?>" href="widgets-banners">
              <i class="ti ti-ad"></i>
              <span class="hide-menu">Banner</span>
            </a>
          </li>
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'widgets-charts') ? 'active' : '' ?>" href="widgets-charts">
              <i class="ti ti-chart-bar"></i>
              <span class="hide-menu">Charts</span>
            </a>
          </li>
          <li class="sidebar-item">
            <a href="landingpage" class="sidebar-link <?= ($currentPath === 'landingpage') ? 'active' : '' ?>">
              <i class="ti ti-app-window"></i>
              <span class="hide-menu">Landing Page</span>
            </a>
          </li>
        </ul>
      </li>
      <!-- ============================= -->
      <!-- UI -->
      <!-- ============================= -->
      <li class="nav-small-cap">
        <i class="ti ti-dots nav-small-cap-icon fs-4"></i>
        <span class="hide-menu">UI</span>
      </li>
      <!-- =================== -->
      <!-- UI Elements -->
      <!-- =================== -->
      <?php $activePages = ['ui-accordian', 'ui-badge', 'ui-buttons', 'ui-dropdowns', 'ui-modals', 'ui-tab', 'ui-tooltip-popover', 'ui-notification', 'ui-progressbar', 'ui-pagination', 'ui-typography', 'ui-bootstrap-ui', 'ui-breadcrumb', 'ui-offcanvas', 'ui-lists', 'ui-grid', 'ui-carousel', 'ui-scrollspy', 'ui-spinner', 'ui-link']; ?>
      <li class="sidebar-item mega-dropdown <?= in_array(uri_string(), $activePages) ? 'selected' : '' ?>">
        <a class="sidebar-link has-arrow" href="javascript:void(0)" aria-expanded="false">
          <span class="rounded-3">
            <i class="ti ti-layout-grid"></i>
          </span>
          <span class="hide-menu">UI</span>
        </a>
        <ul aria-expanded="false" class="collapse first-level">
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'ui-accordian') ? 'active' : '' ?>" href="ui-accordian">
              <i class="ti ti-circle"></i>
              <span class="hide-menu">Accordian</span>
            </a>
          </li>
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'ui-badge') ? 'active' : '' ?>" href="ui-badge">
              <i class="ti ti-circle"></i>
              <span class="hide-menu">Badge</span>
            </a>
          </li>
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'ui-buttons') ? 'active' : '' ?>" href="ui-buttons">
              <i class="ti ti-circle"></i>
              <span class="hide-menu">Buttons</span>
            </a>
          </li>
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'ui-dropdowns') ? 'active' : '' ?>" href="ui-dropdowns">
              <i class="ti ti-circle"></i>
              <span class="hide-menu">Dropdowns</span>
            </a>
          </li>
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'ui-modals') ? 'active' : '' ?>" href="ui-modals">
              <i class="ti ti-circle"></i>
              <span class="hide-menu">Modals</span>
            </a>
          </li>
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'ui-tab') ? 'active' : '' ?>" href="ui-tab">
              <i class="ti ti-circle"></i>
              <span class="hide-menu">Tab</span>
            </a>
          </li>
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'ui-tooltip-popover') ? 'active' : '' ?>" href="ui-tooltip-popover">
              <i class="ti ti-circle"></i>
              <span class="hide-menu">Tooltip & Popover</span>
            </a>
          </li>
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'ui-notification') ? 'active' : '' ?>" href="ui-notification">
              <i class="ti ti-circle"></i>
              <span class="hide-menu">Alerts</span>
            </a>
          </li>
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'ui-progressbar') ? 'active' : '' ?>" href="ui-progressbar">
              <i class="ti ti-circle"></i>
              <span class="hide-menu">Progressbar</span>
            </a>
          </li>
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'ui-pagination') ? 'active' : '' ?>" href="ui-pagination">
              <i class="ti ti-circle"></i>
              <span class="hide-menu">Pagination</span>
            </a>
          </li>
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'ui-typography') ? 'active' : '' ?>" href="ui-typography">
              <i class="ti ti-circle"></i>
              <span class="hide-menu">Typography</span>
            </a>
          </li>
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'ui-bootstrap-ui') ? 'active' : '' ?>" href="ui-bootstrap-ui">
              <i class="ti ti-circle"></i>
              <span class="hide-menu">Bootstrap UI</span>
            </a>
          </li>
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'ui-breadcrumb') ? 'active' : '' ?>" href="ui-breadcrumb">
              <i class="ti ti-circle"></i>
              <span class="hide-menu">Breadcrumb</span>
            </a>
          </li>
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'ui-offcanvas') ? 'active' : '' ?>" href="ui-offcanvas">
              <i class="ti ti-circle"></i>
              <span class="hide-menu">Offcanvas</span>
            </a>
          </li>
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'ui-lists') ? 'active' : '' ?>" href="ui-lists">
              <i class="ti ti-circle"></i>
              <span class="hide-menu">Lists</span>
            </a>
          </li>
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'ui-grid') ? 'active' : '' ?>" href="ui-grid">
              <i class="ti ti-circle"></i>
              <span class="hide-menu">Grid</span>
            </a>
          </li>
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'ui-carousel') ? 'active' : '' ?>" href="ui-carousel">
              <i class="ti ti-circle"></i>
              <span class="hide-menu">Carousel</span>
            </a>
          </li>
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'ui-scrollspy') ? 'active' : '' ?>" href="ui-scrollspy">
              <i class="ti ti-circle"></i>
              <span class="hide-menu">Scrollspy</span>
            </a>
          </li>
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'ui-spinner') ? 'active' : '' ?>" href="ui-spinner">
              <i class="ti ti-circle"></i>
              <span class="hide-menu">Spinner</span>
            </a>
          </li>
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'ui-link') ? 'active' : '' ?>" href="ui-link">
              <i class="ti ti-circle"></i>
              <span class="hide-menu">Link</span>
            </a>
          </li>
        </ul>
      </li>
      <!-- ============================= -->
      <!-- Forms -->
      <!-- ============================= -->
      <li class="nav-small-cap">
        <i class="ti ti-dots nav-small-cap-icon fs-4"></i>
        <span class="hide-menu">Forms</span>
      </li>
      <!-- =================== -->
      <!-- Forms -->
      <!-- =================== -->
      <?php $activePages = ['form-inputs', 'form-input-groups', 'form-input-grid', 'form-checkbox-radio', 'form-bootstrap-switch', 'form-select2', 'form-basic', 'form-vertical', 'form-horizontal', 'form-actions', 'form-row-separator', 'form-bordered', 'form-detail', 'form-wizard', 'form-editor-quill']; ?>
      <li class="sidebar-item <?= in_array(uri_string(), $activePages) ? 'selected' : '' ?>">
        <a class="sidebar-link two-column has-arrow" href="javascript:void(0)" aria-expanded="false">
          <span class="rounded-3">
            <i class="ti ti-file-text"></i>
          </span>
          <span class="hide-menu">Forms</span>
        </a>
        <ul aria-expanded="false" class="collapse first-level">
          <!-- form elements -->
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'form-inputs') ? 'active' : '' ?>" href="form-inputs">
              <i class="ti ti-circle"></i>
              <span class="hide-menu">Forms Input</span>
            </a>
          </li>
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'form-input-groups') ? 'active' : '' ?>" href="form-input-groups">
              <i class="ti ti-circle"></i>
              <span class="hide-menu">Input Groups</span>
            </a>
          </li>
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'form-input-grid') ? 'active' : '' ?>" href="form-input-grid">
              <i class="ti ti-circle"></i>
              <span class="hide-menu">Input Grid</span>
            </a>
          </li>
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'form-checkbox-radio') ? 'active' : '' ?>" href="form-checkbox-radio">
              <i class="ti ti-circle"></i>
              <span class="hide-menu">Checkbox & Radios</span>
            </a>
          </li>
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'form-bootstrap-switch') ? 'active' : '' ?>" href="form-bootstrap-switch">
              <i class="ti ti-circle"></i>
              <span class="hide-menu">Bootstrap Switch</span>
            </a>
          </li>
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'form-select2') ? 'active' : '' ?>" href="form-select2">
              <i class="ti ti-circle"></i>
              <span class="hide-menu">Select2</span>
            </a>
          </li>
          <!-- form inputs -->
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'form-basic') ? 'active' : '' ?>" href="form-basic">
              <i class="ti ti-circle"></i>
              <span class="hide-menu">Basic Form</span>
            </a>
          </li>
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'form-vertical') ? 'active' : '' ?>" href="form-vertical">
              <i class="ti ti-circle"></i>
              <span class="hide-menu">Form Vertical</span>
            </a>
          </li>
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'form-horizontal') ? 'active' : '' ?>" href="form-horizontal">
              <i class="ti ti-circle"></i>
              <span class="hide-menu">Form Horizontal</span>
            </a>
          </li>
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'form-actions') ? 'active' : '' ?>" href="form-actions">
              <i class="ti ti-circle"></i>
              <span class="hide-menu">Form Actions</span>
            </a>
          </li>
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'form-row-separator') ? 'active' : '' ?>" href="form-row-separator">
              <i class="ti ti-circle"></i>
              <span class="hide-menu">Row Separator</span>
            </a>
          </li>
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'form-bordered') ? 'active' : '' ?>" href="form-bordered">
              <i class="ti ti-circle"></i>
              <span class="hide-menu">Form Bordered</span>
            </a>
          </li>
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'form-detail') ? 'active' : '' ?>" href="form-detail">
              <i class="ti ti-circle"></i>
              <span class="hide-menu">Form Detail</span>
            </a>
          </li>
          <!-- form wizard -->
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'form-wizard') ? 'active' : '' ?>" href="form-wizard">
              <i class="ti ti-circle"></i>
              <span class="hide-menu">Form Wizard</span>
            </a>
          </li>
          <!-- Quill Editor -->
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'form-editor-quill') ? 'active' : '' ?>" href="form-editor-quill">
              <i class="ti ti-circle"></i>
              <span class="hide-menu">Quill Editor</span>
            </a>
          </li>
        </ul>
      </li>
      <!-- ============================= -->
      <!-- Tables -->
      <!-- ============================= -->
      <li class="nav-small-cap">
        <i class="ti ti-dots nav-small-cap-icon fs-4"></i>
        <span class="hide-menu">Tables</span>
      </li>
      <!-- =================== -->
      <!-- Bootstrap Table -->
      <!-- =================== -->
      <?php $activePages = ['table-basic', 'table-dark-basic', 'table-sizing', 'table-layout-coloured', 'table-datatable-basic', 'table-datatable-api', 'table-datatable-advanced']; ?>
      <li class="sidebar-item <?= in_array(uri_string(), $activePages) ? 'selected' : '' ?>">
        <a class="sidebar-link has-arrow" href="javascript:void(0)" aria-expanded="false">
          <span class="rounded-3">
            <i class="ti ti-layout-sidebar"></i>
          </span>
          <span class="hide-menu">Tables</span>
        </a>
        <ul aria-expanded="false" class="collapse first-level">
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'table-basic') ? 'active' : '' ?>" href="table-basic">
              <i class="ti ti-circle"></i>
              <span class="hide-menu">Basic Table</span>
            </a>
          </li>
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'table-dark-basic') ? 'active' : '' ?>" href="table-dark-basic">
              <i class="ti ti-circle"></i>
              <span class="hide-menu">Dark Basic Table</span>
            </a>
          </li>
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'table-sizing') ? 'active' : '' ?>" href="table-sizing">
              <i class="ti ti-circle"></i>
              <span class="hide-menu">Sizing Table</span>
            </a>
          </li>
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'table-layout-coloured') ? 'active' : '' ?>" href="table-layout-coloured">
              <i class="ti ti-circle"></i>
              <span class="hide-menu">Coloured Table</span>
            </a>
          </li>
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'table-datatable-basic') ? 'active' : '' ?>" href="table-datatable-basic">
              <i class="ti ti-circle"></i>
              <span class="hide-menu">Basic Initialisation</span>
            </a>
          </li>
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'table-datatable-api') ? 'active' : '' ?>" href="table-datatable-api">
              <i class="ti ti-circle"></i>
              <span class="hide-menu">API</span>
            </a>
          </li>
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'table-datatable-advanced') ? 'active' : '' ?>" href="table-datatable-advanced">
              <i class="ti ti-circle"></i>
              <span class="hide-menu">Advanced Initialisation</span>
            </a>
          </li>
        </ul>
      </li>
      <!-- ============================= -->
      <!-- Charts -->
      <!-- ============================= -->
      <li class="nav-small-cap">
        <i class="ti ti-dots nav-small-cap-icon fs-4"></i>
        <span class="hide-menu">Charts</span>
      </li>
      <!-- =================== -->
      <!-- Apex Chart -->
      <!-- =================== -->
      <?php $activePages = ['chart-apex-line', 'chart-apex-area', 'chart-apex-bar', 'chart-apex-pie', 'chart-apex-radial', 'chart-apex-radar']; ?>
      <li class="sidebar-item <?= in_array(uri_string(), $activePages) ? 'selected' : '' ?>">
        <a class="sidebar-link has-arrow" href="javascript:void(0)" aria-expanded="false">
          <span class="rounded-3">
            <i class="ti ti-chart-pie"></i>
          </span>
          <span class="hide-menu">Charts</span>
        </a>
        <ul aria-expanded="false" class="collapse first-level">
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'chart-apex-line') ? 'active' : '' ?>" href="chart-apex-line">
              <i class="ti ti-circle"></i>
              <span class="hide-menu">Line Chart</span>
            </a>
          </li>
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'chart-apex-area') ? 'active' : '' ?>" href="chart-apex-area">
              <i class="ti ti-circle"></i>
              <span class="hide-menu">Area Chart</span>
            </a>
          </li>
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'chart-apex-bar') ? 'active' : '' ?>" href="chart-apex-bar">
              <i class="ti ti-circle"></i>
              <span class="hide-menu">Bar Chart</span>
            </a>
          </li>
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'chart-apex-pie') ? 'active' : '' ?>" href="chart-apex-pie">
              <i class="ti ti-circle"></i>
              <span class="hide-menu">Pie Chart</span>
            </a>
          </li>
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'chart-apex-radial') ? 'active' : '' ?>" href="chart-apex-radial">
              <i class="ti ti-circle"></i>
              <span class="hide-menu">Radial Chart</span>
            </a>
          </li>
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'chart-apex-radar') ? 'active' : '' ?>" href="chart-apex-radar">
              <i class="ti ti-circle"></i>
              <span class="hide-menu">Radar Chart</span>
            </a>
          </li>
        </ul>
      </li>
      <!-- ============================= -->
      <!-- Icons -->
      <!-- ============================= -->
      <li class="nav-small-cap">
        <i class="ti ti-dots nav-small-cap-icon fs-4"></i>
        <span class="hide-menu">Icons</span>
      </li>
      <!-- =================== -->
      <!-- Tabler Icon -->
      <!-- =================== -->
      <?php $activePages = ['icon-tabler', 'icon-solar']; ?>
      <li class="sidebar-item <?= in_array(uri_string(), $activePages) ? 'selected' : '' ?>">
        <a class="sidebar-link has-arrow" href="javascript:void(0)" aria-expanded="false">
          <span class="rounded-3">
            <i class="ti ti-archive"></i>
          </span>
          <span class="hide-menu">Icon</span>
        </a>
        <ul aria-expanded="false" class="collapse first-level">
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'icon-tabler') ? 'active' : '' ?>" href="icon-tabler">
              <i class="ti ti-circle"></i>
              <span class="hide-menu">Tabler Icon</span>
            </a>
          </li>
          <li class="sidebar-item">
            <a class="sidebar-link <?= ($currentPath === 'icon-solar') ? 'active' : '' ?>" href="icon-solar">
              <i class="ti ti-circle"></i>
              <span class="hide-menu">Solar Icon</span>
            </a>
          </li>
        </ul>
      </li>
      <!-- multi level -->
      <li class="sidebar-item">
        <a class="sidebar-link has-arrow" href="javascript:void(0)" aria-expanded="false">
          <span class="rounded-3">
            <iconify-icon icon="solar:airbuds-case-minimalistic-line-duotone" class="ti"></iconify-icon>
          </span>
          <span class="hide-menu">Multi DD</span>
        </a>
        <ul aria-expanded="false" class="collapse first-level">
          <li class="sidebar-item">
            <a href="/docs/index" class="sidebar-link">
              <i class="ti ti-circle"></i>
              <span class="hide-menu">Documentation</span>
            </a>
          </li>
          <li class="sidebar-item">
            <a href="javascript:void(0)" class="sidebar-link">
              <i class="ti ti-circle"></i>
              <span class="hide-menu">Page 1</span>
            </a>
          </li>
          <li class="sidebar-item">
            <a href="javascript:void(0)" class="sidebar-link has-arrow">
              <i class="ti ti-circle"></i>
              <span class="hide-menu">Page 2</span>
            </a>
            <ul aria-expanded="false" class="collapse second-level">
              <li class="sidebar-item">
                <a href="javascript:void(0)" class="sidebar-link">
                  <i class="ti ti-circle"></i>
                  <span class="hide-menu">Page 2.1</span>
                </a>
              </li>
              <li class="sidebar-item">
                <a href="javascript:void(0)" class="sidebar-link">
                  <i class="ti ti-circle"></i>
                  <span class="hide-menu">Page 2.2</span>
                </a>
              </li>
              <li class="sidebar-item">
                <a href="javascript:void(0)" class="sidebar-link">
                  <i class="ti ti-circle"></i>
                  <span class="hide-menu">Page 2.3</span>
                </a>
              </li>
            </ul>
          </li>
          <li class="sidebar-item">
            <a href="javascript:void(0)" class="sidebar-link">
              <i class="ti ti-circle"></i>
              <span class="hide-menu">Page 3</span>
            </a>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
  <!-- End Sidebar navigation -->
</div>
<!-- End Sidebar scroll-->