Refine root sidebar and header controls
This commit is contained in:
MOH
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user