From 6d9974c70d37fd94ca5797887a0bb1e38f3cbc22 Mon Sep 17 00:00:00 2001 From: phibkro <71797726+phibkro@users.noreply.github.com> Date: Thu, 10 Apr 2025 11:30:56 +0200 Subject: [PATCH 1/5] fix: :bug: hide navbar on desktop --- src/hooks/use-mobile.tsx | 19 ++++++ src/routes/_home.tsx | 128 ++++++++++++++++++++------------------- 2 files changed, 86 insertions(+), 61 deletions(-) create mode 100644 src/hooks/use-mobile.tsx diff --git a/src/hooks/use-mobile.tsx b/src/hooks/use-mobile.tsx new file mode 100644 index 00000000..6c79753e --- /dev/null +++ b/src/hooks/use-mobile.tsx @@ -0,0 +1,19 @@ +import { useEffect, useState } from "react"; + +const MOBILE_BREAKPOINT = 768; + +export function useIsMobile() { + const [isMobile, setIsMobile] = useState(undefined); + + useEffect(() => { + const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`); + const onChange = () => { + setIsMobile(window.innerWidth < MOBILE_BREAKPOINT); + }; + mql.addEventListener("change", onChange); + setIsMobile(window.innerWidth < MOBILE_BREAKPOINT); + return () => mql.removeEventListener("change", onChange); + }, []); + + return !!isMobile; +} diff --git a/src/routes/_home.tsx b/src/routes/_home.tsx index 2cd09e41..6379d5df 100644 --- a/src/routes/_home.tsx +++ b/src/routes/_home.tsx @@ -15,6 +15,7 @@ import { DrawerTrigger, } from "~/components/ui/drawer"; import "~/home.css"; +import { useIsMobile } from "~/hooks/use-mobile"; import { navRoutes } from "~/routes"; // biome-ignore lint/style/noDefaultExport: Route Modules require default export https://reactrouter.com/start/framework/route-module @@ -30,23 +31,30 @@ export default function Layout() { } function AppHeader() { + const isMobile = useIsMobile(); + return (
-
-
- vektorprogrammet logo - -
-
-
- -
- + {isMobile ? ( + + ) : ( + <> +
+
+ vektorprogrammet logo + +
+
+
+ +
+ + )}
); } @@ -109,53 +117,51 @@ const MobileMenu = ({ routes, }: { routes: Array<{ name: string; path: To }> }) => { return ( -
- - -
- -
- - - - -
-
    - {routes.map((route) => ( -
  • - - {route.name} - -
    • - ))} -
-
- -
+ + +
+ +
+ + + + +
+
    + {routes.map((route) => ( +
  • + + {route.name} + +
    • + ))} +
+
+
- - - - - - - - -
+
+ + + + + + + + ); }; From 6d33931e01d963d38065dacd4209383f5c411eab Mon Sep 17 00:00:00 2001 From: phibkro <71797726+phibkro@users.noreply.github.com> Date: Thu, 10 Apr 2025 13:46:24 +0200 Subject: [PATCH 2/5] fix: :bug: fix navbar flickering on mobile navigation --- src/hooks/use-mobile.tsx | 19 ------------------- src/lib/utils.ts | 13 +++++++++++++ src/routes/_home.tsx | 6 ++++-- 3 files changed, 17 insertions(+), 21 deletions(-) delete mode 100644 src/hooks/use-mobile.tsx diff --git a/src/hooks/use-mobile.tsx b/src/hooks/use-mobile.tsx deleted file mode 100644 index 6c79753e..00000000 --- a/src/hooks/use-mobile.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { useEffect, useState } from "react"; - -const MOBILE_BREAKPOINT = 768; - -export function useIsMobile() { - const [isMobile, setIsMobile] = useState(undefined); - - useEffect(() => { - const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`); - const onChange = () => { - setIsMobile(window.innerWidth < MOBILE_BREAKPOINT); - }; - mql.addEventListener("change", onChange); - setIsMobile(window.innerWidth < MOBILE_BREAKPOINT); - return () => mql.removeEventListener("change", onChange); - }, []); - - return !!isMobile; -} diff --git a/src/lib/utils.ts b/src/lib/utils.ts index c2d8c5f2..c9473f6d 100644 --- a/src/lib/utils.ts +++ b/src/lib/utils.ts @@ -4,3 +4,16 @@ import { twMerge } from "tailwind-merge"; export function cn(...inputs: Array) { return twMerge(clsx(inputs)); } + +/** + * Size breakpoints in pixels based on Tailwind CSS defaults. + * + * https://tailwindcss.com/docs/responsive-design + */ +export const breakpointPixels = { + sm: 640, + md: 768, + lg: 1024, + xl: 1280, + "2xl": 1536, +} as const; diff --git a/src/routes/_home.tsx b/src/routes/_home.tsx index 6379d5df..214db8ce 100644 --- a/src/routes/_home.tsx +++ b/src/routes/_home.tsx @@ -1,5 +1,6 @@ import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; import { SiFacebook } from "@icons-pack/react-simple-icons"; +import { useViewportSize } from "@mantine/hooks"; import { FolderOpen, Mail, MapPin } from "lucide-react"; import { motion } from "motion/react"; import { Link, NavLink, Outlet, type To } from "react-router"; @@ -15,7 +16,7 @@ import { DrawerTrigger, } from "~/components/ui/drawer"; import "~/home.css"; -import { useIsMobile } from "~/hooks/use-mobile"; +import { breakpointPixels } from "~/lib/utils"; import { navRoutes } from "~/routes"; // biome-ignore lint/style/noDefaultExport: Route Modules require default export https://reactrouter.com/start/framework/route-module @@ -31,7 +32,8 @@ export default function Layout() { } function AppHeader() { - const isMobile = useIsMobile(); + const { width } = useViewportSize(); + const isMobile = width < breakpointPixels.sm; return (
From 93b7e6a911cf21211c841e8a43304bc93cb95df1 Mon Sep 17 00:00:00 2001 From: phibkro <71797726+phibkro@users.noreply.github.com> Date: Thu, 10 Apr 2025 13:46:43 +0200 Subject: [PATCH 3/5] docs: :memo: add docstring for cn --- src/lib/utils.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/lib/utils.ts b/src/lib/utils.ts index c9473f6d..f7786b1d 100644 --- a/src/lib/utils.ts +++ b/src/lib/utils.ts @@ -1,6 +1,12 @@ import { type ClassValue, clsx } from "clsx"; import { twMerge } from "tailwind-merge"; +/** + * Merge and deduplicate Tailwind classes without style conflicts + * + * @param inputs - Class names to merge + * @returns A string of class names, merged and deduplicated + */ export function cn(...inputs: Array) { return twMerge(clsx(inputs)); } From a1339f9eeb3973f477f0acd4e9d64e4cf788c356 Mon Sep 17 00:00:00 2001 From: phibkro <71797726+phibkro@users.noreply.github.com> Date: Thu, 10 Apr 2025 14:39:40 +0200 Subject: [PATCH 4/5] fix: :wheelchair: fix accessibility and html structure --- src/routes/_home.tsx | 75 +++++++++++++++++++++++++------------------- 1 file changed, 42 insertions(+), 33 deletions(-) diff --git a/src/routes/_home.tsx b/src/routes/_home.tsx index 214db8ce..cc215ca3 100644 --- a/src/routes/_home.tsx +++ b/src/routes/_home.tsx @@ -13,6 +13,7 @@ import { DrawerDescription, DrawerFooter, DrawerHeader, + DrawerTitle, DrawerTrigger, } from "~/components/ui/drawer"; import "~/home.css"; @@ -121,45 +122,53 @@ const MobileMenu = ({ return ( -
- + + {"Tor"} +
- - -
-
    - {routes.map((route) => ( -
  • - - {route.name} - -
    • - ))} -
-
- -
+ + {"Navigasjonsmeny"} + + + +
+
    + {routes.map((route) => ( +
  • + + {route.name} + +
    • + ))} +
+
+
- +
+ - - + + {"Close"} From 2a66b2f8564e657c3fc8a26025f28341739629e6 Mon Sep 17 00:00:00 2001 From: phibkro <71797726+phibkro@users.noreply.github.com> Date: Thu, 10 Apr 2025 14:40:19 +0200 Subject: [PATCH 5/5] fix: :lipstick: fix breakpoint styling --- src/routes/_home.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/routes/_home.tsx b/src/routes/_home.tsx index cc215ca3..ecc85828 100644 --- a/src/routes/_home.tsx +++ b/src/routes/_home.tsx @@ -5,7 +5,7 @@ import { FolderOpen, Mail, MapPin } from "lucide-react"; import { motion } from "motion/react"; import { Link, NavLink, Outlet, type To } from "react-router"; import { type Sponsor, getSponsors } from "~/api/sponsor"; -import { Button, buttonVariants } from "~/components/ui/button"; +import { buttonVariants } from "~/components/ui/button"; import { Drawer, DrawerClose, @@ -17,7 +17,7 @@ import { DrawerTrigger, } from "~/components/ui/drawer"; import "~/home.css"; -import { breakpointPixels } from "~/lib/utils"; +import { breakpointPixels, cn } from "~/lib/utils"; import { navRoutes } from "~/routes"; // biome-ignore lint/style/noDefaultExport: Route Modules require default export https://reactrouter.com/start/framework/route-module @@ -34,7 +34,7 @@ export default function Layout() { function AppHeader() { const { width } = useViewportSize(); - const isMobile = width < breakpointPixels.sm; + const isMobile = width < breakpointPixels.md; return (
@@ -53,7 +53,7 @@ function AppHeader() {
-
+