mohs/sass-mohfarawati
1
0
Fork 0
Code Issues Pull Requests Actions 8 Packages Projects Releases Wiki Activity

Refine navigation states and fix toast centering
CI / quality (push) Waiting to run
Details

Browse Source
This commit is contained in:
MOH
2026-03-10 20:44:38 +01:00
parent 2b7914fc9a
commit 3c53430b12
5 changed files with 89 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/layout/site-header.tsx
+74 -18
View File
@@ -19,12 +19,18 @@ import { cn } from "@/lib/utils";
const navItems = [
{ key: "home", path: "" },
{ key: "portfolio", path: "/portfolio" },
{ key: "products", path: "/products" },
{ key: "about", path: "/about" },
{ key: "portfolio", path: "/portfolio" },
{ key: "products", path: "/products", disabled: true },
{ key: "contact", path: "/contact" },
];
const disabledDesktopNavItemClassName =
"relative z-10 inline-flex cursor-not-allowed items-center justify-center rounded-pill px-3.5 py-2 text-sm font-medium text-foreground/55 xl:px-4";
const disabledMobileNavItemClassName =
"relative inline-flex cursor-not-allowed items-center justify-center rounded-nested px-4 py-3 text-sm font-medium text-foreground/55";
type SiteHeaderProps = {
isAdmin?: boolean;
lightLogoUrl?: string | null;
@@ -62,6 +68,7 @@ function NavLinks({
const pathname = usePathname();
const t = useTranslations("navigation");
const currentPath = stripLocalePrefix(pathname);
const isArabic = locale === "ar";
return (
<>
@@ -69,6 +76,39 @@ function NavLinks({
(() => {
const itemPath = item.path || "/";
const isActive = isNavItemActive(currentPath, itemPath);
const itemLabel = t(item.key);
const soonLabel = t("soon");
if (item.disabled) {
return (
<span
key={item.key}
aria-disabled="true"
className={cn(
mobile ? disabledMobileNavItemClassName : `${disabledDesktopNavItemClassName} group`,
isArabic ? "tracking-normal" : "",
)}
>
{mobile ? (
<span>{itemLabel}</span>
) : (
<>
<span className="transition-opacity duration-150 group-hover:opacity-0 group-focus-within:opacity-0">
{itemLabel}
</span>
<span
className={cn(
"pointer-events-none absolute inset-0 flex items-center justify-center opacity-0 transition-opacity duration-150 group-hover:opacity-100 group-focus-within:opacity-100",
isArabic ? "tracking-normal" : "tracking-[0.08em]",
)}
>
{soonLabel}
</span>
</>
)}
</span>
);
}
return (
<Link
@@ -86,7 +126,7 @@ function NavLinks({
{isActive ? (
<span className="absolute inset-0 -z-10 rounded-pill bg-primary shadow-xs" />
) : null}
{t(item.key)}
{itemLabel}
</Link>
);
})()
@@ -348,6 +388,8 @@ export function SiteHeader({
{navItems.map((item) => {
const itemPath = item.path || "/";
const isActive = isNavItemActive(stripLocalePrefix(pathname), itemPath);
const itemLabel = t(item.key);
const isArabic = locale === "ar";
return (
<motion.div
@@ -358,21 +400,35 @@ export function SiteHeader({
}}
transition={{ duration: 0.18, ease: "easeOut" }}
>
<Link
href={getLocalizedPath(locale, itemPath)}
className={cn(
"flex items-center justify-between rounded-nested px-4 py-3 text-sm font-medium transition-colors",
isActive
? "bg-accent text-foreground shadow-xs"
: "text-foreground/80 hover:bg-accent/70 hover:text-foreground",
)}
onClick={() => setIsOpen(false)}
>
<span>{t(item.key)}</span>
<span className="text-xs uppercase tracking-[0.18em] opacity-60">
0{navItems.findIndex((navItem) => navItem.key === item.key) + 1}
</span>
</Link>
{item.disabled ? (
<div
aria-disabled="true"
className="flex cursor-not-allowed items-center justify-between rounded-nested px-4 py-3 text-sm font-medium text-foreground/55"
>
<div className={cn("inline-flex items-center justify-center", isArabic ? "tracking-normal" : "")}>
<span>{itemLabel}</span>
</div>
<span className="text-xs uppercase tracking-[0.18em] opacity-40">
0{navItems.findIndex((navItem) => navItem.key === item.key) + 1}
</span>
</div>
) : (
<Link
href={getLocalizedPath(locale, itemPath)}
className={cn(
"flex items-center justify-between rounded-nested px-4 py-3 text-sm font-medium transition-colors",
isActive
? "bg-accent text-foreground shadow-xs"
: "text-foreground/80 hover:bg-accent/70 hover:text-foreground",
)}
onClick={() => setIsOpen(false)}
>
<span>{itemLabel}</span>
<span className="text-xs uppercase tracking-[0.18em] opacity-60">
0{navItems.findIndex((navItem) => navItem.key === item.key) + 1}
</span>
</Link>
)}
</motion.div>
);
})}