Refine navigation states and fix toast centering

app/globals.css

@@ -200,23 +200,25 @@ html[lang="ar"] {
 [data-sonner-toaster][data-x-position="center"] {
   left: 0;
   right: 0;
+  display: flex;
+  justify-content: center;
   width: 100%;
   transform: none;
 }
 
 [data-sonner-toaster][data-x-position="center"] [data-sonner-toast] {
-  left: 0;
-  right: 0;
   width: fit-content;
   min-width: 0;
   max-width: min(calc(100vw - 2rem), 32rem);
-  margin-inline: auto;
+  margin-inline: 0;
 }
 
 @media (max-width: 600px) {
   [data-sonner-toaster][data-x-position="center"] {
     left: 0;
     right: 0;
+    display: flex;
+    justify-content: center;
     width: 100%;
     transform: none;
   }
@@ -224,7 +226,13 @@ html[lang="ar"] {
   [data-sonner-toaster][data-x-position="center"] [data-sonner-toast] {
     width: fit-content;
     max-width: calc(100vw - 2rem);
-    margin-inline: auto;
+    margin-inline: 0;
+  }
+
+  [data-sonner-toaster][dir="rtl"][data-x-position="center"] {
+    left: 0;
+    right: 0;
+    transform: none;
   }
 }
 

components/layout/site-header.tsx

@@ -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
+                        {item.disabled ? (
-                          href={getLocalizedPath(locale, itemPath)}
+                          <div
-                          className={cn(
+                            aria-disabled="true"
-                            "flex items-center justify-between rounded-nested px-4 py-3 text-sm font-medium transition-colors",
+                            className="flex cursor-not-allowed items-center justify-between rounded-nested px-4 py-3 text-sm font-medium text-foreground/55"
-                            isActive
+                          >
-                              ? "bg-accent text-foreground shadow-xs"
+                            <div className={cn("inline-flex items-center justify-center", isArabic ? "tracking-normal" : "")}>
-                              : "text-foreground/80 hover:bg-accent/70 hover:text-foreground",
+                              <span>{itemLabel}</span>
-                          )}
+                            </div>
-                          onClick={() => setIsOpen(false)}
+                            <span className="text-xs uppercase tracking-[0.18em] opacity-40">
-                        >
+                              0{navItems.findIndex((navItem) => navItem.key === item.key) + 1}
-                          <span>{t(item.key)}</span>
+                            </span>
-                          <span className="text-xs uppercase tracking-[0.18em] opacity-60">
+                          </div>
-                            0{navItems.findIndex((navItem) => navItem.key === item.key) + 1}
+                        ) : (
-                          </span>
+                          <Link
-                        </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>
                     );
                   })}

messages/ar.json

@@ -5,6 +5,7 @@
     "products": "منتجاتي",
     "about": "معلومات عني",
     "contact": "تواصل معي",
+    "soon": "قــريــبــاً",
     "root": "Root",
     "openMenu": "فتح القائمة",
     "closeMenu": "إغلاق القائمة",

messages/de.json

@@ -5,6 +5,7 @@
     "products": "Produkte",
     "about": "Über mich",
     "contact": "Kontakt",
+    "soon": "Bald",
     "root": "Root",
     "openMenu": "Menü öffnen",
     "closeMenu": "Menü schliessen",

messages/en.json

@@ -5,6 +5,7 @@
     "products": "Products",
     "about": "About Me",
     "contact": "Contact",
+    "soon": "Soon",
     "root": "Root",
     "openMenu": "Open menu",
     "closeMenu": "Close menu",