add logout button

web/app/page.tsx

@@ -2,7 +2,7 @@ import { Code, Snippet, Link } from "@nextui-org/react";
 import { button as buttonStyles } from "@nextui-org/theme";
 import { siteConfig } from "@/config/site";
 import { title, subtitle } from "@/components/primitives";
-import { GithubIcon } from "@/components/icons";
+import { GithubIcon, UserIcon } from "@/components/icons";
 import { Counter } from "@/components/counter";
 
 export default function Home() {
@@ -27,6 +27,7 @@ export default function Home() {
 					href={siteConfig.links.github}
 				>
 					<GithubIcon size={20} />
+					<UserIcon size={20} />
 					GitHub
 				</Link>
 			</div>

web/components/icons.tsx

@@ -93,6 +93,34 @@ export const HeartFilledIcon = ({
 	</svg>
 );
 
+export const UserIcon = (props: IconSvgProps) => (
+	<svg
+		aria-hidden="true"
+		fill="none"
+		focusable="false"
+		height="1em"
+		role="presentation"
+		viewBox="0 0 24 24"
+		width="1em"
+		{...props}
+	>
+		<path
+			d="M12 12C14.21 12 16 10.21 16 8C16 5.79 14.21 4 12 4C9.79 4 8 5.79 8 8C8 10.21 9.79 12 12 12Z"
+			stroke="currentColor"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			strokeWidth="2"
+		/>
+		<path
+			d="M2 20.5C2 18.84 7.33 17 12 17C16.67 17 22 18.84 22 20.5"
+			stroke="currentColor"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			strokeWidth="2"
+		/>
+	</svg>
+);
+
 export const SearchIcon = (props: IconSvgProps) => (
 	<svg
 		aria-hidden="true"

web/components/logout-button.tsx

@@ -0,0 +1,20 @@
+'use client';
+import { UserIcon } from "@/components/icons";
+import { button as buttonStyles } from "@nextui-org/theme";
+import { Link } from "@nextui-org/link";
+
+export const LogoutButton = () => {
+	return (
+		<Link
+			isExternal
+			className={buttonStyles({ variant: "bordered", radius: "full" })}
+			onClick={() => {
+				localStorage.removeItem('token');
+				window.location.href = '/';
+			}}
+		>
+			<UserIcon size={20} />
+			Logout
+		</Link>
+	);
+}

web/components/navbar.tsx

@@ -12,6 +12,7 @@ import NextLink from "next/link";
 import clsx from "clsx";
 
 import { ThemeSwitch } from "@/components/theme-switch";
+import { LogoutButton } from "./logout-button";
 import {
 	GithubIcon,
 	HeartFilledIcon,
@@ -57,6 +58,7 @@ export const Navbar = () => {
 						<HeartFilledIcon className="text-danger" />
 					</Link>
 					<ThemeSwitch />
+					<LogoutButton />
 				</NavbarItem>
 			</NavbarContent>
 

web/config/site.ts

@@ -13,40 +13,6 @@ export const siteConfig = {
 			href: "/about",
 		}
 	],
-	navMenuItems: [
-		{
-			label: "Profile",
-			href: "/profile",
-		},
-		{
-			label: "Dashboard",
-			href: "/dashboard",
-		},
-		{
-			label: "Projects",
-			href: "/projects",
-		},
-		{
-			label: "Team",
-			href: "/team",
-		},
-		{
-			label: "Calendar",
-			href: "/calendar",
-		},
-		{
-			label: "Settings",
-			href: "/settings",
-		},
-		{
-			label: "Help & Feedback",
-			href: "/help-feedback",
-		},
-		{
-			label: "Logout",
-			href: "/logout",
-		},
-	],
 	links: {
 		github: "https://github.com/TimothyYe/godns",
 		sponsor: "https://github.com/sponsors/TimothyYe"