added basic nav

nextui
Guus van Meerveld 8 months ago
parent dc9d17ec74
commit 2e8785bf23

@ -0,0 +1,12 @@
"use client";
import { Nav } from "@/components/Nav";
export function Elements({ children }: { children: React.ReactNode }) {
return (
<>
<Nav />
{children}
</>
);
}

@ -2,6 +2,7 @@ import type { Metadata } from "next";
import "./globals.css";
import { Providers } from "./providers";
import { Component } from "@/typings/component";
import { Elements } from "./elements";
export const metadata: Metadata = {
title: "MaterialTube client",
@ -14,7 +15,9 @@ const RootLayout: Component = ({ children }) => {
return (
<html lang="en" className="dark">
<body>
<Providers>{children}</Providers>
<Providers>
<Elements>{children}</Elements>
</Providers>
</body>
</html>
);

@ -0,0 +1,66 @@
"use client";
import { Component } from "@/typings/component";
import {
Navbar,
NavbarBrand,
NavbarContent,
NavbarItem
} from "@nextui-org/navbar";
import { Link } from "@nextui-org/link";
import { Button } from "@nextui-org/button";
import NextLink from "next/link";
import { usePathname } from "next/navigation";
export const Nav: Component = () => {
const navItems = [
{
title: "Trending",
link: "/"
},
{
title: "Subscriptions",
link: "/subscriptions"
},
{
title: "History",
link: "/history"
}
];
const pathname = usePathname();
return (
<Navbar>
<NavbarBrand>
{/* <AcmeLogo /> */}
<p className="font-bold text-inherit">MaterialTube</p>
</NavbarBrand>
<NavbarContent className="hidden sm:flex gap-4" justify="center">
{navItems.map((item) => {
const isActive: boolean = pathname === item.link;
return (
<NavbarItem key={item.title.toLowerCase()} isActive={isActive}>
<Link
as={NextLink}
color={isActive ? "primary" : "foreground"}
href={item.link}
>
{item.title}
</Link>
</NavbarItem>
);
})}
</NavbarContent>
<NavbarContent justify="end">
<NavbarItem>
<Button as={NextLink} color="primary" href="/settings" variant="flat">
Settings
</Button>
</NavbarItem>
</NavbarContent>
</Navbar>
);
};
Loading…
Cancel
Save