developer-roadmap/src/components/AccountSidebar.astro

---
import AstroIcon from './AstroIcon.astro';
import { TeamDropdown } from './TeamDropdown/TeamDropdown';
import { SidebarFriendsCounter } from './Friends/SidebarFriendsCounter';
import { Map } from 'lucide-react';

export interface Props {
  activePageId: string;
  activePageTitle: string;
  hasDesktopSidebar?: boolean;
}

const { hasDesktopSidebar = true, activePageId, activePageTitle } = Astro.props;

const sidebarLinks = [
  {
    href: '/account',
    title: 'Activity',
    id: 'activity',
    isNew: false,
    icon: {
      glyph: 'analytics',
      classes: 'h-3 w-4',
    },
  },
  {
    href: '/account/friends',
    title: 'Friends',
    id: 'friends',
    isNew: false,
    icon: {
      glyph: 'users',
      classes: 'h-4 w-4',
    },
  },
  {
    href: '/account/roadmaps',
    title: 'Roadmaps',
    id: 'roadmaps',
    isNew: true,
    icon: {
      glyph: 'users',
      classes: 'h-4 w-4',
      component: Map,
    },
  },
  {
    href: '/account/road-card',
    title: 'Card',
    id: 'road-card',
    isNew: false,
    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/settings',
    title: 'Settings',
    id: 'settings',
    isNew: false,
    icon: {
      glyph: 'cog',
      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'
  >
    <li>
      <a
        href='/team'
        class={`flex w-full items-center rounded px-3 py-1.5 text-sm text-slate-900 hover:bg-slate-200 ${
          activePageId === 'team' ? 'bg-slate-100' : ''
        }`}
      >
        <AstroIcon icon={'users'} class={`h-4 w-4 mr-2`} />
         Teams
      </a>
    </li>
    {
      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' : ''
              }`}
            >
              {sidebarLink.icon.component ? (
                <sidebarLink.icon.component
                  className={`${sidebarLink.icon.classes} mr-2`}
                />
              ) : (
                <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 -->
  {
    hasDesktopSidebar && (
      <aside class='hidden w-[195px] shrink-0 border-r border-slate-200 py-10 md:block'>
        <TeamDropdown client:load />

        <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'>
                      {sidebarLink.icon.component ? (
                        <sidebarLink.icon.component
                          className={`${sidebarLink.icon.classes} mr-2`}
                        />
                      ) : (
                        <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>
                    )}

                    {sidebarLink.id === 'friends' && (
                      <SidebarFriendsCounter client:load />
                    )}
                  </a>
                </li>
              );
            })}
          </ul>
        </nav>
      </aside>
    )
  }
  <!-- /End Desktop Sidebar -->

  <div
    class:list={[
      'grow px-0 py-0 md:py-10',
      { 'md:px-10': hasDesktopSidebar, 'md:px-5': !hasDesktopSidebar },
    ]}
  >
    <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>