Epicnabbo-Catalogus-Updated-Daily/src/components/navigation.tsx

import { getTranslations } from "next-intl/server";
import Link from "next/link";
import { auth } from "@/lib/auth";
import { LanguageSwitcher } from "@/components/language-switcher";
import { MobileNav } from "@/components/mobile-nav";
import { NavbarColorPicker } from "@/components/navbar-color-picker";
import { ThemeSwitcher } from "@/components/theme-switcher";

export async function Navigation() {
  const session = await auth();
  const t = await getTranslations("nav");
  const isStaff = (session?.user?.rank ?? 0) >= 7;

  return (
    <nav className="sticky top-0 z-40 shadow-sm" style={{ backgroundColor: "var(--color-navbar)" }}>
      <div className="relative mx-auto flex min-h-[56px] max-w-7xl items-center px-4 md:px-6 gap-x-1">
        <div className="absolute bottom-0 left-0 right-0 h-[3px]" style={{ backgroundColor: "var(--color-primary, #eeb425)" }} />
      
        <div className="flex items-center gap-x-1 md:gap-x-1 flex-1 md:flex-none">
          <Link href="/" className="nav-item shrink-0">
            <img src="/assets/images/icons/navigation/me.png" alt="" className="w-5 h-5 mr-1.5" />
            <span className="hidden sm:inline">{t("home")}</span>
            <span className="sm:hidden">{t("home")}</span>
          </Link>
        </div>

        <MobileNav>
          <Link href="/" className="nav-item md:hidden">
            <img src="/assets/images/icons/navigation/me.png" alt="" className="w-5 h-5 mr-1.5" />
            {t("home")}
          </Link>

          <details className="relative group md:flex">
            <summary className="nav-item list-none cursor-pointer [&::-webkit-details-marker]:hidden">
              <img src="/assets/images/icons/navigation/community.png" alt="" className="w-5 h-5 mr-1.5" />
              {t("community")}
              <svg className="ml-auto md:ml-1 w-3 h-3 transition-transform duration-200 group-open:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" /></svg>
            </summary>
              <div
                className="md:absolute static left-0 mt-1.5 md:min-w-[200px] rounded-xl md:shadow-xl z-50 py-2 border backdrop-blur-md md:ml-0 ml-4"
                style={{ backgroundColor: "color-mix(in srgb, var(--color-dropdown) 80%, transparent)", borderColor: "color-mix(in srgb, var(--color-text-muted) 10%, transparent)" }}
              >
                <Link href="/news" className="dropdown-item">{t("articles")}</Link>
                <Link href="/photos" className="dropdown-item">{t("photos")}</Link>
                <Link href="/staff" className="dropdown-item">{t("staff")}</Link>
                <Link href="/rankings" className="dropdown-item">{t("rankings")}</Link>
                <Link href="/guilds" className="dropdown-item">{t("guilds")}</Link>
              </div>
          </details>

          <details className="relative group md:flex">
            <summary className="nav-item list-none cursor-pointer [&::-webkit-details-marker]:hidden">
              <img src="/assets/images/icons/navigation/shop.png" alt="" className="w-5 h-5 mr-1.5" />
              {t("shop")}
              <svg className="ml-auto md:ml-1 w-3 h-3 transition-transform duration-200 group-open:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" /></svg>
            </summary>
            <div
              className="md:absolute left-0 mt-1.5 min-w-[200px] rounded-xl shadow-xl z-50 py-2 border backdrop-blur-md"
              style={{ backgroundColor: "color-mix(in srgb, var(--color-dropdown) 80%, transparent)", borderColor: "color-mix(in srgb, var(--color-text-muted) 10%, transparent)" }}
            >
              <Link href="/shop" className="dropdown-item">{t("shop")}</Link>
              <Link href="/marketplace" className="dropdown-item">{t("market")}</Link>
              <Link href="/rares" className="dropdown-item">{t("rareValues")}</Link>
            </div>
          </details>

          <Link href="/leaderboard" className="nav-item">
            <img src="/assets/images/icons/navigation/leaderboards.png" alt="" className="w-5 h-5 mr-1.5" />
            {t("leaderboards")}
          </Link>

          <Link href="/radio" className="nav-item">
            <img src="/assets/images/icons/navigation/bb.png" alt="" className="w-5 h-5 mr-1.5" />
            {t("radio")}
          </Link>

          <details className="relative group md:flex">
            <summary className="nav-item list-none cursor-pointer [&::-webkit-details-marker]:hidden">
              <img src="/assets/images/icons/navigation/rules.gif" alt="" className="w-5 h-5 mr-1.5" />
              {t("assistance")}
              <svg className="ml-auto md:ml-1 w-3 h-3 transition-transform duration-200 group-open:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" /></svg>
            </summary>
            <div
              className="md:absolute left-0 mt-1.5 min-w-[200px] rounded-xl shadow-xl z-50 py-2 border backdrop-blur-md"
              style={{ backgroundColor: "color-mix(in srgb, var(--color-dropdown) 80%, transparent)", borderColor: "color-mix(in srgb, var(--color-text-muted) 10%, transparent)" }}
            >
              <Link href="/help" className="dropdown-item">{t("helpCenter")}</Link>
              {session?.user ? (
                <Link href="/help/tickets" className="dropdown-item">{t("myTickets")}</Link>
              ) : null}
              <Link href="/badges" className="dropdown-item">{t("badges")}</Link>
              <Link href="/draw-badge" className="dropdown-item">{t("drawBadge")}</Link>
            </div>
          </details>

          {session?.user ? (
            <>
              <Link href="/friends" className="nav-item">
                <img src="/assets/images/icons/navigation/goody.png" alt="" className="w-5 h-5 mr-1.5" />
                {t("friends")}
              </Link>
              <Link href="/messages" className="nav-item">
                <img src="/assets/images/icons/navigation/bb.png" alt="" className="w-5 h-5 mr-1.5" />
                {t("messages")}
              </Link>
            </>
          ) : null}

          {isStaff ? (
            <Link href="/admin" className="nav-item">
              <img src="/assets/images/icons/navigation/home.png" alt="" className="w-5 h-5 mr-1.5" />
              {t("admin")}
            </Link>
          ) : null}

          <div className="flex items-center gap-x-1 pt-2 mt-2 border-t md:hidden" style={{ borderColor: "color-mix(in srgb, var(--color-text-muted) 10%, transparent)" }}>
            <LanguageSwitcher />
            <NavbarColorPicker />
            <ThemeSwitcher />
          </div>
        </MobileNav>

        <div className="ml-auto flex items-center gap-x-1 hidden md:flex">
          <LanguageSwitcher />
          <NavbarColorPicker />
          <ThemeSwitcher />
        </div>
      </div>
    </nav>
  );
}