fixed vertical nav

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

View File

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

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>
);

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>
);