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/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>