From 4166528b0476dc75effb38c4a768f9aec59737de Mon Sep 17 00:00:00 2001 From: Akshay Date: Thu, 4 Dec 2025 10:44:46 -0500 Subject: [PATCH 1/2] Added onMouseEnter and onMouseLeave for hovering over/out menu to expand/collapse instead of previous manual clicking. --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index da8f242e..6af31806 100644 --- 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", From bf5864944e7937e4f494152e30112d2b87b94b97 Mon Sep 17 00:00:00 2001 From: Akshay Date: Thu, 4 Dec 2025 10:50:46 -0500 Subject: [PATCH 2/2] Changed to hover effect for menu expand/collapse --- components/layout.tsx | 55 ++++++++++++++++++++++++++++++++++++ components/layout/Header.tsx | 36 ++++++++++++++++++++++- 2 files changed, 90 insertions(+), 1 deletion(-) create mode 100644 components/layout.tsx diff --git a/components/layout.tsx b/components/layout.tsx new file mode 100644 index 00000000..de2907e0 --- /dev/null +++ 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 ( + + + +
+ + + + + + + + + +
+ {children} + + + + ) +} \ No newline at end of file diff --git a/components/layout/Header.tsx b/components/layout/Header.tsx index 78255c38..ba0719e3 100644 --- a/components/layout/Header.tsx +++ b/components/layout/Header.tsx @@ -18,7 +18,7 @@ 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(null) const frameworkNode = useRef(null) const gitSelectionNode = useRef(null) @@ -26,6 +26,12 @@ const Header = () => { const router = useRouter() const [starCount, setStarCount] = useState(null) const { user, isLoaded } = useUser() + const [dropdownTimeouts, setDropdownTimeouts] = useState>({ + 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 (