diff --git a/src/app/elements.tsx b/src/app/elements.tsx
new file mode 100644
index 0000000..92de51f
--- /dev/null
+++ b/src/app/elements.tsx
@@ -0,0 +1,12 @@
+"use client";
+
+import { Nav } from "@/components/Nav";
+
+export function Elements({ children }: { children: React.ReactNode }) {
+ return (
+ <>
+
+ {children}
+
+ );
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index eb40b6d..633e0e5 100644
--- 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 (
- {children}
+
+ {children}
+
);
diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
new file mode 100644
index 0000000..4e6fe74
--- /dev/null
+++ 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 (
+
+
+ {/* */}
+ MaterialTube
+
+
+ {navItems.map((item) => {
+ const isActive: boolean = pathname === item.link;
+
+ return (
+
+
+ {item.title}
+
+
+ );
+ })}
+
+
+
+
+
+
+
+ );
+};