//     <div id="mainContent">
//       ... your page content ...
//     </div>
//   </body>
// ============================================================

$currentPage = basename($_SERVER['PHP_SELF'], '.php');

$menuItems = [

    [
        'id'    => 'home',
        'label' => 'Home',
        'icon'  => 'fa-house',
        'href'  => 'table.php?o=fidCurDate',
    ],

    [
        'id'      => 'daily',
        'label'   => 'Daily',
        'icon'    => 'fa-chart-bar',
        'href'    => '#',
        'onclick' => "dbLoadFile('#divContent','getData.php?r=perfDaily');return false;",
    ],

    [
        'id'      => 'week',
        'label'   => 'Week',
        'icon'    => 'fa-receipt',
        'href'    => '#',
        'onclick' => "dbLoadFile('#divContent','getData.php?r=perfWeekly');return false;",
    ],

    [
        'id'      => 'month',
        'label'   => 'Month',
        'icon'    => 'fa-calendar',
        'href'    => '#',
        'onclick' => "dbLoadFile('#divContent','getData.php?r=perfMonthly');return false;",
    ],

    [
        'id'      => 'year',
        'label'   => 'Year',
        'icon'    => 'fa-calendar-days',
        'href'    => '#',
        'onclick' => "dbLoadFile('#divContent','getData.php?r=perfYearly');return false;",
    ],

    [
        'id'       => 'admin',
        'label'    => 'Admin',
        'icon'     => 'fa-user-cog',
        'href'     => '#',
        'children' => [
            ['label' => 'Dups of Duplicate Dates',  'href' => '#', 'onclick' => "dbLoadFile('#divContent','getData.php?r=dup');return false;"],
            ['label' => 'Count of Duplicate Dates', 'href' => '#', 'onclick' => "dbLoadFile('#divContent','getData.php?r=DupCnt');return false;"],
            ['label' => 'Duplicates',               'href' => '#', 'onclick' => "dbLoadFile('#divContent','getData.php?r=Duplicates');return false;"],
            ['divider' => true],
            ['label' => 'Max/Min Fields',           'href' => '#', 'onclick' => "dbLoadFile('#divContent','getData.php?r=maxMin');return false;"],
            ['label' => 'Max/Min By Year',          'href' => '#', 'onclick' => "dbLoadFile('#divContent','getData.php?r=yrMaxMin');return false;"],
            ['label' => 'Max/Min Diff by Year',     'href' => '#', 'onclick' => "dbLoadFile('#divContent','getData.php?r=yrMaxMinDiff');return false;"],
        ],
    ],

    [
        'id'       => 'perf',
        'label'    => 'Perf',
        'icon'     => 'fa-tachometer-alt',
        'href'     => '#',
        'children' => [
            ['label' => 'Perf Yearly',  'href' => '#', 'onclick' => "dbLoadFile('#divContent','getData.php?r=perfYearly');return false;"],
            ['label' => 'Perf Weekly',  'href' => '#', 'onclick' => "dbLoadFile('#divContent','getData.php?r=perfWeekly');return false;"],
            ['label' => 'Perf Monthly', 'href' => '#', 'onclick' => "dbLoadFile('#divContent','getData.php?r=perfMonthly');return false;"],
            ['label' => 'Perf Daily',   'href' => '#', 'onclick' => "dbLoadFile('#divContent','getData.php?r=perfDaily');return false;"],
        ],
    ],

    [
        'id'       => 'reports',
        'label'    => 'Reports',
        'icon'     => 'fa-file-alt',
        'href'     => '#',
        'children' => [
            ['label' => 'MinMax fidTot', 'href' => '#', 'onclick' => "dbLoadFile('#divContent','getData.php?r=btnMinMaxFidTot');return false;"],
            // Add more report items here
        ],
    ],

    [
        'id'    => 'mega',
        'label' => 'More Tools',
        'icon'  => 'fa-th',
        'href'  => '#',
        'mega'  => [
            [
                'heading' => 'Database Validation',
                'items'   => [
                    ['label' => 'Missing Days', 'href' => '#', 'onclick' => "dbLoadFile('#divContent','getData.php?r=misDay');return false;"],
                    ['label' => 'Value Check',  'href' => '#', 'onclick' => "dbLoadFile('#divContent','getData.php?r=btnValidDb');return false;"],
                    ['label' => 'Default',      'href' => '#', 'onclick' => "dbLoadFile('#divContent','getData.php?r=def');return false;"],
                ],
            ],
            [
                'heading' => 'Test',
                'items'   => [
                    ['label' => 'Missing Days', 'href' => '#', 'onclick' => "dbLoadFile('#divContent','getData.php?r=misDay');return false;"],
                ],
            ],
            [
                'heading' => 'Category 3',
                'items'   => [
                    ['label' => 'Item 7', 'href' => '#'],
                    ['label' => 'Item 8', 'href' => '#'],
                    ['label' => 'Item 9', 'href' => '#'],
                ],
            ],
            [
                'heading' => 'Category 4',
                'items'   => [
                    ['label' => 'Item 10', 'href' => '#'],
                    ['label' => 'Item 11', 'href' => '#'],
                    ['label' => 'Item 12', 'href' => '#'],
                ],
            ],
        ],
    ],

    [
        'id'       => 'orderby',
        'label'    => 'Orderby',
        'icon'     => 'fa-sort',
        'href'     => '#',
        'children' => [
            ['label' => 'ASC',  'href' => '#', 'onclick' => "setOrderDir('ASC');return false;"],
            ['label' => 'DESC', 'href' => '#', 'onclick' => "setOrderDir('DESC');return false;"],
        ],
    ],

    [
        'id'       => 'sortby',
        'label'    => 'SortBy',
        'icon'     => 'fa-sort-alpha-down',
        'href'     => '#',
        'children' => [
            ['label' => 'fidId',      'href' => 'table.php?o=fidId'],
            ['label' => 'fidTot',     'href' => 'table.php?o=fidTot'],
            ['label' => 'fidPer',     'href' => 'table.php?o=fidPer'],
            ['label' => 'fidIndiv',   'href' => 'table.php?o=fidIndiv'],
            ['label' => 'fidProMan',  'href' => 'table.php?o=fidProMan'],
            ['label' => 'fidSep',     'href' => 'table.php?o=fidSep'],
            ['label' => 'fidCurDate', 'href' => 'table.php?o=fidCurDate'],
        ],
    ],

    [
        'id'       => 'settings',
        'label'    => 'Settings',
        'icon'     => 'fa-sliders-h',
        'href'     => '#',
        'children' => [
            ['label' => 'Settings',     'href' => 'https://fid.intellihometech.com/settings.php'],
            ['label' => 'Settings Alt', 'href' => 'https://fid.intellihometech.com/settings/index.html'],
            ['divider' => true],
            ['label' => 'Refresh',      'href' => 'https://fid.intellihometech.com/table.php?o=fidId&sp=default'],
        ],
    ],

    [
        'id'       => 'help',
        'label'    => 'Help',
        'icon'     => 'fa-question-circle',
        'href'     => '#',
        'children' => [
            ['label' => 'Main Help',   'href' => 'https://fid.intelliHomeTech.com/fidHelp.php'],
            ['label' => 'Update Help', 'href' => 'https://fid.intelliHomeTech.com/helpUpdate.php'],
            ['label' => 'Help Info',   'href' => 'help.html'],
            ['label' => 'New Help',    'href' => 'https://fid.intelliHomeTech.com/help/index.html'],
        ],
    ],
];

