<aside class="sidebar">
  <button type="button" class="sidebar-close-btn" style="padding-inline:0px !important;">
    <iconify-icon icon="radix-icons:cross-2"></iconify-icon>
  </button>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      document.title = '<%= title %>' || 'Default Title';

      (function setFavicon() {
        const link = document.querySelector("link[rel~='icon']") || document.createElement('link');
        link.rel = 'icon';
        link.href = '<%= favicon %>'; // or your actual favicon path
        document.head.appendChild(link);
      })();
    });
  </script>
<script>
document.addEventListener("DOMContentLoaded", () => {
  let logo = "<%= CATEGORY_BASE_URL %><%= header_logo %>";

  try {
    const user = JSON.parse(localStorage.getItem("user"));
    logo = "<%= CATEGORY_BASE_URL %><%= header_logo %>" || user?.hlogo?.replace(/^['"]|['"]$/g, '');
  } catch (e) {
    console.error("Invalid user data in localStorage", e);
  }

  const logoElement = document.querySelector(".light-logo");

  if (logoElement) {
    // Set initial logo
    logoElement.src = logo;

    // Fallback to public/logo.png if logo fails to load
    logoElement.onerror = () => {
      logoElement.src = '/logo.png';  // path to public/logo.png
    };
  }
});
</script>


  <div class="">
    <a href="/" class="sidebar-logo">
      <img src="/default-logo.png" alt="site logo" class="light-logo no-popup">
    </a>
  </div>

<div class="sidebar-menu-area">
  <ul class="sidebar-menu" id="sidebar-menu">
    <%
      function generateMenu(menuData) {
        let html = '';
        for (const [key, item] of Object.entries(menuData || {})) {
          const hasChildren = item.multiple && Object.keys(item.multiple).length > 0;
          html += `<li class="${hasChildren ? 'dropdown' : ''}">`;

          html += `<a href="${hasChildren ? 'javascript:void(0)' : '/' + item.url}">`;

          if (item.icon && item.icon.includes(':')) {
            html += `<iconify-icon icon="${item.icon}" class="menu-icon"></iconify-icon>`;
          } else {
            const fallbackIcon = item.icon || 'mdi mdi-menu';
            html += `<i class="${fallbackIcon} text-xl me-2"></i>`;
          }

          html += `<span>${item.title}</span></a>`;

          if (hasChildren) {
            html += `<ul class="sidebar-submenu">`;
            html += generateMenu(item.multiple);
            html += `</ul>`;
          }

          html += `</li>`;
        }
        return html;
      }
    %>
    <%- generateMenu(menuFilter) %>
  </ul>
</div>





</aside>
<script>
document.addEventListener("DOMContentLoaded", () => {
  const scrollContainer = document.querySelector(".sidebar-menu-area");
  const SCROLL_STORAGE_KEY = "sidebarScrollTop";

  // Save scroll only before navigating away
  function saveScrollBeforeUnload() {
    if (scrollContainer) {
      localStorage.setItem(SCROLL_STORAGE_KEY, scrollContainer.scrollTop);
    }
  }

  window.addEventListener("beforeunload", saveScrollBeforeUnload);

  // Restore scroll after menu is fully rendered
  function restoreScrollPosition() {
    const savedScroll = localStorage.getItem(SCROLL_STORAGE_KEY);
    if (!savedScroll || !scrollContainer) return;

    // Animate until scroll sticks
    let attempts = 0;
    const maxAttempts = 20;
    const tryRestore = () => {
      scrollContainer.scrollTop = parseInt(savedScroll, 10);

      attempts++;
      if (scrollContainer.scrollTop != parseInt(savedScroll, 10) && attempts < maxAttempts) {
        requestAnimationFrame(tryRestore);
      }
    };
    tryRestore();
  }

  // Wait for menu to render
  function waitForMenuRender(maxAttempts = 50, attempt = 0) {
    const menu = document.getElementById("sidebar-menu");
    if (menu && menu.offsetHeight > 0) {
      restoreScrollPosition();
    } else if (attempt < maxAttempts) {
      requestAnimationFrame(() => waitForMenuRender(maxAttempts, attempt + 1));
    }
  }

  waitForMenuRender();
});
</script>


