Tailwind + daisy UI update #1
@@ -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({
|
||||
|
||||
78
apps/hub/app/_components/Nav.tsx
Normal file
78
apps/hub/app/_components/Nav.tsx
Normal 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>
|
||||
);
|
||||
@@ -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>
|
||||
);
|
||||
Reference in New Issue
Block a user