added basic nav

2 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>
+	);
+};