Files
var-monorepo/apps/hub/app/(app)/layout.tsx

100 lines
3.4 KiB
TypeScript

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';
export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
};
export default async function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<div
className="hero min-h-screen"
style={{
backgroundImage:
'url(https://media.discordapp.net/attachments/1086051758461173931/1336779010109341766/d-hyan.PNG?ex=67b19238&is=67b040b8&hm=5d90bef8e44a8e620d759d1bebe0f1a3649b0f3cadc735bd9a06d5e6702f2d14&=&format=webp&quality=lossless)',
}}
>
<div className="hero-overlay bg-opacity-30"></div>
<div>
<Toaster position="top-center" reverseOrder={false} />
</div>
{/* Card */}
<div className="hero-content text-neutral-content text-center w-full max-w-full h-full m-10">
<div className="card bg-base-100 shadow-2xl w-full min-h-full h-full max-h-[calc(100vh-13rem)] p-4 flex flex-col mr-24 ml-24">
{/* Top Navbar */}
<HorizontalNav />
{/* Hauptlayout: Sidebar + Content (nimmt Resthöhe ein) */}
<div className="flex flex-grow overflow-hidden">
{/* Linke Sidebar */}
<VerticalNav />
{/* Scrollbarer Content-Bereich */}
<div className="flex-grow bg-base-100 p-6 rounded-lg shadow-md ml-4 overflow-auto h-full">
{children}
</div>
</div>
{/* Footer */}
<footer className="footer flex justify-between items-center p-4 bg-base-200 mt-4 rounded-lg shadow-md">
{/* Left: Impressum & Datenschutz */}
<div className="flex gap-4 text-sm">
<a href="/impressum" className="hover:text-primary">
Impressum
</a>
<a href="/datenschutz" className="hover:text-primary">
Datenschutzerklärung
</a>
</div>
{/* Center: Copyright */}
<p className="text-sm">
Copyright © {new Date().getFullYear()} - Virtual Air Rescue
</p>
{/* Right: Social Icons */}
<div className="flex gap-4">
<div className="tooltip tooltip-top" data-tip="Discord">
<a
href="https://discord.com"
target="_blank"
rel="noopener noreferrer"
className="hover:text-primary"
>
<DiscordLogoIcon className="w-5 h-5" />
</a>
</div>
<div className="tooltip tooltip-top" data-tip="Instagram">
<a
href="https://instagram.com"
target="_blank"
rel="noopener noreferrer"
className="hover:text-primary"
>
<InstagramLogoIcon className="w-5 h-5" />
</a>
</div>
<div className="tooltip tooltip-top" data-tip="Knowledgebase">
<a href="/docs" className="hover:text-primary">
<ReaderIcon className="w-5 h-5" />
</a>
</div>
</div>
</footer>
</div>
</div>
</div>
);
}