apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-05-11 16:52:38 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor: enhance MobileNav component with click outside detection for improved user interaction

Browse source
This commit is contained in:
Anish Sarkar 2026-03-08 20:56:57 +05:30
parent af77c26572
commit 06e74d5357
1 changed files with 20 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

21
surfsense_web/components/homepage/navbar.tsx
View file

@ -2,7 +2,7 @@
import { IconBrandDiscord, IconBrandReddit, IconMenu2, IconX } from "@tabler/icons-react"; import { IconBrandDiscord, IconBrandReddit, IconMenu2, IconX } from "@tabler/icons-react";
import { AnimatePresence, motion } from "motion/react"; import { AnimatePresence, motion } from "motion/react";
import Link from "next/link"; import Link from "next/link";
import { useEffect, useState } from "react"; import { useEffect, useRef, useState } from "react";
import { SignInButton } from "@/components/auth/sign-in-button"; import { SignInButton } from "@/components/auth/sign-in-button";
import { NavbarGitHubStars } from "@/components/homepage/github-stars-badge"; import { NavbarGitHubStars } from "@/components/homepage/github-stars-badge";
import { Logo } from "@/components/Logo"; import { Logo } from "@/components/Logo";
@ -106,9 +106,28 @@ const DesktopNav = ({ navItems, isScrolled }: any) => {
const MobileNav = ({ navItems, isScrolled }: any) => { const MobileNav = ({ navItems, isScrolled }: any) => {
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const navRef = useRef<HTMLDivElement>(null);
useEffect(() => {
if (!open) return;
const handleClickOutside = (e: MouseEvent | TouchEvent) => {
if (navRef.current && !navRef.current.contains(e.target as Node)) {
setOpen(false);
}
};
document.addEventListener("mousedown", handleClickOutside);
document.addEventListener("touchstart", handleClickOutside);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
document.removeEventListener("touchstart", handleClickOutside);
};
}, [open]);
return ( return (
<motion.div <motion.div
ref={navRef}
animate={{ borderRadius: open ? "4px" : "2rem" }} animate={{ borderRadius: open ? "4px" : "2rem" }}
key={String(open)} key={String(open)}
className={cn( className={cn(