// Top 5 leaf items for mobile bottom bar
$bottomNavItems = array_slice(
    array_values(array_filter($menuItems, fn($i) => empty($i['children']) && empty($i['mega']))),
    0, 5
);

// ── Helpers ──────────────────────────────────────────────────────────────────

function sidebarLink(array $item, string $classes = ''): string {
    $href    = htmlspecialchars($item['href'] ?? '#');
    $onclick = isset($item['onclick']) ? ' onclick="' . htmlspecialchars($item['onclick']) . '"' : '';
    return "<a class=\"{$classes}\" href=\"{$href}\"{$onclick}>";
}
?>

<!-- ============================================================
     SIDEBAR CSS + LAYOUT
     Add this block to your <head>, or move it to your main stylesheet.
     ============================================================ -->
<style>
  /* ── Layout shell ── */
  #sidebarWrapper {
      display: flex;
      min-height: 100vh;
  }

  /* ── Sidebar ── */
  #sidebar {
      width: 240px;
      min-width: 240px;
      background: #1e2a3a;
      color: #c8d3e0;
      display: flex;
      flex-direction: column;
      position: fixed;
      top: 0;
      left: 0;
      height: 100vh;
      overflow-y: auto;
      z-index: 1040;
      transition: transform 0.25s ease, width 0.25s ease;
  }

  /* Collapsed state — icon-only on desktop */
  #sidebar.collapsed {
      width: 56px;
      min-width: 56px;
  }
  #sidebar.collapsed .sidebar-label,
  #sidebar.collapsed .sidebar-brand-text,
  #sidebar.collapsed .sidebar-section-label,
  #sidebar.collapsed .sub-menu {
      display: none !important;
  }
  #sidebar.collapsed .sidebar-item > a {
      justify-content: center;
      padding: 10px 0;
  }

  /* ── Brand header ── */
  .sidebar-brand {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 18px 16px 14px;
      color: #fff;
      font-size: 16px;
      font-weight: 700;
      border-bottom: 1px solid rgba(255,255,255,0.08);
      text-decoration: none;
      white-space: nowrap;
  }
  .sidebar-brand:hover { color: #7eb8f7; text-decoration: none; }
  .sidebar-brand i { font-size: 18px; flex-shrink: 0; }

  /* ── Toggle button (collapses sidebar on desktop) ── */
  #sidebarToggle {
      background: none;
      border: none;
      color: #c8d3e0;
      font-size: 18px;
      cursor: pointer;
      padding: 10px 16px;
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  #sidebarToggle:hover { color: #fff; background: rgba(255,255,255,0.05); }

  /* ── Nav items ── */
  .sidebar-nav { list-style: none; padding: 8px 0; margin: 0; flex: 1; }

  .sidebar-item { position: relative; }

  .sidebar-item > a,
  .sidebar-item > button.sidebar-toggle-btn {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px 16px;
      color: #c8d3e0;
      text-decoration: none;
      font-size: 14px;
      width: 100%;
      background: none;
      border: none;
      cursor: pointer;
      white-space: nowrap;
      text-align: left;
  }
  .sidebar-item > a:hover,
  .sidebar-item > button.sidebar-toggle-btn:hover {
      background: rgba(255,255,255,0.07);
      color: #fff;
  }
  .sidebar-item > a.active,
  .sidebar-item > button.sidebar-toggle-btn.active {
      background: rgba(126,184,247,0.15);
      color: #7eb8f7;
      border-left: 3px solid #7eb8f7;
  }
  .sidebar-item i.item-icon { font-size: 15px; flex-shrink: 0; width: 18px; text-align: center; }
  .sidebar-label { flex: 1; }
  .sidebar-chevron { font-size: 11px; margin-left: auto; transition: transform 0.2s; }
  .sidebar-item.open > button .sidebar-chevron { transform: rotate(90deg); }

  /* ── Sub-menus ── */
  .sub-menu {
      list-style: none;
      padding: 0;
      margin: 0;
      background: rgba(0,0,0,0.2);
      display: none;
  }
  .sidebar-item.open > .sub-menu { display: block; }

  .sub-menu li a {
      display: block;
      padding: 7px 16px 7px 44px;
      color: #a0aec0;
      font-size: 13px;
      text-decoration: none;
      white-space: nowrap;
  }
  .sub-menu li a:hover { color: #fff; background: rgba(255,255,255,0.05); }
  .sub-menu .sub-divider { border-top: 1px solid rgba(255,255,255,0.07); margin: 4px 0; }

  /* ── Section labels (for mega groups) ── */
  .sidebar-section-label {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: #5a7a9a;
      padding: 12px 16px 4px;
      font-weight: 700;
  }

  /* ── Main content shifts right to sit beside sidebar ── */
  #mainContent {
      margin-left: 240px;
      flex: 1;
      transition: margin-left 0.25s ease;
      min-width: 0;
  }
  #sidebar.collapsed ~ #mainContent,
  body.sidebar-collapsed #mainContent {
      margin-left: 56px;
  }

  /* ── Mobile: hide sidebar, show top bar + bottom nav ── */
  @media (max-width: 991px) {
      #sidebar {
          transform: translateX(-100%);
          width: 260px !important;
      }
      #sidebar.mobile-open {
          transform: translateX(0);
          box-shadow: 4px 0 24px rgba(0,0,0,0.35);
      }
      #mainContent {
          margin-left: 0 !important;
          padding-bottom: 70px; /* room for bottom nav */
      }
      #sidebarOverlay {
          display: none;
          position: fixed;
          inset: 0;
          background: rgba(0,0,0,0.45);
          z-index: 1039;
      }
      #sidebarOverlay.show { display: block; }
  }
  @media (min-width: 992px) {
      #mobileTopBar, #bottomNavBar, #offcanvasFullNav { display: none !important; }
      #sidebarOverlay { display: none !important; }
  }

  /* ── Mobile top bar ── */
  #mobileTopBar {
      position: fixed;
      top: 0; left: 0; right: 0;
      height: 52px;
      background: #1e2a3a;
      display: flex;
      align-items: center;
      padding: 0 12px;
      gap: 12px;
      z-index: 1041;
      color: #fff;
  }
  #mobileTopBar .mobile-brand {
      font-weight: 700;
      font-size: 15px;
      flex: 1;
      color: #fff;
      text-decoration: none;
  }
  #mobileMenuBtn {
      background: none;
      border: none;
      color: #fff;
      font-size: 20px;
      cursor: pointer;
      padding: 4px 8px;
  }
  body.has-mobile-topbar { padding-top: 52px; }

  /* ── Mobile bottom nav ── */
  #bottomNavBar {
      position: fixed;
      bottom: 0; left: 0; right: 0;
      height: 60px;
      background: #fff;
      border-top: 1px solid #dde3ec;
      display: flex;
      z-index: 1040;
  }
  #bottomNavBar a,
  #bottomNavBar button {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      color: #555;
      text-decoration: none;
      background: none;
      border: none;
      cursor: pointer;
      gap: 2px;
  }
  #bottomNavBar a:hover, #bottomNavBar button:hover { color: #1e2a3a; }
  #bottomNavBar i { font-size: 18px; }
