styles(website): resolve bugs in menu

halvaradop · halvaradop · commit 14e05968bb4a · 2025-06-14T16:26:13.000-05:00
diff --git a/app/src/app/docs/animations/page.mdx b/app/src/app/docs/animations/page.mdx
@@ -4,7 +4,13 @@ import { SectionLayout } from "@/ui/layout/section"
 import { CallToAction } from "@/ui/call-to-action"
 
 <SectionLayout>
-    <TextEffect className="mb-4 text-3xl/relaxed font-medium" as="h1" preset="fade-in-blur" speedReveal={1.1} speedSegment={0.5}>
+    <TextEffect
+        className="mb-4 text-xl/relaxed truncate font-medium base:text-3xl/relaxed"
+        as="h1"
+        preset="fade-in-blur"
+        speedReveal={1.1}
+        speedSegment={0.5}
+    >
         {`@halvaradop/tailwindcss-animations`}
     </TextEffect>
     <TextEffect className="text-muted text-lg" preset="fade-in-blur" speedReveal={1} speedSegment={0.2}>
diff --git a/app/src/app/docs/utilities/page.mdx b/app/src/app/docs/utilities/page.mdx
@@ -4,7 +4,13 @@ import { SectionLayout } from "@/ui/layout/section"
 import { CallToAction } from "@/ui/call-to-action"
 
 <SectionLayout>
-    <TextEffect className="mb-4 text-3xl/relaxed font-medium" as="h1" preset="fade-in-blur" speedReveal={1.1} speedSegment={0.5}>
+    <TextEffect
+        className="mb-4 text-xl/relaxed truncate font-medium base:text-3xl/relaxed"
+        as="h1"
+        preset="fade-in-blur"
+        speedReveal={1.1}
+        speedSegment={0.5}
+    >
         {`@halvaradop/tailwindcss-utilities`}
     </TextEffect>
     <TextEffect className="text-muted text-lg" preset="fade-in-blur" speedReveal={1} speedSegment={0.2}>
