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',
    isNew: false,
    icon: {
      glyph: 'analytics',
      classes: 'h-3 w-4',
    },
  },
  {
    href: '/account/road-card',
    title: 'Card',
    id: 'road-card',
    isNew: true,
    icon: {
      glyph: 'badge',
      classes: 'h-4 w-4',
    },
  },
  {
    href: '/account/update-profile',
    title: 'Profile',
    id: 'profile',
    isNew: false,
    icon: {
      glyph: 'user',
      classes: 'h-4 w-4',
    },
  },
  {
    href: '/account/update-password',
    title: 'Security',
    id: 'change-password',
    isNew: false,
    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 text-sm 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) => {
        const isActive = activePageId === sidebarLink.id;

        return (
          <li>
            <a
              href={sidebarLink.href}
              class={`flex w-full items-center rounded px-3 py-1.5 text-sm text-slate-900 hover:bg-slate-200 ${
                isActive ? 'bg-slate-100' : ''
              }`}
            >
              <AstroIcon
                icon={sidebarLink.icon.glyph}
                class={`${sidebarLink.icon.classes} mr-2`}
              />
              {sidebarLink.title}
            </a>
          </li>
        );
      })
    }
  </ul>
</div>

<div class='container flex min-h-screen items-stretch'>
  <!-- Start Desktop Sidebar -->
  <aside class='hidden w-44 shrink-0 border-r border-slate-200 py-10 md:block'>
    <nav>
      <ul class='space-y-1'>
        {
          sidebarLinks.map((sidebarLink) => {
            const isActive = activePageId === sidebarLink.id;

            return (
              <li>
                <a
                  href={sidebarLink.href}
                  class={`font-regular flex w-full items-center border-r-2 px-2 py-1.5 text-sm ${
                    isActive
                      ? 'border-r-black bg-gray-100 text-black'
                      : 'border-r-transparent text-gray-500 hover:border-r-gray-300'
                  }`}
                >
                  <span class='flex flex-grow items-center'>
                    <AstroIcon
                      icon={sidebarLink.icon.glyph}
                      class={`${sidebarLink.icon.classes} mr-2`}
                    />
                    {sidebarLink.title}
                  </span>

                  {sidebarLink.isNew && !isActive && (
                    <span class='relative mr-1 flex items-center'>
                      <span class='relative rounded-full bg-gray-200 p-1 text-xs' />
                      <span class='absolute bottom-0 left-0 right-0 top-0 animate-ping rounded-full bg-gray-400 p-1 text-xs' />
                    </span>
                  )}
                </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>