PxlLoewe/var-monorepo
1
0
Fork 0
Code Issues 22 Pull Requests Actions Packages Projects Releases 2 Wiki Activity

fixed vertical nav

Browse Source
This commit is contained in:
PxlLoewe
2025-02-22 21:36:58 +01:00
parent e42bc192a9
commit 52888787cf
3 changed files with 84 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
apps/hub/app/(app)/layout.tsx
View File

@@ -1,15 +1,15 @@
import type { Metadata } from "next"; import type { Metadata } from 'next';
import { import {
DiscordLogoIcon, DiscordLogoIcon,
InstagramLogoIcon, InstagramLogoIcon,
ReaderIcon, ReaderIcon,
} from "@radix-ui/react-icons"; } from '@radix-ui/react-icons';
import { HorizontalNav, VerticalNav } from "../_components/ui/Nav"; import { HorizontalNav, VerticalNav } from '../_components/Nav';
import { Toaster } from "react-hot-toast"; import { Toaster } from 'react-hot-toast';
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Create Next App", title: 'Create Next App',
description: "Generated by create next app", description: 'Generated by create next app',
}; };
export default async function RootLayout({ export default async function RootLayout({

78
apps/hub/app/_components/Nav.tsx Normal file
View File

@@ -0,0 +1,78 @@
import {
HomeIcon,
PersonIcon,
GearIcon,
ExitIcon,
LockClosedIcon,
} from '@radix-ui/react-icons';
import Link from 'next/link';
export const VerticalNav = () => {
return (
<ul className="menu w-64 bg-base-300 p-4 rounded-lg shadow-md">
<li>
<Link href="/">
<HomeIcon /> Dashboard
</Link>
</li>
<li>
<Link href="/profile">
<PersonIcon /> Profile
</Link>
</li>
<li>
<details open>
<summary>
<LockClosedIcon />
Admin
</summary>
<ul>
<li>
<Link href="/admin/user">Benutzer</Link>
</li>
<li>
<Link href="/admin/station">Stationen</Link>
</li>
<li>
<Link href="/admin/event">Events</Link>
</li>
</ul>
</details>
</li>
<li>
<Link href="/settings">
<GearIcon />
Einstellungen
</Link>
</li>
</ul>
);
};
export const HorizontalNav = () => (
<div className="navbar bg-base-200 shadow-md rounded-lg mb-4">
<div className="flex-1">
<a className="btn btn-ghost normal-case text-xl">
Virtual Air Rescue - HUB
</a>
</div>
<div className="flex-none">
<ul className="flex space-x-2 px-1">
<li>
<Link href="/">
<button className="btn btn-sm btn-outline btn-primary">
Zur Leitstelle
</button>
</Link>
</li>
<li>
<Link href="/logout">
<button className="btn btn-sm">
<ExitIcon /> Logout
</button>
</Link>
</li>
</ul>
</div>
</div>
);

80
apps/hub/app/_components/ui/Nav.tsx
View File

@@ -1,80 +0,0 @@
import {
HomeIcon,
PersonIcon,
GearIcon,
ExitIcon,
LockClosedIcon,
} from '@radix-ui/react-icons';
import Link from 'next/link';
export const VerticalNav = () => {
return (
<div className="w-64 bg-base-300 p-4 rounded-lg shadow-md">
<ul className="menu">
<li>
<Link href="/">
<HomeIcon /> Dashboard
</Link>
</li>
<li>
<Link href="/profile">
<PersonIcon /> Profile
</Link>
</li>
<li>
<details open>
<summary>
<LockClosedIcon />
Admin
</summary>
<ul>
<li>
<Link href="/admin/user">Benutzer</Link>
</li>
<li>
<Link href="/admin/station">Stationen</Link>
</li>
<li>
<Link href="/admin/event">Events</Link>
</li>
</ul>
</details>
</li>
<li>
<Link href="/settings">
<GearIcon />
Einstellungen
</Link>
</li>
</ul>
</div>
);
};
export const HorizontalNav = () => (
<div className="navbar bg-base-200 shadow-md rounded-lg mb-4">
<div className="flex-1">
<a className="btn btn-ghost normal-case text-xl">
Virtual Air Rescue - HUB
</a>
</div>
<div className="flex-none">
<ul className="flex space-x-2 px-1">
<li>
<Link href="/">
<button className="btn btn-sm btn-outline btn-primary">
Zur Leitstelle
</button>
</Link>
</li>
<li>
<Link href="/logout">
<button className="btn btn-sm">
<ExitIcon /> Logout
</button>
</Link>
</li>
</ul>
</div>
</div>
);