diff --git a/app/src/app/layout.tsx b/app/src/app/layout.tsx
@@ -43,7 +43,7 @@ export default function RootLayout({ children }: LayoutProps) {
     return (
         <html className="scroll-smooth" lang="en">
             <body
-                className={`${inter.className} min-h-screen grid grid-rows-[auto,1fr_auto] antialiased relative overflow-x-hidden bg-black scroll:w-2 track:my-2 thumb:rounded thumb:bg-gray-100 has-[header.open]:scroll:bg-gray-300`}
+                className={`${inter.className} min-h-screen antialiased relative overflow-x-hidden bg-black scrollbar:w-2 track:my-2 thumb:rounded thumb:bg-gray-100 has-[header.open]:scroll:bg-gray-300`}
             >
                 <Header />
                 {children}
diff --git a/app/src/ui/community/community-cards.tsx b/app/src/ui/community/community-cards.tsx
@@ -15,7 +15,7 @@ export const CommunitySection = () => {
             <section className="mx-10 border-x border-solid border-border base:mx-16 lg:min-h-[calc(100dvh-4rem)] lg:flex lg:flex-col">
                 <SegmentAnimation
                     title="Ways to Contribute"
-                    description="Tailwind CSS v4 brings a modern engine — and our utilities are built for it. We’ve designed every package to integrate seamlessly using the new configuration API, variant generator, and dynamic styling support."
+                    description="Join the @halvaradop/tailwindcss community! Explore ways to contribute, collaborate, and connect with others to help shape the future of our utilities and ecosystem."
                 />
                 <div className="grid text-primary text-left a:border-t a:border-solid a:border-border lg:flex-100 lg:grid-cols-3 lg:a:border-r lg:a:nth-[3]:border-r-0 lg:a:nth-[5]:border-r-0 lg:a:nth-[4]:col-span-2 xl:min-h-[30dvw] xl:a:nth-[2]:border-r">
                     {communityCards.map((item, idx) => (
diff --git a/app/src/ui/globals.css b/app/src/ui/globals.css
@@ -67,6 +67,10 @@ It is generating errors to load animations styles
             @apply text-primary;
         }
 
+        body:has(> header.open) {
+            overflow-y: hidden;
+        }
+
         main {
             &#docs-layout {
                 @apply text-primary;
@@ -147,5 +151,11 @@ It is generating errors to load animations styles
                 }
             }
         }
+
+        @media (min-width: 900px) {
+            body:has(> header.open) {
+                overflow-y: auto;
+            }
+        }
     }
 }
diff --git a/app/src/ui/header/header-menu.tsx b/app/src/ui/header/header-menu.tsx
@@ -3,10 +3,10 @@ import { motion } from "motion/react"
 import { itemVariants, menuVariants } from "@/ui/motion-config/menu.motion"
 import { TextScramble } from "@/ui/motion/text-scramble"
 
-export const HeaderMenu = () => {
+export const HeaderMenu = ({ onLinkClick }: { onLinkClick?: () => void } = {}) => {
     return (
         <motion.div
-            className="w-10/12 max-w-md absolute inset-y-0 right-0 z-10 border border-solid border-border bg-black [--nav-menu:100%] base:w-auto base:max-w-none base:inset-0 base:relative base:bg-transparent base:border-0 base:[--nav-menu:0%]"
+            className="w-10/12 max-w-md absolute inset-y-0 right-0 z-20 border border-solid border-border bg-black [--nav-menu:100%] base:w-auto base:max-w-none base:inset-0 base:relative base:bg-transparent base:border-0 base:[--nav-menu:0%]"
             variants={menuVariants}
             initial="hidden"
             animate="visible"
@@ -22,40 +22,44 @@ export const HeaderMenu = () => {
                         Product
                     </motion.li>
                     <motion.li className="[--nav-li:100%] base:[--nav-li:0%]" variants={itemVariants}>
-                        <Link href="/">
+                        <Link href="/" onClick={onLinkClick}>
                             <TextScramble>HOME</TextScramble>
                         </Link>
                     </motion.li>
                     <motion.li className="[--nav-li:100%] base:[--nav-li:0%]" variants={itemVariants}>
-                        <Link href="/docs">
+                        <Link href="/docs" onClick={onLinkClick}>
                             <TextScramble>DOCS</TextScramble>
                         </Link>
                     </motion.li>
                     <motion.li className="[--nav-li:100%] base:[--nav-li:0%]" variants={itemVariants}>
-                        <Link href="/docs/utilities">
+                        <Link href="/docs/utilities" onClick={onLinkClick}>
                             <TextScramble>UTILITIES</TextScramble>
                         </Link>
                     </motion.li>
                     <motion.li className="[--nav-li:100%] base:[--nav-li:0%]" variants={itemVariants}>
-                        <Link href="/docs/animations">
+                        <Link href="/docs/animations" onClick={onLinkClick}>
                             <TextScramble>ANIMATIONS</TextScramble>
                         </Link>
                     </motion.li>
                     <motion.li className="[--nav-li:100%] base:[--nav-li:0%]" variants={itemVariants}>
-                        <Link href="/community">
+                        <Link href="/community" onClick={onLinkClick}>
                             <TextScramble>COMMUNITY</TextScramble>
                         </Link>
                     </motion.li>
                 </ul>
                 <ul className="mt-10 text-fluid-lg grid grid-cols-2 items-center font-medium li:hover:text-primary base:hidden">
                     <li className="mb-5 text-primary text-xl font-semibold col-span-2">Resources</li>
                     <li>
-                        <Link href="https://github.com/halvaradop/tailwindcss-utilities" target="_blank">
+                        <Link href="https://github.com/halvaradop/tailwindcss-utilities" target="_blank" onClick={onLinkClick}>
                             Github
                         </Link>
                     </li>
                     <li>
-                        <Link href="https://www.npmjs.com/package/@halvaradop/tailwindcss-utilities" target="_blank">
+                        <Link
+                            href="https://www.npmjs.com/package/@halvaradop/tailwindcss-utilities"
+                            target="_blank"
+                            onClick={onLinkClick}
+                        >
                             NPM
                         </Link>
                     </li>
diff --git a/app/src/ui/header/header.tsx b/app/src/ui/header/header.tsx
@@ -1,7 +1,7 @@
 "use client"
 import Link from "next/link"
 import Image from "next/image"
-import { useEffect, useState } from "react"
+import { useCallback, useEffect, useRef, useState } from "react"
 import { HeaderMenu } from "./header-menu"
 import { AnimatePresence } from "motion/react"
 import { merge } from "@halvaradop/ui-core"
@@ -11,11 +11,18 @@ import arrow from "@/assets/arrow.svg"
 
 export const Header = () => {
     const [isOpen, setIsOpen] = useState(false)
+    const menuRef = useRef<HTMLDivElement>(null)
 
     const handleToggleMenu = () => {
         setIsOpen(!isOpen)
     }
 
+    const handleMenuLinkClick = useCallback(() => {
+        if (window.innerWidth < 900) {
+            setIsOpen(false)
+        }
+    }, [])
+
     useEffect(() => {
         const matchScreen = matchMedia("(min-width: 900px)")
 
@@ -28,27 +35,40 @@ export const Header = () => {
         return () => matchScreen.removeEventListener("change", handleSetMatchMedia)
     }, [])
 
+    useEffect(() => {
+        if (!isOpen) return
+        const handleClickOutside = (event: MouseEvent) => {
+            if (window.innerWidth < 900 && menuRef.current && !menuRef.current.contains(event.target as Node)) {
+                setIsOpen(false)
+            }
+        }
+        document.addEventListener("mousedown", handleClickOutside)
+        return () => document.removeEventListener("mousedown", handleClickOutside)
+    }, [isOpen])
+
     return (
         <header
-            className={merge("flex items-center border-b border-solid border-border", isOpen ? "open" : "")}
+            className={merge("flex items-center border-b border-solid border-border", isOpen && "open")}
             id="halvaradop-tailwindcss-utilities"
         >
             <nav className="flex-100 h-16 ml-10 px-4 border-x border-solid border-border sm:px-6 md:px-8 base:ml-16 base:px-10 base:flex base:items-center base:justify-between base:relative">
-                <div className="w-full h-full flex items-center justify-between relative z-20 base:w-fit">
+                <div className="w-full h-full flex items-center justify-between relative base:w-fit">
                     <h2 className="text-primary base:text-lg">
                         <Link href="/">@halvaradop/tailwindcss</Link>
                     </h2>
                 </div>
-                <AnimatePresence mode="wait">{isOpen && <HeaderMenu />}</AnimatePresence>
+                <div ref={menuRef} style={{ display: "contents" }}>
+                    <AnimatePresence mode="wait">{isOpen && <HeaderMenu onLinkClick={handleMenuLinkClick} />}</AnimatePresence>
+                </div>
             </nav>
             <Button
-                className="w-10 h-16 p-0 relative z-10 hover:bg-transparent base:hidden"
+                className="w-10 h-16 p-0 relative z-30 hover:bg-transparent base:hidden"
                 variant="ghost"
                 onClick={handleToggleMenu}
             >
                 <Image className="hover:cursor-pointer" src={menu} alt="menu icon" />
             </Button>
-            <figure className="group w-10 h-full hidden img:transition-transform img:ease-linear img:duration-300 hover:cursor-pointer base:w-16 base:flex base:items-center base:justify-center base:relative base:overflow-hidden">
+            <figure className="group w-10 h-16 hidden img:transition-transform img:ease-linear img:duration-300 hover:cursor-pointer base:w-16 base:flex base:items-center base:justify-center base:relative base:overflow-hidden">
                 <Image
                     className="-rotate-127 group-hover:-translate-y-14 group-hover:translate-x-14"
                     src={arrow}

Original file line number	Diff line number	Diff line change
`@@ -43,7 +43,7 @@ export default function RootLayout({ children }: LayoutProps) {`
`43`	`43`	`return (`
`44`	`44`	`<html className="scroll-smooth" lang="en">`
`45`	`45`	`<body`
`46`		- className={`${inter.className} min-h-screen grid grid-rows-[auto,1fr_auto] antialiased relative overflow-x-hidden bg-black scroll:w-2 track:my-2 thumb:rounded thumb:bg-gray-100 has-[header.open]:scroll:bg-gray-300`}
	`46`	+ className={`${inter.className} min-h-screen antialiased relative overflow-x-hidden bg-black scrollbar:w-2 track:my-2 thumb:rounded thumb:bg-gray-100 has-[header.open]:scroll:bg-gray-300`}
`47`	`47`	`>`
`48`	`48`	`<Header />`
`49`	`49`	`{children}`
Original file line number	Diff line number	Diff line change
`@@ -67,6 +67,10 @@ It is generating errors to load animations styles`
`67`	`67`	`@apply text-primary;`
`68`	`68`	`}`
`69`	`69`
	`70`	`+ body:has(> header.open) {`
	`71`	`+ overflow-y: hidden;`
	`72`	`+ }`
	`73`	`+`
`70`	`74`	`main {`
`71`	`75`	`&#docs-layout {`
`72`	`76`	`@apply text-primary;`
`@@ -147,5 +151,11 @@ It is generating errors to load animations styles`
`147`	`151`	`}`
`148`	`152`	`}`
`149`	`153`	`}`
	`154`	`+`
	`155`	`+ @media (min-width: 900px) {`
	`156`	`+ body:has(> header.open) {`
	`157`	`+ overflow-y: auto;`
	`158`	`+ }`
	`159`	`+ }`
`150`	`160`	`}`
`151`	`161`	`}`