Refactor NavBar

src/layout/NavBar/DesktopNavBar.tsx

@@ -0,0 +1,56 @@
+import { useRouter } from "next/router";
+import { Flex, Spacer, Box } from "@chakra-ui/react";
+import DropdownButton from "@component/DropdownButton";
+import TextInput from "@component/TextInput";
+import { User } from "@lib/session";
+import { NavigationItems } from "./index";
+
+export interface DesktopNavigationProps {
+	user?: User;
+	navigationItems: NavigationItems[];
+}
+
+export const DesktopNavigation = ({ user, navigationItems }: DesktopNavigationProps) => {
+	const router = useRouter();
+
+	return (
+		<Flex bgColor="violet.400" height="fit-content" marginBottom="1.5em" flexDir="row" borderRadius="md">
+			{navigationItems.map((item) => (
+				<DropdownButton key={item.text} text={item.text} hasMenu={item.hasMenu} list={item.menuItems} href={item.href} />
+			))}
+
+			<Box alignSelf="center">
+				<form
+					onSubmit={(event) => {
+						event.preventDefault();
+						const form = event.currentTarget;
+						const searchValue = (form.elements.namedItem("search") as any)?.value;
+						if (searchValue) {
+							router.push(`/character/${searchValue}`);
+							form.reset();
+						}
+					}}
+				>
+					<TextInput name="search" placeholder="Search character..." />
+				</form>
+			</Box>
+
+			<Spacer />
+			{user ? (
+				<DropdownButton
+					text={user.name}
+					hasMenu={true}
+					list={[
+						{ text: "Account Management", url: "/account" },
+						{ text: "Sign out", url: "/account/logout" },
+					]}
+				/>
+			) : (
+				<>
+					<DropdownButton text="Sign Up" href="/account/register" />
+					<DropdownButton text="Sign In" href="/account/login" />
+				</>
+			)}
+		</Flex>
+	);
+};

src/layout/NavBar/MobileNavBar.tsx

@@ -0,0 +1,62 @@
+import { Flex, Spacer, Menu, MenuButton, MenuList, MenuItem, MenuGroup, IconButton, Link } from "@chakra-ui/react";
+import DropdownButton from "@component/DropdownButton";
+import { RxHamburgerMenu } from "react-icons/rx";
+import { User } from "@lib/session";
+import { NavigationItems } from "./index";
+
+export interface MobileNavigationProps {
+	user?: User;
+	navigationItems: NavigationItems[];
+}
+
+export const MobileNavigation = ({ user, navigationItems }: MobileNavigationProps) => {
+	return (
+		<Flex bgColor="violet.400" height="fit-content" marginBottom="1.5em" flexDir="row" borderRadius="md">
+			<Menu>
+				<MenuButton
+					as={IconButton}
+					aria-label="Menu"
+					icon={<RxHamburgerMenu />}
+					variant="outline"
+					_hover={{}}
+					color={"white"}
+					_active={{ bgColor: "white", color: "black" }}
+					alignSelf={"center"}
+					marginLeft={1}
+				/>
+				<MenuList>
+					{navigationItems.map((item) => {
+						return item.hasMenu ? (
+							<MenuGroup key={item.text} title={item.text}>
+								{item.menuItems!.map((subItem) => {
+									return <MenuItem key={subItem.text}>{subItem.text}</MenuItem>;
+								})}
+							</MenuGroup>
+						) : (
+							<MenuItem key={item.text} as={Link} href={item.href}>
+								{item.text}
+							</MenuItem>
+						);
+					})}
+				</MenuList>
+			</Menu>
+
+			<Spacer />
+			{user ? (
+				<DropdownButton
+					text={user.name}
+					hasMenu={true}
+					list={[
+						{ text: "Account Management", url: "/account" },
+						{ text: "Sign out", url: "/account/logout" },
+					]}
+				/>
+			) : (
+				<>
+					<DropdownButton text="Sign Up" href="/account/register" />
+					<DropdownButton text="Sign In" href="/account/login" />
+				</>
+			)}
+		</Flex>
+	);
+};

src/layout/NavBar/index.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import { useBreakpointValue } from "@chakra-ui/react";
+import { trpc } from "@util/trpc";
+import { DesktopNavigation } from "./DesktopNavBar";
+import { MobileNavigation } from "./MobileNavBar";
+
+export interface NavigationItems {
+	text: string;
+	href?: string;
+	hasMenu?: boolean;
+	menuItems?: { text: string; url: string }[];
+}
+
+const navigationItems: NavigationItems[] = [
+	{ text: "Home", href: "/" },
+	{
+		hasMenu: true,
+		menuItems: [
+			{ text: "Highscores", url: "/community/highscores" },
+			{ text: "Guilds", url: "/community/guilds" },
+			{ text: "Houses", url: "/community/houses" },
+		],
+		text: "Community",
+	},
+	{
+		hasMenu: true,
+		menuItems: [
+			{ text: "Server Information", url: "/serverinfo" },
+			{ text: "Downloads", url: "/downloads" },
+		],
+		text: "Library",
+	},
+	{ text: "Donate", href: "/donate" },
+	{ text: "Store", href: "/shop" },
+];
+
+const NavBar = () => {
+	const user = trpc.me.me.useQuery().data;
+
+	const NavComponent = useBreakpointValue(
+		{
+			base: MobileNavigation,
+			md: DesktopNavigation,
+		},
+		{
+			fallback: "md",
+		},
+	);
+
+	if (!NavComponent) return null;
+
+	return <NavComponent user={user?.account} navigationItems={navigationItems} />;
+};
+
+export default NavBar;