diff --git a/app/globals.css b/app/globals.css
index 1e8a1f4..50f61e3 100644
--- a/app/globals.css
+++ b/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;
}
}
diff --git a/components/layout/site-header.tsx b/components/layout/site-header.tsx
index 26c4719..4dcb998 100644
--- a/components/layout/site-header.tsx
+++ b/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 (
+
+ {mobile ? (
+ {itemLabel}
+ ) : (
+ <>
+
+ {itemLabel}
+
+
+ {soonLabel}
+
+ >
+ )}
+
+ );
+ }
return (
) : null}
- {t(item.key)}
+ {itemLabel}
);
})()
@@ -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 (
- setIsOpen(false)}
- >
- {t(item.key)}
-
- 0{navItems.findIndex((navItem) => navItem.key === item.key) + 1}
-
-
+ {item.disabled ? (
+
+
+ {itemLabel}
+
+
+ 0{navItems.findIndex((navItem) => navItem.key === item.key) + 1}
+
+
+ ) : (
+ setIsOpen(false)}
+ >
+ {itemLabel}
+
+ 0{navItems.findIndex((navItem) => navItem.key === item.key) + 1}
+
+
+ )}
);
})}
diff --git a/messages/ar.json b/messages/ar.json
index b0f2b98..a52d9c0 100644
--- a/messages/ar.json
+++ b/messages/ar.json
@@ -5,6 +5,7 @@
"products": "منتجاتي",
"about": "معلومات عني",
"contact": "تواصل معي",
+ "soon": "قــريــبــاً",
"root": "Root",
"openMenu": "فتح القائمة",
"closeMenu": "إغلاق القائمة",
diff --git a/messages/de.json b/messages/de.json
index fbef3d9..5cb0615 100644
--- a/messages/de.json
+++ b/messages/de.json
@@ -5,6 +5,7 @@
"products": "Produkte",
"about": "Über mich",
"contact": "Kontakt",
+ "soon": "Bald",
"root": "Root",
"openMenu": "Menü öffnen",
"closeMenu": "Menü schliessen",
diff --git a/messages/en.json b/messages/en.json
index d0e66bd..500c27e 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -5,6 +5,7 @@
"products": "Products",
"about": "About Me",
"contact": "Contact",
+ "soon": "Soon",
"root": "Root",
"openMenu": "Open menu",
"closeMenu": "Close menu",