feat: navbar

src/App.tsx

@@ -4,6 +4,7 @@ import { NextUIProvider } from "@nextui-org/react";
 import { PipedAPI } from "piped-api";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 import Trending from "./pages/trending";
+import { NavbarComponent } from "./components/navbar";
 
 declare global {
   interface Window {
@@ -16,8 +17,10 @@ function App() {
   return (
     <NextUIProvider>
       <BrowserRouter>
+        <NavbarComponent />
         <Routes>
-          <Route path="/" element={<Trending />} />
+          <Route path="/" element={<Navigate to="/trending" />} />
+          <Route path="/trending" element={<Trending />} />
         </Routes>
       </BrowserRouter>
     </NextUIProvider>

src/components/navbar.tsx

@@ -0,0 +1,78 @@
+import { MagnifyingGlassIcon } from "@heroicons/react/24/solid";
+import {
+  Navbar,
+  NavbarBrand,
+  NavbarContent,
+  NavbarItem,
+  NavbarMenuToggle,
+  NavbarMenu,
+  NavbarMenuItem,
+  Input,
+} from "@nextui-org/react";
+import { Link } from "react-router-dom";
+
+export function NavbarComponent() {
+  return (
+    <Navbar>
+      <NavbarContent>
+        <NavbarMenuToggle className="sm:hidden" />
+        <NavbarBrand>
+          <Link className="font-bold text-inherit" to="/trending">
+            ULTYT
+          </Link>
+        </NavbarBrand>
+      </NavbarContent>
+
+      <NavbarContent className="sm:flex gap-4" justify="start">
+        <NavbarItem>
+          <Input
+            isClearable
+            radius="lg"
+            placeholder="Type to search..."
+            startContent={<MagnifyingGlassIcon className="h-6 w-6" />}
+          />
+        </NavbarItem>
+      </NavbarContent>
+
+      <Menu />
+    </Navbar>
+  );
+}
+
+function genMenu(menu: boolean) {
+  let NavItem, Nav;
+
+  if (menu) {
+    NavItem = NavbarMenuItem;
+    Nav = NavbarMenu;
+  } else {
+    NavItem = NavbarItem;
+    Nav = NavbarContent;
+  }
+
+  return (
+    <Nav className="hidden sm:flex gap-4" justify="center">
+      <NavItem>
+        <Link to="/trending">Trending</Link>
+      </NavItem>
+      <NavItem>
+        <Link to="/feed">Feed</Link>
+      </NavItem>
+      <NavItem>
+        <Link to="/playlists">Playlists</Link>
+      </NavItem>
+      <NavItem>
+        <Link to="/preferences">Preferences</Link>
+      </NavItem>
+    </Nav>
+  );
+}
+
+function Menu() {
+  return (
+    <>
+      {genMenu(false)}
+      {genMenu(true)}
+    </>
+  );
+}