init

components/header/Header.tsx

@@ -0,0 +1,51 @@
+import HeaderLinks from "@/components/header/HeaderLinks";
+import MobileMenu from "@/components/header/MobileMenu";
+import LocaleSwitcher from "@/components/LocaleSwitcher";
+import { ThemeToggle } from "@/components/ThemeToggle";
+import { siteConfig } from "@/config/site";
+import { Link as I18nLink } from "@/i18n/routing";
+import { useTranslations } from "next-intl";
+import Image from "next/image";
+
+const Header = () => {
+  const t = useTranslations("Home");
+
+  return (
+    <header className="py-2 px-6 backdrop-blur-md sticky top-0 z-50">
+      <nav className="flex justify-between items-center w-full mx-auto">
+        <div className="flex items-center space-x-6 md:space-x-12">
+          <I18nLink
+            href="/"
+            prefetch={false}
+            className="flex items-center space-x-1 font-bold"
+          >
+            <Image
+              alt={siteConfig.name}
+              src="/logo.svg"
+              className="w-6 h-6"
+              width={32}
+              height={32}
+            />
+            <span className="text-gray-800 dark:text-gray-200">
+              {t("title")}
+            </span>
+          </I18nLink>
+          <HeaderLinks />
+        </div>
+
+        <div className="flex items-center gap-x-2 md:gap-x-4 lg:gap-x-6 flex-1 justify-end">
+          {/* PC */}
+          <div className="hidden md:flex items-center gap-x-4">
+            <LocaleSwitcher />
+            <ThemeToggle />
+          </div>
+
+          {/* Mobile */}
+          <MobileMenu />
+        </div>
+      </nav>
+    </header>
+  );
+};
+
+export default Header;

components/header/HeaderLinks.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { Link as I18nLink, usePathname } from "@/i18n/routing";
+import { cn } from "@/lib/utils";
+import { HeaderLink } from "@/types/common";
+import { ExternalLink } from "lucide-react";
+import { useTranslations } from "next-intl";
+
+const HeaderLinks = () => {
+  const tHeader = useTranslations("Header");
+  const pathname = usePathname();
+
+  const headerLinks: HeaderLink[] = tHeader.raw("links");
+
+  return (
+    <div className="hidden md:flex flex-row items-center gap-x-2 text-sm font-medium text-muted-500">
+      {headerLinks.map((link) => (
+        <I18nLink
+          key={link.name}
+          href={link.href}
+          title={link.name}
+          prefetch={link.target && link.target === "_blank" ? false : true}
+          target={link.target || "_self"}
+          rel={link.rel || undefined}
+          className={cn(
+            "rounded-xl px-4 py-2 flex items-center gap-x-1 hover:bg-accent-foreground/10 hover:text-accent-foreground",
+            pathname === link.href && "font-semibold text-accent-foreground"
+          )}
+        >
+          {link.name}
+          {link.target && link.target === "_blank" && (
+            <span className="text-xs">
+              <ExternalLink className="w-4 h-4" />
+            </span>
+          )}
+        </I18nLink>
+      ))}
+    </div>
+  );
+};
+
+export default HeaderLinks;

components/header/MobileMenu.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import LocaleSwitcher from "@/components/LocaleSwitcher";
+import { ThemeToggle } from "@/components/ThemeToggle";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Link as I18nLink } from "@/i18n/routing";
+import { HeaderLink } from "@/types/common";
+import { Menu } from "lucide-react";
+import { useTranslations } from "next-intl";
+import Image from "next/image";
+
+export default function MobileMenu() {
+  const t = useTranslations("Home");
+  const tHeader = useTranslations("Header");
+
+  const headerLinks: HeaderLink[] = tHeader.raw("links");
+
+  return (
+    <div className="flex items-center gap-1 md:hidden">
+      <LocaleSwitcher />
+      <ThemeToggle />
+      <DropdownMenu>
+        <DropdownMenuTrigger className="p-2">
+          <Menu className="h-5 w-5" />
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-64">
+          <DropdownMenuLabel>
+            <I18nLink
+              href="/"
+              title={t("title")}
+              prefetch={true}
+              className="flex items-center space-x-1 font-bold"
+            >
+              <Image
+                alt={t("title")}
+                src="/logo.svg"
+                className="w-6 h-6"
+                width={32}
+                height={32}
+              />
+              <span className="highlight-text">{t("title")}</span>
+            </I18nLink>
+          </DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup>
+            {headerLinks.map((link) => (
+              <DropdownMenuItem key={link.name}>
+                <I18nLink
+                  href={link.href}
+                  title={link.name}
+                  prefetch={
+                    link.target && link.target === "_blank" ? false : true
+                  }
+                  target={link.target || "_self"}
+                  rel={link.rel || undefined}
+                >
+                  {link.name}
+                </I18nLink>
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}