added basic nav

8 months ago · 2e8785bf23
parent dc9d17ec74
commit 2e8785bf23
3 changed files with 82 additions and 1 deletions
--- a/src/app/elements.tsx
+++ b/src/app/elements.tsx
@ -0,0 +1,12 @@
 "use client";
 import { Nav } from "@/components/Nav";
 export function Elements({ children }: { children: React.ReactNode }) {
 	return (
 		<>
 			<Nav />
 			{children}
 		</>
 	);
 }
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@ -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>
 	);
--- a/src/components/Nav.tsx
+++ b/src/components/Nav.tsx
@ -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>
 	);
 };