fix: mobile menu

src/components/Header.tsx

@@ -42,14 +42,15 @@ const Menu = () => {
 				{/* Mobile dropdown - visible only on small screens */}
 				<NavigationMenuItem className="md:hidden">
 					<NavigationMenuTrigger>Menu</NavigationMenuTrigger>
+
 					<NavigationMenuContent>
 						<NavigationMenuLink asChild>
-							<Link href="/docs" className="block px-2 py-1.5">
+							<Link to="/posts/page/1" className="block px-2 py-1.5">
 								Posts
 							</Link>
 						</NavigationMenuLink>
 						<NavigationMenuLink asChild>
-							<Link href="/docs" className="block px-2 py-1.5">
+							<Link to="/about" className="block px-2 py-1.5">
 								About
 							</Link>
 						</NavigationMenuLink>
@@ -65,7 +66,7 @@ const Header = () => {
 	const { theme, setTheme } = useTheme()
 	return (
 		<header className="w-full h-12 flex items-center justify-center border-b fixed top-0 z-20 bg-background">
-			<div className="w-full px-2 md:px-4 flex items-center justify-between">
+			<div className="w-full px-0 md:px-4 flex items-center justify-between">
 				<div className="flex items-center gap-2">
 					<Button variant="ghost" asChild>
 						<Link to="/">
@@ -76,16 +77,19 @@ const Header = () => {
 					</Button>
 				</div>
 				<div className="flex items-center justify-between gap-2">
-					<Menu />
 					<Toggle
 						pressed={theme === "dark"}
 						onPressedChange={() =>
 							setTheme(theme === "dark" ? "light" : "dark")
 						}
 					>
+						{/*
+					
 						<MoonStar />
-						<span className="hidden sm:block">Dark theme</span>
+					*/}
+						<span className="">Dark theme</span>
 					</Toggle>
+					<Menu />
 
 					{/*
           <div className="hidden md:block">