</style>

<!-- Mobile overlay (tap to close sidebar) -->
<div id="sidebarOverlay"></div>

<!-- ── Mobile top bar (< 992px only) ── -->
<div id="mobileTopBar">
    <button id="mobileMenuBtn" aria-label="Open menu">
        <i class="fa-solid fa-bars"></i>
    </button>
    <a href="table.php?o=fidCurDate" class="mobile-brand">
        <i class="fa-solid fa-chart-line me-1"></i> Fidelity Info
    </a>
</div>

<!-- ============================================================
     SIDEBAR
     ============================================================ -->
<div id="sidebar">

    <!-- Brand -->
    <a href="table.php?o=fidCurDate" class="sidebar-brand">
        <i class="fa-solid fa-chart-line"></i>
        <span class="sidebar-brand-text">Fidelity Info</span>
    </a>

    <!-- Desktop collapse toggle -->
    <button id="sidebarToggle" title="Collapse sidebar">
        <i class="fa-solid fa-angles-left"></i>
        <span class="sidebar-label">Collapse</span>
    </button>

    <!-- Nav items -->
    <ul class="sidebar-nav">
            </ul>
</div><!-- /#sidebar -->

<!-- ── Mobile bottom nav ── -->
<div id="bottomNavBar">
        <button data-bs-toggle="offcanvas" data-bs-target="#offcanvasFullNav">
        <i class="fa-solid fa-ellipsis-h"></i>
        <span>More</span>
    </button>
