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

Refine root sidebar and header controls

Browse Source
This commit is contained in:
MOH
2026-03-08 23:16:36 +01:00
parent 1d4c2f8e72
commit 3e835ee620
5 changed files with 103 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/dashboard/dashboard-layout.tsx
+12
View File
@@ -19,7 +19,10 @@ type DashboardLayoutProps = {
icon?: LucideIcon;
items: RootNavItem[];
sidebarIconSrc?: string;
sidebarBrandHref?: string;
sidebarBrandHoverLabel?: string;
sidebarTop?: ReactNode;
sidebarFooterItems?: RootNavItem[];
sidebarFooter?: ReactNode;
headerActions?: ReactNode;
children: ReactNode;
@@ -31,7 +34,10 @@ export function DashboardLayout({
icon: Icon,
items,
sidebarIconSrc,
sidebarBrandHref,
sidebarBrandHoverLabel,
sidebarTop,
sidebarFooterItems,
sidebarFooter,
headerActions,
children,
@@ -43,7 +49,10 @@ export function DashboardLayout({
<DashboardSidebar
items={items}
iconSrc={sidebarIconSrc}
brandHref={sidebarBrandHref}
brandHoverLabel={sidebarBrandHoverLabel}
top={sidebarTop}
footerItems={sidebarFooterItems}
footer={sidebarFooter}
/>
</aside>
@@ -64,7 +73,10 @@ export function DashboardLayout({
<DashboardSidebar
items={items}
iconSrc={sidebarIconSrc}
brandHref={sidebarBrandHref}
brandHoverLabel={sidebarBrandHoverLabel}
top={sidebarTop}
footerItems={sidebarFooterItems}
footer={sidebarFooter}
/>
</SheetContent>
components/dashboard/sidebar.tsx
+36 -11
View File
@@ -17,11 +17,22 @@ type DashboardSidebarItem = {
type DashboardSidebarProps = {
items: DashboardSidebarItem[];
iconSrc?: string;
brandHref?: string;
brandHoverLabel?: string;
top?: ReactNode;
footerItems?: DashboardSidebarItem[];
footer?: ReactNode;
};
export function DashboardSidebar({ items, iconSrc, top, footer }: DashboardSidebarProps) {
export function DashboardSidebar({
items,
iconSrc,
brandHref = "/",
brandHoverLabel,
top,
footerItems = [],
footer,
}: DashboardSidebarProps) {
function renderItem(item: DashboardSidebarItem, nested = false) {
const Icon = item.icon;
const hasChildren = Boolean(item.children?.length);
@@ -50,8 +61,11 @@ export function DashboardSidebar({ items, iconSrc, top, footer }: DashboardSideb
return (
<div className="flex h-full flex-col bg-sidebar/40">
<div className="flex items-center gap-3 px-4 py-5">
<div className="overflow-hidden rounded-surface border border-border/70 bg-background shadow-sm">
<Link
href={brandHref}
className="group mx-4 mt-4 flex items-center gap-3 rounded-surface px-2 py-2 transition-colors hover:bg-muted/60"
>
<div className="overflow-hidden rounded-surface border border-border/70 bg-background shadow-sm transition-transform duration-200 group-hover:scale-105">
{/* eslint-disable-next-line @next/next/no-img-element */}
<img
src={iconSrc || "/favicon.ico"}
@@ -59,24 +73,35 @@ export function DashboardSidebar({ items, iconSrc, top, footer }: DashboardSideb
className="h-9 w-9 object-cover"
/>
</div>
<div className="min-w-0">
<p className="truncate text-sm font-semibold text-foreground">Mohs Admin</p>
<p className="truncate text-xs text-muted-foreground">Website owner workspace</p>
<div className="relative min-h-[2.5rem] min-w-0 flex-1 overflow-hidden">
<div className="absolute inset-0 origin-left transition-all duration-200 group-hover:-translate-y-1 group-hover:opacity-0">
<p className="truncate text-sm font-semibold text-foreground">Mohs Admin</p>
<p className="truncate text-xs text-muted-foreground">Website owner workspace</p>
</div>
<div className="absolute inset-0 flex items-center">
<p className="truncate text-sm font-semibold text-foreground opacity-0 transition-opacity duration-200 group-hover:opacity-100">
{brandHoverLabel ?? "Back to Home"}
</p>
</div>
</div>
</div>
</Link>
{top ? <div className="px-4">{top}</div> : null}
{top ? <div className="px-4 pt-2">{top}</div> : null}
<Separator className="my-4" />
<Separator className="mb-4 mt-3" />
<div className="flex-1 space-y-6 overflow-y-auto px-4 pb-4">
<nav className="space-y-1">{items.map((item) => renderItem(item))}</nav>
</div>
{footer ? (
{footer || footerItems.length ? (
<>
<Separator />
<div className="space-y-2 p-4">{footer}</div>
<div className="space-y-2 p-4">
{footerItems.length ? <nav className="space-y-1">{footerItems.map((item) => renderItem(item))}</nav> : null}
{footerItems.length && footer ? <Separator /> : null}
{footer}
</div>
</>
) : null}
</div>
components/layout/locale-toggle.tsx
+20 -12
View File
@@ -19,7 +19,11 @@ type LocaleToggleProps = {
showLabel?: boolean;
};
export function LocaleToggle({ locale, className, showLabel = false }: LocaleToggleProps) {
export function LocaleToggle({
locale,
className,
showLabel = false,
}: LocaleToggleProps) {
const pathname = usePathname();
const locales: AppLocale[] = ["de", "en", "ar"];
const currentPath = stripLocalePrefix(pathname);
@@ -41,40 +45,44 @@ export function LocaleToggle({ locale, className, showLabel = false }: LocaleTog
size={showLabel ? "sm" : "icon"}
aria-label={`Locale: ${currentLocale.toUpperCase()}`}
className={cn(
"group cursor-pointer rounded-pill border border-transparent text-muted-foreground hover:border-border/70 hover:bg-background/80 hover:text-foreground",
showLabel ? "gap-2 px-3" : "h-9 w-9 p-0",
"group inline-flex shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-full border border-transparent text-muted-foreground hover:border-border/70 hover:bg-background/80 hover:text-foreground",
showLabel ? "h-9 w-9 p-0" : "h-9 w-9 p-0",
className,
)}
>
<Image
src={localeFlags[currentLocale].src}
alt={localeFlags[currentLocale].alt}
width={20}
height={20}
className="h-5 w-5 rounded-full object-cover transition-transform duration-300 ease-out group-hover:scale-110"
width={24}
height={24}
className="h-6 w-6 shrink-0 rounded-full object-cover transition-transform duration-300 ease-out group-hover:scale-110"
/>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className={cn("w-auto min-w-0", contentFontClassName)}>
<DropdownMenuContent
align="center"
sideOffset={8}
className={cn("w-12 min-w-12 p-1", contentFontClassName)}
>
{availableLocales.map((targetLocale) => (
<DropdownMenuItem
key={targetLocale}
asChild
className={cn(
"cursor-pointer",
"cursor-pointer justify-center p-0",
targetLocale === "ar" ? "font-arabic" : "font-latin",
)}
>
<a
href={getLocalizedPath(targetLocale, currentPath)}
className="group flex items-center justify-center"
className="group flex h-10 w-10 items-center justify-center rounded-full"
>
<Image
src={localeFlags[targetLocale].src}
alt={localeFlags[targetLocale].alt}
width={20}
height={20}
className="h-5 w-5 rounded-full object-cover transition-transform duration-300 ease-out group-hover:scale-110"
width={24}
height={24}
className="h-6 w-6 shrink-0 rounded-full object-cover transition-transform duration-300 ease-out group-hover:scale-110"
/>
</a>
</DropdownMenuItem>
components/layout/site-header.tsx
+21 -17
View File
@@ -95,6 +95,12 @@ export function SiteHeader({
const locale = useLocale();
const t = useTranslations("navigation");
const isArabic = locale === "ar";
const desktopControlRailClassName =
"inline-flex items-center gap-1 rounded-[var(--radius-pill)] border border-black/6 bg-white/24 p-1 shadow-[0_14px_34px_-24px_rgba(15,23,42,0.18)] backdrop-blur-[18px] dark:border-white/10 dark:bg-white/4 dark:shadow-[0_20px_48px_-28px_rgba(0,0,0,0.58)]";
const desktopControlButtonClassName =
"h-9 w-9 rounded-full border border-transparent p-0 text-[hsl(var(--hero-ink)/0.76)] hover:border-black/5 hover:bg-white/36 hover:text-[hsl(var(--hero-ink))] dark:text-foreground dark:hover:border-white/10 dark:hover:bg-white/10";
const mobileControlButtonClassName =
"h-10 w-10 rounded-full border border-black/6 bg-white/32 p-0 text-[hsl(var(--hero-ink)/0.8)] hover:bg-white/42 hover:text-[hsl(var(--hero-ink))] dark:border-white/10 dark:bg-white/6 dark:text-foreground dark:hover:bg-white/10";
return (
<header className="fixed inset-x-0 top-3 z-40 bg-transparent">
@@ -134,25 +140,24 @@ export function SiteHeader({
initial={{ opacity: 0, y: -8 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.28, ease: "easeOut", delay: 0.03 }}
className="inline-flex items-center gap-1 rounded-[var(--radius-pill)] border border-black/6 bg-white/24 p-1 shadow-[0_14px_34px_-24px_rgba(15,23,42,0.18)] backdrop-blur-[18px] dark:border-white/10 dark:bg-white/4 dark:shadow-[0_20px_48px_-28px_rgba(0,0,0,0.58)]"
className={desktopControlRailClassName}
>
<LocaleToggle
locale={locale}
showLabel
className="h-9 rounded-[var(--radius-pill)] px-3 text-[hsl(var(--hero-ink)/0.76)] hover:bg-white/36 hover:text-[hsl(var(--hero-ink))] dark:text-foreground dark:hover:bg-white/10"
className={desktopControlButtonClassName}
/>
<ThemeToggle
ariaLabel={t("themeToggle")}
variant="ghost"
className={desktopControlButtonClassName}
/>
{isAdmin ? (
<Button asChild variant="ghost" size="icon" className="h-9 w-9 rounded-[var(--radius-pill)] border border-transparent text-[hsl(var(--hero-ink)/0.76)] hover:border-black/5 hover:bg-white/36 hover:text-[hsl(var(--hero-ink))] dark:text-foreground dark:hover:border-white/10 dark:hover:bg-white/10">
<Button asChild variant="ghost" size="icon" className={desktopControlButtonClassName}>
<Link href="/root" aria-label={t("root")}>
<LayoutDashboard className="h-4 w-4" />
</Link>
</Button>
) : null}
<ThemeToggle
ariaLabel={t("themeToggle")}
variant="ghost"
className="h-9 w-9 rounded-[var(--radius-pill)] border border-transparent text-[hsl(var(--hero-ink)/0.76)] hover:border-black/5 hover:bg-white/36 hover:text-[hsl(var(--hero-ink))] dark:text-foreground dark:hover:border-white/10 dark:hover:bg-white/10"
/>
</motion.div>
</div>
@@ -255,22 +260,21 @@ export function SiteHeader({
<div className="flex items-center justify-between gap-2">
<LocaleToggle
locale={locale}
showLabel
className="h-10 rounded-nested px-3 text-[hsl(var(--hero-ink)/0.8)] hover:bg-white/36 hover:text-[hsl(var(--hero-ink))] dark:text-foreground dark:hover:bg-white/10"
className={mobileControlButtonClassName}
/>
<div className="flex items-center gap-2">
<ThemeToggle
ariaLabel={t("themeToggle")}
variant="ghost"
className={mobileControlButtonClassName}
/>
{isAdmin ? (
<Button asChild variant="ghost" size="icon" className="h-10 w-10 rounded-nested border border-black/6 bg-white/32 text-[hsl(var(--hero-ink)/0.8)] hover:bg-white/42 hover:text-[hsl(var(--hero-ink))] dark:border-white/10 dark:bg-white/6 dark:text-foreground dark:hover:bg-white/10">
<Button asChild variant="ghost" size="icon" className={mobileControlButtonClassName}>
<Link href="/root" aria-label={t("root")} onClick={() => setIsOpen(false)}>
<LayoutDashboard className="h-4 w-4" />
</Link>
</Button>
) : null}
<ThemeToggle
ariaLabel={t("themeToggle")}
variant="ghost"
className="h-10 w-10 rounded-nested border border-black/6 bg-white/32 text-[hsl(var(--hero-ink)/0.8)] hover:bg-white/42 hover:text-[hsl(var(--hero-ink))] dark:border-white/10 dark:bg-white/6 dark:text-foreground dark:hover:bg-white/10"
/>
</div>
</div>
</motion.div>
components/root/root-dashboard-shell.tsx
+14 -16
View File
@@ -1,6 +1,5 @@
import type { ReactNode } from "react";
import {
ArrowLeft,
FolderKanban,
Globe2,
ImageIcon,
@@ -20,7 +19,6 @@ import { FormSaveButton } from "@/components/root/form-save-button";
import { SidebarMaintenanceControl } from "@/components/root/sidebar-maintenance-control";
import { ThemeToggle } from "@/components/theme-toggle";
import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
import { getMaintenanceMode, getSiteSettingsMediaBindings } from "@/lib/app-config";
import { getLocalizedPath } from "@/lib/locale";
import { getRootNavigation } from "@/lib/root-navigation";
@@ -82,9 +80,17 @@ export async function RootDashboardShell({
getSiteSettingsMediaBindings(),
getMaintenanceMode(),
]);
const normalizedSidebarItems = getRootNavigation(copy, active, smtpChild, portfolioChild).filter(
(item) => item.href !== "/root/maintenance" && item.href !== "/root/ui-kit",
const sidebarItems = getRootNavigation(copy, active, smtpChild, portfolioChild);
const normalizedSidebarItems = sidebarItems.filter(
(item) =>
item.href !== "/root/maintenance" &&
item.href !== "/root/ui-kit" &&
item.href !== "/root/smtp" &&
item.href !== "/root/marquee",
);
const footerSidebarItems = ["/root/marquee", "/root/smtp"]
.map((href) => sidebarItems.find((item) => item.href === href))
.filter((item): item is NonNullable<typeof item> => Boolean(item));
const headerIcon =
active === "overview"
? LayoutDashboard
@@ -124,17 +130,10 @@ export async function RootDashboardShell({
icon={headerIcon}
items={normalizedSidebarItems}
sidebarIconSrc={mediaBindings.favicon?.url}
sidebarTop={
<div className="space-y-2">
<Button asChild variant="outline" className="w-full justify-between">
<Link href={getLocalizedPath("de")} target="_blank" rel="noreferrer">
{copy.backToSite}
<ArrowLeft className="h-4 w-4" />
</Link>
</Button>
{sidebarTopContent}
</div>
}
sidebarBrandHref={getLocalizedPath("de")}
sidebarBrandHoverLabel={copy.backToSite}
sidebarTop={sidebarTopContent}
sidebarFooterItems={footerSidebarItems}
sidebarFooter={
<>
<SidebarMaintenanceControl
@@ -160,7 +159,6 @@ export async function RootDashboardShell({
<LogOut className="h-4 w-4" />
</Button>
</form>
<Separator />
</>
}
headerActions={