fix(web): navbar responsiveness

Author: AmanVarshney01

apps/web/src/app/(home)/_components/navbar.tsx

@@ -116,7 +116,7 @@ export default function Navbar() {
 						</span>
 					</Link>
 
-					<div className="hidden items-center gap-4 md:flex">
+					<div className="hidden items-center gap-4 lg:flex">
 						<div className="flex items-center gap-1">
 							{desktopNavLinks.map((link) => (
 								<Link
@@ -156,7 +156,7 @@ export default function Navbar() {
 						<ThemeToggle />
 					</div>
 
-					<div className="flex items-center gap-2 md:hidden">
+					<div className="flex items-center gap-2 lg:hidden">
 						<ThemeToggle />
 						<button
 							type="button"
@@ -183,7 +183,7 @@ export default function Navbar() {
 							animate={{ opacity: 1 }}
 							exit={{ opacity: 0 }}
 							transition={{ duration: 0.2, ease: "easeInOut" }}
-							className="fixed inset-0 z-[98] bg-background/50 backdrop-blur-sm md:hidden"
+							className="fixed inset-0 z-[98] bg-background/50 backdrop-blur-sm lg:hidden"
 							onClick={closeMobileMenu}
 							aria-hidden="true"
 						/>
@@ -193,7 +193,7 @@ export default function Navbar() {
 							animate={{ x: 0 }}
 							exit={{ x: "100%" }}
 							transition={{ type: "spring", stiffness: 300, damping: 30 }}
-							className="fixed top-0 right-0 bottom-0 z-[99] h-full w-full max-w-xs overflow-y-auto border-border border-l bg-background shadow-lg md:hidden"
+							className="fixed top-0 right-0 bottom-0 z-[99] h-full w-full max-w-xs overflow-y-auto border-border border-l bg-background shadow-lg lg:hidden"
 							aria-modal="true"
 						>
 							<div className="flex h-16 items-center justify-between border-border border-b px-4">