-
Notifications
You must be signed in to change notification settings - Fork 529
/
DesktopNavbar.tsx
93 lines (88 loc) · 3.57 KB
/
DesktopNavbar.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
import * as React from 'react';
import {
NavigationMenu,
NavigationMenuContent,
NavigationMenuItem,
NavigationMenuLink,
NavigationMenuList,
NavigationMenuTrigger,
navigationMenuTriggerStyle,
} from '@/components/ui/navigation-menu';
import { cn } from '@/lib/utils';
import { useRoute } from 'wouter';
import MainPageLink from '@/components/MainPageLink';
type HeaderMenuLinkProps = {
href: string;
children: React.ReactNode;
className?: string;
};
function HeaderMenuLink(props: HeaderMenuLinkProps) {
const [isActive] = useRoute(props.href);
return (
<NavigationMenuItem>
<NavigationMenuLink asChild active={isActive}>
<MainPageLink
href={props.href}
isActive={isActive}
className={cn(
navigationMenuTriggerStyle(),
props.className,
)}
>
{props.children}
</MainPageLink>
</NavigationMenuLink>
</NavigationMenuItem>
);
}
//NOTE: breaking NavigationMenuItem into a separate menu because the dropdown is positioned wrong otherwise
export default function DesktopHeader() {
return (
<div className='space-x-1 flex flex-row'>
<NavigationMenu>
<NavigationMenuList>
<HeaderMenuLink href="/players">Players</HeaderMenuLink>
<HeaderMenuLink href="/history" className='text-fuchsia-400'>History</HeaderMenuLink>
<HeaderMenuLink href="/whitelist">Whitelist</HeaderMenuLink>
<HeaderMenuLink href="/admins">Admins</HeaderMenuLink>
<HeaderMenuLink href="/settings">Settings</HeaderMenuLink>
</NavigationMenuList>
</NavigationMenu>
<NavigationMenu>
<NavigationMenuList>
<NavigationMenuItem>
<NavigationMenuTrigger>System</NavigationMenuTrigger>
<NavigationMenuContent asChild={true}>
<div className="flex flex-col gap-2 p-4">
<HeaderMenuLink
className="w-36 justify-start"
href="/system/master-actions"
>
Master Actions
</HeaderMenuLink>
<HeaderMenuLink
className="w-36 justify-start"
href="/system/diagnostics"
>
Diagnostics
</HeaderMenuLink>
<HeaderMenuLink
className="w-36 justify-start"
href="/system/console-log"
>
Console Log
</HeaderMenuLink>
<HeaderMenuLink
className="w-36 justify-start"
href="/system/action-log"
>
Action Log
</HeaderMenuLink>
</div>
</NavigationMenuContent>
</NavigationMenuItem>
</NavigationMenuList>
</NavigationMenu>
</div>
);
}