gitscope
← marzneshin / master / dashboard/src/common/components/header/menu.tsx
https://dev.kronoz.win/r/marzneshin.git
dashboard/src/common/components/header/menu.tsx · TypeScript
Blame Raw
 1import {
 2    DropdownMenu,
 3    DropdownMenuContent,
 4    DropdownMenuItem,
 5    DropdownMenuLabel,
 6    DropdownMenuSeparator,
 7    DropdownMenuTrigger,
 8    DropdownMenuGroup,
 9    Button,
10} from "@marzneshin/common/components";
11import { Link } from "@tanstack/react-router";
12import { FC } from 'react';
13import { Settings, MenuIcon, ShieldCheck } from "lucide-react";
14import { LanguageSwitchMenu } from "@marzneshin/features/language-switch";
15import { ThemeToggle } from "@marzneshin/features/theme-switch";
16import { useAuth, Logout } from "@marzneshin/modules/auth";
17import { useScreenBreakpoint } from "@marzneshin/common/hooks/use-screen-breakpoint";
18import { useTranslation } from "react-i18next";
19import { VersionIndicator } from "@marzneshin/features/version-indicator";
20
21export const HeaderMenu: FC = () => {
22
23    const isDesktop = useScreenBreakpoint("md");
24    const { isSudo } = useAuth();
25    const { t } = useTranslation();
26
27    return (
28        <DropdownMenu>
29            <DropdownMenuTrigger asChild>
30                <Button
31                    variant="secondary"
32                    className="bg-gray-800 text-secondary dark:hover:bg-secondary-foreground dark:hover:text-secondary dark:text-secondary-foreground"
33                    size="icon"
34                >
35                    <MenuIcon />
36                </Button>
37            </DropdownMenuTrigger>
38            <DropdownMenuContent>
39                <DropdownMenuLabel>Menu</DropdownMenuLabel>
40                <DropdownMenuSeparator />
41                {(!isDesktop && isSudo()) && (
42                    <>
43                        <DropdownMenuItem className="w-full">
44                            <Link to="/settings" className="hstack gap-1 items-center justify-between w-full h-fit p-0">
45                                {t("settings")}
46                                <Settings className="size-4" />
47                            </Link>
48                        </DropdownMenuItem>
49                        <DropdownMenuSeparator />
50                        <DropdownMenuItem className="w-full">
51                            <Link to="/admins" className="hstack gap-1 items-center justify-between w-full h-fit p-0" >
52                                {t("admins")}
53                                <ShieldCheck className="size-4" />
54                            </Link>
55                        </DropdownMenuItem>
56                        <DropdownMenuSeparator />
57                    </>
58                )}
59                <DropdownMenuItem className="w-full">
60                    <Logout />
61                </DropdownMenuItem>
62                <DropdownMenuSeparator />
63                <DropdownMenuGroup>
64                    <LanguageSwitchMenu />
65                    <ThemeToggle />
66                </DropdownMenuGroup>
67                <DropdownMenuSeparator />
68                <DropdownMenuGroup className="py-1 shrink-0">
69                    <VersionIndicator />
70                </DropdownMenuGroup>
71            </DropdownMenuContent>
72        </DropdownMenu >
73    )
74};