init
This commit is contained in:
砂糖
49
components/header/Header.tsx
Normal file
49
components/header/Header.tsx
Normal file
@@ -0,0 +1,49 @@
|
||||
import HeaderLinks from "@/components/header/HeaderLinks";
|
||||
import MobileMenu from "@/components/header/MobileMenu";
|
||||
import LocaleSwitcher from "@/components/LocaleSwitcher";
|
||||
import { siteConfig } from "@/config/site";
|
||||
import { Link as I18nLink } from "@/i18n/routing";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
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"
|
||||
>
|
||||
<img
|
||||
alt={siteConfig.name}
|
||||
src="/logo.png"
|
||||
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;
|
||||
53
components/header/HeaderLinks.tsx
Normal file
53
components/header/HeaderLinks.tsx
Normal file
@@ -0,0 +1,53 @@
|
||||
"use client";
|
||||
|
||||
import { Link as I18nLink, usePathname, useRouter } from "@/i18n/routing";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { HeaderLink } from "@/types/common";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
const HeaderLinks = () => {
|
||||
const tHeader = useTranslations("Header");
|
||||
const pathname = usePathname();
|
||||
const router = useRouter();
|
||||
|
||||
const headerLinks: HeaderLink[] = tHeader.raw("links");
|
||||
const localePrefix = `/${(pathname || "/zh").split("/")[1] || "zh"}`;
|
||||
|
||||
return (
|
||||
<div className="hidden md:flex flex-row items-center gap-x-2 text-sm font-medium text-muted-500">
|
||||
{headerLinks.map((link) => {
|
||||
|
||||
return (
|
||||
<div key={link.name} className="relative group">
|
||||
<I18nLink
|
||||
href={link.href}
|
||||
title={link.name}
|
||||
prefetch={true}
|
||||
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}
|
||||
</I18nLink>
|
||||
{
|
||||
link?.children && (
|
||||
<div className="absolute left-0 top-full hidden group-hover:block z-50 pt-2">
|
||||
<div className="w-56 rounded-md border bg-white shadow-md overflow-hidden">
|
||||
{link.children.map((child) => (
|
||||
<I18nLink key={child.name} prefetch={false} href={child.href} className="block px-4 py-2 hover:bg-red-600 hover:text-white">
|
||||
{child.name}
|
||||
</I18nLink>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default HeaderLinks;
|
||||
74
components/header/MobileMenu.tsx
Normal file
74
components/header/MobileMenu.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
41
components/header/SectionDropdown.tsx
Normal file
41
components/header/SectionDropdown.tsx
Normal file
@@ -0,0 +1,41 @@
|
||||
"use client";
|
||||
|
||||
import { useSectionStore } from "@/stores/sectionStore";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuGroup,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
|
||||
export default function SectionDropdown() {
|
||||
const { sections } = useSectionStore();
|
||||
if (!sections || sections.length === 0) return null;
|
||||
|
||||
return (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger className="px-3 py-2 rounded-md text-sm hover:bg-accent hover:text-accent-foreground">
|
||||
页面目录
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className="w-56">
|
||||
<DropdownMenuGroup>
|
||||
{sections.map((s) => (
|
||||
<DropdownMenuItem key={s.id}
|
||||
onClick={() => {
|
||||
const el = document.getElementById(s.id);
|
||||
if (!el) return;
|
||||
const rect = el.getBoundingClientRect();
|
||||
const top = rect.top + window.scrollY - 80;
|
||||
window.scrollTo({ top, behavior: "smooth" });
|
||||
history.replaceState(null, "", `#${s.id}`);
|
||||
}}
|
||||
>
|
||||
{s.name}
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</DropdownMenuGroup>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user