365devnet/src/components/widgets/Header.astro

---
// header.astro
import { Icon } from 'astro-icon/components';
import Logo from '~/components/Logo.astro';
import ToggleTheme from '~/components/common/ToggleTheme.astro';
import ToggleMenu from '~/components/common/ToggleMenu.astro';
import LanguageDropdown from '~/components/LanguageDropdown.astro';

import { getHomePermalink } from '~/utils/permalinks';
import { trimSlash } from '~/utils/permalinks';
import { getHeaderData } from '~/navigation';

interface Link {
  text?: string;
  href?: string;
  ariaLabel?: string;
  icon?: string;
}

interface MenuLink extends Link {
  links?: Array<MenuLink>;
  isHashLink?: boolean;
}

export interface Props {
  id?: string;
  links?: Array<MenuLink>;
  isSticky?: boolean;
  isDark?: boolean;
  isFullWidth?: boolean;
  showToggleTheme?: boolean;
  showRssFeed?: boolean;
  position?: string;
}

import { supportedLanguages } from '~/i18n/translations';

// Get current language from URL
const currentPath = `/${trimSlash(new URL(Astro.url).pathname)}`;
const pathSegments = currentPath.split('/').filter(Boolean);

// Define the type for supported languages
type SupportedLanguage = (typeof supportedLanguages)[number];

// Check for language in URL path
let currentLang =
  pathSegments[0] && supportedLanguages.includes(pathSegments[0] as SupportedLanguage)
    ? (pathSegments[0] as SupportedLanguage)
    : null;

// If no language in URL, check cookies
if (!currentLang) {
  const cookies = Astro.request.headers.get('cookie') || '';
  const cookieLanguage = cookies
    .split(';')
    .map((cookie) => cookie.trim())
    .find((cookie) => cookie.startsWith('preferredLanguage='))
    ?.split('=')[1];

  if (cookieLanguage && supportedLanguages.includes(cookieLanguage as SupportedLanguage)) {
    currentLang = cookieLanguage as SupportedLanguage;
  } else {
    // Default to English if no language is found
    currentLang = 'en';
  }
}

// Get translated header data - ensure we're using the current language
const headerData = getHeaderData(currentLang);

const {
  id = 'header',
  links = headerData.links,
  isSticky = false,
  isDark = false,
  isFullWidth = false,
  showToggleTheme = false,

  position = 'center',
} = Astro.props;
---

<header
  class:list={[
    { sticky: isSticky, relative: !isSticky, dark: isDark },
    'top-0 z-40 flex-none mx-auto w-full border-b border-gray-50/0 transition-[opacity] ease-in-out',
  ]}
  {...isSticky ? { 'data-aw-sticky-header': true } : {}}
  {...id ? { id } : {}}
>
  <div class="absolute inset-0"></div>
  <div
    class:list={[
      'relative text-default py-3 px-3 md:px-6 mx-auto w-full',
      {
        'md:flex md:justify-between': position !== 'center',
      },
      {
        'md:grid md:grid-cols-3 md:items-center': position === 'center',
      },
      {
        'max-w-7xl': !isFullWidth,
      },
    ]}
  >
    <div class:list={[{ 'mr-auto rtl:mr-0 rtl:ml-auto': position === 'right' }, 'flex justify-between']}>
      <a class="flex items-center" href={getHomePermalink()}>
        <Logo />
      </a>
      <div class="flex items-center md:hidden">
        <ToggleMenu />
      </div>
      <!-- Improved mobile navigation accessibility -->
      <style>
        @media (max-width: 767px) {
          nav ul li a,
          nav ul li button {
            padding: 0.75rem 1rem; /* Larger touch targets */
            min-height: 44px; /* Minimum touch target size */
            display: flex;
            align-items: center;
          }
        }
      </style>
    </div>
    <nav
      class="items-center w-full md:w-auto hidden md:flex md:mx-5 text-default overflow-y-auto overflow-x-hidden md:overflow-y-visible md:overflow-x-auto md:justify-self-center"
      aria-label="Main navigation"
    >
      <ul
        class="flex flex-col md:flex-row md:self-center w-full md:w-auto text-base md:text-lg tracking-[0.01rem] font-medium md:justify-center"
      >
        {
          links.map(({ text, href, links }) => (
            <li class={links?.length ? 'dropdown' : ''}>
              {links?.length ? (
                <>
                  <button
                    type="button"
                    class="hover:text-link dark:hover:text-white px-4 py-3 flex items-center whitespace-nowrap"
                  >
                    {text}{' '}
                    <Icon name="tabler:chevron-down" class="w-3.5 h-3.5 ml-0.5 rtl:ml-0 rtl:mr-0.5 hidden md:inline" />
                  </button>
                  <ul class="dropdown-menu md:backdrop-blur-md dark:md:bg-dark rounded md:absolute pl-4 md:pl-0 md:hidden font-medium md:bg-white/90 md:min-w-[200px] drop-shadow-xl">
                    {links.map(({ text: text2, href: href2, isHashLink }) => (
                      <li>
                        <a
                          class:list={[
                            'first:rounded-t last:rounded-b md:hover:bg-gray-100 hover:text-link dark:hover:text-white dark:hover:bg-gray-700 py-2 px-5 block whitespace-no-wrap',
                            { 'aw-link-active': href2 === currentPath },
                          ]}
                          href={href2}
                          data-hash-link={isHashLink ? 'true' : undefined}
                        >
                          {text2}
                        </a>
                      </li>
                    ))}
                  </ul>
                </>
              ) : (
                <a
                  class:list={[
                    'hover:text-link dark:hover:text-white px-4 py-3 flex items-center whitespace-nowrap',
                    { 'aw-link-active': href === currentPath },
                  ]}
                  href={href}
                  data-hash-link={href?.includes('#') ? 'true' : undefined}
                >
                  {text}
                </a>
              )}
            </li>
          ))
        }
      </ul>
    </nav>
    <div
      class:list={[
        { 'ml-auto rtl:ml-0 rtl:mr-auto': position === 'left' },
        'hidden md:self-center md:flex items-center md:mb-0 fixed w-full md:w-auto md:static justify-end left-0 rtl:left-auto rtl:right-0 bottom-0 p-3 md:p-0 md:justify-self-end',
      ]}
    >
      <div class="items-center flex justify-between w-full md:w-auto">
        <div class="flex items-center space-x-4">
          {showToggleTheme && <ToggleTheme iconClass="w-6 h-6 md:w-5 md:h-5 md:inline-block" />}
          <!-- Language Selector as Select Element -->
          <LanguageDropdown currentLang={currentPath.split('/')[1] || 'en'} />
        </div>
      </div>
    </div>
  </div>
</header>