Skip to content

Commit 24ef254

Browse files
JackTenchJackTench
committed
Merge pull request #5 from JackTench/nav
Create nav bar.
2 parents 9861a85 + 030d3f4 commit 24ef254

File tree

8 files changed

+321
-6
lines changed

8 files changed

+321
-6
lines changed

‎package-lock.json‎

Lines changed: 75 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
},
1212
"dependencies": {
1313
"@radix-ui/react-dropdown-menu": "^2.1.16",
14+
"@radix-ui/react-navigation-menu": "^1.2.14",
1415
"@radix-ui/react-slot": "^1.2.3",
1516
"class-variance-authority": "^0.7.1",
1617
"clsx": "^2.1.1",

‎src/app.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1+
import { AppNav } from "./components/libresplit/AppNav";
12
import AppRouter from "./router";
23

34
export default function App() {
45
return (
56
<div>
67
<div>
7-
<p>Placeholder for Layout component.</p>
8+
<AppNav />
89
</div>
910
<div>
1011
<AppRouter />

‎src/app/converter.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export function Converter() {
2+
return <p>Placeholder page for converter.</p>;
3+
}

‎src/app/home.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
1-
import { AppThemeToggleButton } from "@/components/libresplit/AppThemeToggleButton";
2-
3-
export default function Home() {
1+
export function Home() {
42
return (
53
<div>
64
<h1>LibreSplit</h1>
7-
<AppThemeToggleButton />
85
</div>
96
);
107
}

‎src/components/libresplit/AppNav.tsx‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import { Button } from "../ui/button";
2+
import {
3+
NavigationMenu,
4+
NavigationMenuItem,
5+
NavigationMenuLink,
6+
NavigationMenuList,
7+
} from "../ui/navigation-menu";
8+
import { AppThemeToggleButton } from "./AppThemeToggleButton";
9+
import { Github } from "lucide-react";
10+
import { Link } from "react-router";
11+
12+
export function AppNav() {
13+
return (
14+
<nav className="flex w-full items-center justify-between border-b px-4 py-2">
15+
<div className="flex items-center">
16+
<LeftNav />
17+
</div>
18+
19+
<NavigationMenu>
20+
<NavigationMenuList>
21+
<NavigationMenuItem>
22+
<NavigationMenuLink asChild>
23+
<Link to="/">Home</Link>
24+
</NavigationMenuLink>
25+
</NavigationMenuItem>
26+
27+
<NavigationMenuItem>
28+
<NavigationMenuLink asChild>
29+
<Link to="/converter">Converter</Link>
30+
</NavigationMenuLink>
31+
</NavigationMenuItem>
32+
</NavigationMenuList>
33+
</NavigationMenu>
34+
35+
<div className="flex items-center">
36+
<RightNav />
37+
</div>
38+
</nav>
39+
);
40+
}
41+
42+
function LeftNav() {
43+
return (
44+
<Link to="/">
45+
<div className="flex items-center gap-2">
46+
<img
47+
src="https://raw.githubusercontent.com/LibreSplit/LibreSplit/refs/heads/main/assets/libresplit.svg"
48+
alt="LibreSplit Logo"
49+
className="w-8"
50+
/>
51+
<span className="text-xl font-semibold">LibreSplit</span>
52+
</div>
53+
</Link>
54+
);
55+
}
56+
57+
function RightNav() {
58+
return (
59+
<div className="flex items-center gap-2">
60+
<Button>
61+
<a href="https://github.com/wins1ey/LibreSplit">
62+
<Github />
63+
</a>
64+
</Button>
65+
<AppThemeToggleButton />
66+
</div>
67+
);
68+
}

‎src/components/ui/navigation-menu.tsx‎

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
import * as React from "react";
2+
3+
import { cn } from "@/lib/utils";
4+
import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
5+
import { cva } from "class-variance-authority";
6+
import { ChevronDownIcon } from "lucide-react";
7+
8+
function NavigationMenu({
9+
className,
10+
children,
11+
viewport = true,
12+
...props
13+
}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
14+
viewport?: boolean;
15+
}) {
16+
return (
17+
<NavigationMenuPrimitive.Root
18+
data-slot="navigation-menu"
19+
data-viewport={viewport}
20+
className={cn(
21+
"group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
22+
className,
23+
)}
24+
{...props}
25+
>
26+
{children}
27+
{viewport && <NavigationMenuViewport />}
28+
</NavigationMenuPrimitive.Root>
29+
);
30+
}
31+
32+
function NavigationMenuList({
33+
className,
34+
...props
35+
}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
36+
return (
37+
<NavigationMenuPrimitive.List
38+
data-slot="navigation-menu-list"
39+
className={cn(
40+
"group flex flex-1 list-none items-center justify-center gap-1",
41+
className,
42+
)}
43+
{...props}
44+
/>
45+
);
46+
}
47+
48+
function NavigationMenuItem({
49+
className,
50+
...props
51+
}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
52+
return (
53+
<NavigationMenuPrimitive.Item
54+
data-slot="navigation-menu-item"
55+
className={cn("relative", className)}
56+
{...props}
57+
/>
58+
);
59+
}
60+
61+
const navigationMenuTriggerStyle = cva(
62+
"group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1",
63+
);
64+
65+
function NavigationMenuTrigger({
66+
className,
67+
children,
68+
...props
69+
}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
70+
return (
71+
<NavigationMenuPrimitive.Trigger
72+
data-slot="navigation-menu-trigger"
73+
className={cn(navigationMenuTriggerStyle(), "group", className)}
74+
{...props}
75+
>
76+
{children}{" "}
77+
<ChevronDownIcon
78+
className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
79+
aria-hidden="true"
80+
/>
81+
</NavigationMenuPrimitive.Trigger>
82+
);
83+
}
84+
85+
function NavigationMenuContent({
86+
className,
87+
...props
88+
}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
89+
return (
90+
<NavigationMenuPrimitive.Content
91+
data-slot="navigation-menu-content"
92+
className={cn(
93+
"top-0 left-0 w-full p-2 pr-2.5 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out md:absolute md:w-auto",
94+
"group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95",
95+
className,
96+
)}
97+
{...props}
98+
/>
99+
);
100+
}
101+
102+
function NavigationMenuViewport({
103+
className,
104+
...props
105+
}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
106+
return (
107+
<div
108+
className={cn(
109+
"absolute top-full left-0 isolate z-50 flex justify-center",
110+
)}
111+
>
112+
<NavigationMenuPrimitive.Viewport
113+
data-slot="navigation-menu-viewport"
114+
className={cn(
115+
"origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
116+
className,
117+
)}
118+
{...props}
119+
/>
120+
</div>
121+
);
122+
}
123+
124+
function NavigationMenuLink({
125+
className,
126+
...props
127+
}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
128+
return (
129+
<NavigationMenuPrimitive.Link
130+
data-slot="navigation-menu-link"
131+
className={cn(
132+
"flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground data-[active=true]:hover:bg-accent data-[active=true]:focus:bg-accent [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
133+
className,
134+
)}
135+
{...props}
136+
/>
137+
);
138+
}
139+
140+
function NavigationMenuIndicator({
141+
className,
142+
...props
143+
}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
144+
return (
145+
<NavigationMenuPrimitive.Indicator
146+
data-slot="navigation-menu-indicator"
147+
className={cn(
148+
"top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in",
149+
className,
150+
)}
151+
{...props}
152+
>
153+
<div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
154+
</NavigationMenuPrimitive.Indicator>
155+
);
156+
}
157+
158+
export {
159+
NavigationMenu,
160+
NavigationMenuList,
161+
NavigationMenuItem,
162+
NavigationMenuContent,
163+
NavigationMenuTrigger,
164+
NavigationMenuLink,
165+
NavigationMenuIndicator,
166+
NavigationMenuViewport,
167+
navigationMenuTriggerStyle,
168+
};

‎src/router.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
1-
import Home from "./app/home";
1+
import { Converter } from "./app/converter";
2+
import { Home } from "./app/home";
23
import { Route, Routes } from "react-router";
34

45
export default function AppRouter() {
56
return (
67
<Routes>
78
<Route path="/" element={<Home />} />
9+
<Route path="/converter" element={<Converter />} />
810
</Routes>
911
);
1012
}

0 commit comments

Comments
 (0)