project_directory/resources/views/layout/partials/sidenav.blade.php

<aside class="left-sidebar">
  <div>
    {{-- Logo --}}
    <div class="brand-logo d-flex align-items-center justify-content-between">
      <a href="{{ url('/') }}" class="text-nowrap logo-img">
        <img src="{{ asset('logo/logo_rsabhk.png') }}" alt="rsabhk" width="180" class="mt-2" />
      </a>

      <div class="close-btn d-xl-none d-block sidebartoggler cursor-pointer" id="sidebarCollapse">
        <i class="ti ti-x fs-6"></i>
      </div>
    </div>

    {{-- Sidebar nav --}}
    @php
      $openMaster = request()->is('akses*') || request()->is('master-kategori*') || request()->is('master-persetujuan*');
    @endphp

    <nav class="sidebar-nav scroll-sidebar" data-simplebar="">
      <ul id="sidebarnav">

        {{-- HOME --}}
        <li class="nav-small-cap"><span class="hide-menu">Home</span></li>

        <li class="sidebar-item">
          <a class="sidebar-link" href="{{ url('/') }}" aria-expanded="false">
            <i class="ti ti-dashboard"></i>
            <span class="hide-menu">Dashboard</span>
          </a>
        </li>

        <li class="sidebar-item">
          <a class="sidebar-link" href="{{ url('/new') }}" aria-expanded="false">
            <i class="ti ti-layout-dashboard"></i>
            <span class="hide-menu">Dashboard V2</span>
          </a>
        </li>

        {{-- AKTIVITAS --}}
        <li class="nav-small-cap"><span class="hide-menu">Aktivitas</span></li>

        <li class="sidebar-item">
          <a class="sidebar-link d-flex align-items-center justify-content-between"
             href="{{ url('/log-activity') }}" aria-expanded="false">
            <div class="d-flex align-items-center gap-3">
              <i class="ti ti-activity"></i>
              <span class="hide-menu">Log Aktivitas</span>
            </div>
          </a>
        </li>

        @if($authUnit = auth()->user()->masterPersetujuan)
        <li class="sidebar-item">
          <a class="sidebar-link d-flex align-items-center justify-content-between"
             href="{{ url('/pending-file') }}" aria-expanded="false">

            <div class="d-flex align-items-center gap-3">
              <i class="ti ti-clock"></i>
              <span class="hide-menu">Persetujuan</span>
            </div>

            <span class="badge bg-danger rounded-pill d-none" id="pendingCountBadge">0</span>
          </a>
        </li>
        @endif
        {{-- RECAP --}}
        <li class="nav-small-cap"><span class="hide-menu">Recap</span></li>

        <li class="sidebar-item">
          <a class="sidebar-link d-flex align-items-center justify-content-between"
             href="{{ url('/recap') }}" aria-expanded="false">
            <div class="d-flex align-items-center gap-3">
              <i class="ti ti-report-analytics"></i>
              <span class="hide-menu">Data Rekap</span>
            </div>
          </a>
        </li>

        {{-- MASTER --}}
        @if(auth()->user()->akses && auth()->user()->akses->master_akses)
        <li class="nav-small-cap"><span class="hide-menu">Master</span></li>

        <li class="sidebar-item has-sub {{ $openMaster ? 'open' : '' }}">
          <a class="sidebar-link d-flex align-items-center justify-content-between"
             href="#menu-master"
             data-bs-toggle="collapse"
             role="button"
             aria-expanded="{{ $openMaster ? 'true' : 'false' }}"
             aria-controls="menu-master">

            <div class="d-flex align-items-center gap-3">
              <i class="ti ti-report-analytics"></i>
              <span class="hide-menu">Master</span>
            </div>

            <i class="ti ti-chevron-right fs-6 sidebar-arrow"></i>
          </a>

          <ul class="collapse sidebar-submenu {{ $openMaster ? 'show' : '' }}" id="menu-master">
            <li class="sidebar-item">
              <a href="{{ url('/akses') }}" class="sidebar-link">
                <span class="hide-menu">Akses</span>
              </a>
            </li>

            <li class="sidebar-item">
              <a href="{{ url('/master-kategori') }}" class="sidebar-link">
                <span class="hide-menu">Kategori</span>
              </a>
            </li>

            <li class="sidebar-item">
              <a href="{{ url('/master-persetujuan') }}" class="sidebar-link">
                <span class="hide-menu">Persetujuan</span>
              </a>
            </li>
          </ul>
        </li>
        @endif
      </ul>
    </nav>
  </div>
</aside>

{{-- Styling kecil biar submenu rapi + arrow muter --}}
<style>
  .sidebar-submenu { padding-left: 2.7rem; }
  .sidebar-submenu .sidebar-link { padding: 6px 0; font-size: 13px; opacity: .9; }

  .sidebar-item.has-sub .sidebar-arrow { transition: transform .2s ease; }
  .sidebar-item.has-sub.open .sidebar-arrow { transform: rotate(90deg); }
</style>

<script>
  const badge = document.getElementById('pendingCountBadge');

  async function countData() {
    if (!badge) return;

    try {
      const res = await fetch('/data/count-pending', {
        headers: { 'Accept': 'application/json' }
      });

      if (!res.ok) throw new Error('Request failed: ' + res.status);

      const data = await res.json();
      const count = Number(data?.count ?? 0);

      badge.textContent = count;
      badge.classList.toggle('d-none', count <= 0);

    } catch (e) {
      badge.classList.add('d-none');
    }
  }

  countData();

  setInterval(countData, 60000);

  const masterCollapse = document.getElementById('menu-master');
  const masterItem = masterCollapse
    ? masterCollapse.closest('.sidebar-item.has-sub')
    : null;

  if (masterItem && masterCollapse) {
    masterCollapse.addEventListener('shown.bs.collapse', function () {
      masterItem.classList.add('open');
    });

    masterCollapse.addEventListener('hidden.bs.collapse', function () {
      masterItem.classList.remove('open');
    });
  }
</script>