</div>

<!-- ── Mobile offcanvas (More) ── -->
<div class="offcanvas offcanvas-start" tabindex="-1"
     id="offcanvasFullNav" aria-labelledby="offcanvasNavLabel">
    <div class="offcanvas-header" style="background:#1e2a3a;color:#fff;">
        <h5 class="offcanvas-title" id="offcanvasNavLabel">
            <i class="fa-solid fa-bars me-2"></i>All Navigation
        </h5>
        <button type="button" class="btn-close btn-close-white"
                data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body px-0">
        <div class="list-group list-group-flush">
                    </div>
    </div>
</div>

<script>
(function () {
    // ── Desktop: collapse/expand sidebar ──────────────────────────────────────
    const sidebar       = document.getElementById('sidebar');
    const toggleBtn     = document.getElementById('sidebarToggle');
    const mainContent   = document.getElementById('mainContent');
    const toggleIcon    = toggleBtn.querySelector('i');
    const toggleLabel   = toggleBtn.querySelector('.sidebar-label');

    let collapsed = localStorage.getItem('sidebarCollapsed') === 'true';

    function applyCollapsed() {
        sidebar.classList.toggle('collapsed', collapsed);
        if (mainContent) mainContent.style.marginLeft = collapsed ? '56px' : '240px';
        toggleIcon.className = collapsed ? 'fa-solid fa-angles-right' : 'fa-solid fa-angles-left';
        if (toggleLabel) toggleLabel.textContent = collapsed ? 'Expand' : 'Collapse';
    }
    applyCollapsed();

    toggleBtn.addEventListener('click', function () {
        collapsed = !collapsed;
        localStorage.setItem('sidebarCollapsed', collapsed);
        applyCollapsed();
    });

    // ── Sidebar sub-menu accordion ───────────────────────────────────────────
    document.querySelectorAll('.sidebar-toggle-btn').forEach(function (btn) {
        btn.addEventListener('click', function () {
            const li = this.closest('.sidebar-item');
            // Close other open items
            document.querySelectorAll('.sidebar-item.open').forEach(function (el) {
                if (el !== li) el.classList.remove('open');
            });
            li.classList.toggle('open');
        });
    });

    // ── Mobile: open/close sidebar ────────────────────────────────────────────
    const overlay       = document.getElementById('sidebarOverlay');
    const mobileMenuBtn = document.getElementById('mobileMenuBtn');

    function openMobileSidebar() {
        sidebar.classList.add('mobile-open');
        overlay.classList.add('show');
        document.body.style.overflow = 'hidden';
    }
    function closeMobileSidebar() {
        sidebar.classList.remove('mobile-open');
        overlay.classList.remove('show');
        document.body.style.overflow = '';
    }

    if (mobileMenuBtn) mobileMenuBtn.addEventListener('click', openMobileSidebar);
    overlay.addEventListener('click', closeMobileSidebar);

    // Add top-padding on mobile so content clears the fixed top bar
    if (window.innerWidth < 992) {
        document.body.classList.add('has-mobile-topbar');
    }
    window.addEventListener('resize', function () {
        if (window.innerWidth < 992) {
            document.body.classList.add('has-mobile-topbar');
            closeMobileSidebar();
        } else {
            document.body.classList.remove('has-mobile-topbar');
        }
    });
})();
</script>