developer-roadmap/src/components/AccountSidebar.astro

---
import AstroIcon from './AstroIcon.astro';

const { activePageId, activePageTitle } = Astro.props;

export interface Props {
  activePageId: string;
  activePageTitle: string;
}

const sidebarLinks = [
    {
        href: '/account',
        title: 'Activity',
        id: 'activity',
        icon: {
            glyph: 'analytics',
            classes: 'h-3 w-4',
        }
    },
    {
        href: '/account/update-profile',
        title: 'Profile',
        id: 'profile',
        icon: {
            glyph: 'user',
            classes: 'h-4 w-4',
        }
    },
    { 
        href: '/account/update-password',
        title: 'Security',
        id: 'change-password',
        icon: {
            glyph: 'security',
            classes: 'h-4 w-4'
        }
    },
];
---

<div class='relative mb-5 block border-b p-4 shadow-inner md:hidden'>
  <button
    class='flex h-10 w-full items-center justify-between rounded-md border bg-white px-2 text-center font-medium text-gray-900'
    id='settings-menu'
  >
    {activePageTitle}
    <AstroIcon icon='dropdown' />
  </button>
  <ul
    id='settings-menu-dropdown'
    class='absolute left-0 right-0 z-10 mt-1 hidden space-y-1.5 bg-white p-2 shadow-lg'
  >
    {
      sidebarLinks.map((sidebarLink) => (
        <li>
          <a
            href={sidebarLink.href}
            class={`block w-full rounded px-2 py-1.5 font-medium text-slate-900 hover:bg-slate-200 ${
              activePageId === sidebarLink.id ? 'bg-slate-100' : ''
            }`}
          >
            {sidebarLink.title}
          </a>
        </li>
      ))
    }
  </ul>
</div>

<div class='container flex min-h-screen items-stretch'>
  <!-- Start Desktop Sidebar -->
  <aside class='hidden shrink-0 w-44 border-r border-slate-200 py-10 md:block'>
    <nav>
      <ul class='space-y-1'>
        {
          sidebarLinks.map((sidebarLink) => (
            <li>
              <a
                href={sidebarLink.href}
                class={`font-regular flex w-full items-center gap-2 px-2 py-1.5 text-sm border-r-2 border-r-transparent ${
                  activePageId === sidebarLink.id ? 'text-black border-r-black bg-gray-100' : 'text-gray-500 hover:border-r-gray-300'
                }`}
              >
              <AstroIcon icon={sidebarLink.icon.glyph} class={`${sidebarLink.icon.classes} mr-0`} />
                {sidebarLink.title}
              </a>
            </li>
          ))
        }
      </ul>
    </nav>
  </aside>
  <!-- /End Desktop Sidebar -->

  <div class='grow px-0 py-0 md:px-10 md:py-10'>
    <slot />
  </div>
</div>

<script>
  const menuButton = document.getElementById('settings-menu');
  const menuDropdown = document.getElementById('settings-menu-dropdown');

  menuButton?.addEventListener('click', () => {
    menuDropdown?.classList.toggle('hidden');
  });

  document.addEventListener('click', (e) => {
    if (!menuButton?.contains(e.target as Node)) {
      menuDropdown?.classList.add('hidden');
    }
  });
</script>