Merge pull request #733 from Akshay1833/navbar-changes

nikohoffren · web-flow · commit 33d5ee5d3c9a · 2025-12-04T18:10:35.000+02:00
Navbar Hover Effect changes
diff --git a/components/layout.tsx b/components/layout.tsx
@@ -0,0 +1,55 @@
+import { type Metadata } from 'next'
+import {
+  ClerkProvider,
+  SignInButton,
+  SignUpButton,
+  SignedIn,
+  SignedOut,
+  UserButton,
+} from '@clerk/nextjs'
+import { Geist, Geist_Mono } from 'next/font/google'
+import './globals.css'
+
+const geistSans = Geist({
+  variable: '--font-geist-sans',
+  subsets: ['latin'],
+})
+
+const geistMono = Geist_Mono({
+  variable: '--font-geist-mono',
+  subsets: ['latin'],
+})
+
+export const metadata: Metadata = {
+  title: 'Clerk Next.js Quickstart',
+  description: 'Generated by create next app',
+}
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  return (
+    <ClerkProvider>
+      <html lang="en">
+        <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
+          <header className="flex justify-end items-center p-4 gap-4 h-16">
+            <SignedOut>
+              <SignInButton />
+              <SignUpButton>
+                <button className="bg-[#6c47ff] text-ceramic-white rounded-full font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 cursor-pointer">
+                  Sign Up
+                </button>
+              </SignUpButton>
+            </SignedOut>
+            <SignedIn>
+              <UserButton />
+            </SignedIn>
+          </header>
+          {children}
+        </body>
+      </html>
+    </ClerkProvider>
+  )
+}
diff --git a/components/layout/Header.tsx b/components/layout/Header.tsx
@@ -18,14 +18,20 @@ const Header = () => {
   const [isFrameworkDropdownOpen, setFrameworkDropdownOpen] = useState(false)
   const [isGitSelectionDropdownOpen, setGitSelectionDropdownOpen] =
     useState(false)
-  const [isRoadmapDropdownOpen, setRoadmapDropdownOpen] = useState(false)
+  const [isRoadmapDropdownOpen,  setRoadmapDropdownOpen ] = useState(false)
   const node = useRef<HTMLLIElement | null>(null)
   const frameworkNode = useRef<HTMLLIElement | null>(null)
   const gitSelectionNode = useRef<HTMLLIElement | null>(null)
   const roadmapNode = useRef<HTMLLIElement | null>(null)
   const router = useRouter()
   const [starCount, setStarCount] = useState<number | null>(null)
   const { user, isLoaded } = useUser()
+  const [dropdownTimeouts, setDropdownTimeouts] = useState<Record<string, NodeJS.Timeout | null>>({
+    language: null,
+    framework: null,
+    git: null,
+    roadmap: null,
+  })
 
   useEffect(() => {
     fetch('/api/repo-stats')
@@ -117,6 +123,26 @@ const Header = () => {
     setGitSelectionDropdownOpen(false)
   }
 
+  const handleMouseEnter = (menu: string) => {
+    if (dropdownTimeouts[menu]) {
+      clearTimeout(dropdownTimeouts[menu]) // Cancel the collapse timeout for this menu
+    }
+    if (menu === 'language') setLanguageDropdownOpen(true)
+    if (menu === 'framework') setFrameworkDropdownOpen(true)
+    if (menu === 'git') setGitSelectionDropdownOpen(true)
+    if (menu === 'roadmap') setRoadmapDropdownOpen(true)
+  }
+
+  const handleMouseLeave = (menu: string) => {
+    const timeout = setTimeout(() => {
+      if (menu === 'language') setLanguageDropdownOpen(false)
+      if (menu === 'framework') setFrameworkDropdownOpen(false)
+      if (menu === 'git') setGitSelectionDropdownOpen(false)
+      if (menu === 'roadmap') setRoadmapDropdownOpen(false)
+    }, 100)
+    setDropdownTimeouts((prev) => ({ ...prev, [menu]: timeout }))
+  }
+
   return (
     <nav className='border-b border-gray-200 bg-gray-100 shadow-md dark:border-gray-900'>
       <div className='modern-container'>
@@ -135,6 +161,8 @@ const Header = () => {
                 <div
                   className='relative'
                   ref={node as React.RefObject<HTMLDivElement>}
+                  onMouseEnter={() => handleMouseEnter('language')}
+                  onMouseLeave={() => handleMouseLeave('language')}
                 >
                   <button
                     onClick={toggleLanguageDropdown}
@@ -185,6 +213,8 @@ const Header = () => {
                 <div
                   className='relative'
                   ref={frameworkNode as React.RefObject<HTMLDivElement>}
+                  onMouseEnter={() => handleMouseEnter('framework')}
+                  onMouseLeave={() => handleMouseLeave('framework')}
                 >
                   <button
                     onClick={toggleFrameworkDropdown}
@@ -235,6 +265,8 @@ const Header = () => {
                 <div
                   className='relative'
                   ref={gitSelectionNode as React.RefObject<HTMLDivElement>}
+                  onMouseEnter={() => handleMouseEnter('git')}
+                  onMouseLeave={() => handleMouseLeave('git')}
                 >
                   <button
                     onClick={toggleGitSelectionDropdown}
@@ -283,6 +315,8 @@ const Header = () => {
                 <div
                   className='relative'
                   ref={roadmapNode as React.RefObject<HTMLDivElement>}
+                  onMouseEnter={() => handleMouseEnter('roadmap')}
+                  onMouseLeave={() => handleMouseLeave('roadmap')}
                 >
                   <button
                     onClick={toggleRoadmapDropdown}
diff --git a/package.json b/package.json
@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@ant-design/icons": "^6.0.0",
-    "@clerk/nextjs": "^6.35.0",
+    "@clerk/nextjs": "^6.35.6",
     "@clerk/themes": "^2.2.3",
     "@heroicons/react": "^2.0.18",
     "framer-motion": "^12.0.0",
