artegoser/ultyt
1
0
Fork 0
mirror of https://github.com/artegoser/ultyt.git synced 2024-11-24 12:56:22 +03:00
Code Issues Projects Releases Packages Wiki Activity

feat: navbar

Browse source
This commit is contained in:
Artemy 2023-08-09 18:02:45 +03:00
parent 3d798eb391
commit d5c9887acb
2 changed files with 82 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/App.tsx
View file

@ -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>

78
src/components/navbar.tsx Normal file
View file

@ -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)}
</>
);
}