"use client"; import { useState, useRef, useEffect } from "react"; import type { ForwardRefExoticComponent, RefAttributes } from "react"; import { motion, AnimatePresence } from "motion/react"; import HomeIcon from "../ui/home-icon"; import LayoutDashboardIcon from "../ui/layout-dashboard-icon"; import WalletIcon from "../ui/wallet-icon"; import UserIcon from "../ui/users-icon"; import GearIcon from "../ui/gear-icon"; import BugIcon from "../ui/bug-icon"; import UnorderedListIcon from "../ui/unordered-list-icon"; import QuestionMark from "../ui/question-mark"; import MoonIcon from "../ui/moon-icon"; import FilledBellIcon from "../ui/filled-bell-icon"; import LogoutIcon from "../ui/logout-icon"; import LockIcon from "../ui/lock-icon"; import RightChevron from "../ui/right-chevron"; import Image from "next/image"; import { AnimatedIconHandle, AnimatedIconProps } from "../ui/types"; const TufLogo = () => ( <> {/* Light mode logos */}

{/* Full screen */}

{/* Small screen */}

{/* Dark mode logos */}

{/* Full screen */}

{/* Small screen */}

); const NavItem = ({ icon: Icon, label, isAnimated, animationsEnabled, }: { icon: ForwardRefExoticComponent< AnimatedIconProps & RefAttributes >; label: string; isAnimated?: boolean; animationsEnabled: boolean; }) => { const [isHovered, setIsHovered] = useState(false); const ref = useRef(null); const handleMouseEnter = () => { setIsHovered(true); if (isAnimated && animationsEnabled) { ref.current?.startAnimation(); } }; const handleMouseLeave = () => { setIsHovered(false); if (isAnimated && animationsEnabled) { ref.current?.stopAnimation(); } }; useEffect(() => { if (!isAnimated) { ref.current?.stopAnimation(); } }, [isAnimated]); return ( {label} ); }; const DropdownItem = ({ icon: Icon, label, locked = false, hasChevron = false, isLogout = false, isAnimated = false, animationsEnabled = true, }: { icon: ForwardRefExoticComponent< AnimatedIconProps & RefAttributes >; label: string; locked?: boolean; hasChevron?: boolean; isLogout?: boolean; isAnimated?: boolean; animationsEnabled?: boolean; }) => { const [isHovered, setIsHovered] = useState(false); const ref = useRef(null); const handleMouseEnter = () => { setIsHovered(true); if (isAnimated && animationsEnabled) { ref.current?.startAnimation(); } }; const handleMouseLeave = () => { setIsHovered(false); if (isAnimated && animationsEnabled) { ref.current?.stopAnimation(); } }; return (

{label}

{locked && } {hasChevron && ( )}

); }; export default function TakeuforwardNavbar({ isAnimated, }: { isAnimated?: boolean; }) { const [isDropdownOpen, setIsDropdownOpen] = useState(false); const dropdownRef = useRef(null); // Use the prop directly with fallback to true const animationsEnabled = isAnimated ?? true; useEffect(() => { const handleClickOutside = (event: MouseEvent) => { if ( dropdownRef.current && !dropdownRef.current.contains(event.target as Node) ) { setIsDropdownOpen(false); } }; document.addEventListener("mousedown", handleClickOutside); return () => document.removeEventListener("mousedown", handleClickOutside); }, []); return (

setIsDropdownOpen(!isDropdownOpen)} className="group flex cursor-pointer items-center" >

{isDropdownOpen && ( )}

); }

Takeuforward Navbar

Platform

Category