[Responsive] Addded nav links to the dropdown menu

ZeyXs · Oct 10, 2024 · 6074ec8 · 6074ec8
1 parent 4663569
commit 6074ec8
Show file tree

Hide file tree

Showing 4 changed files with 101 additions and 51 deletions.
diff --git a/src/components/navbar/DesktopMenu.tsx b/src/components/navbar/DesktopMenu.tsx
@@ -0,0 +1,25 @@
+import { FaArrowRight } from "react-icons/fa";
+import { NavLink } from "./Navbar";
+import NavbarButton from "./NavbarButton";
+import NavbarLink from "./NavbarLink";
+
+type DesktopMenuProps = {
+  navigate: (path: string) => void;
+  navLinks: NavLink[];
+};
+
+const DesktopMenu: React.FC<DesktopMenuProps> = ({ navigate, navLinks }) => (
+  <div className="hidden lg:flex lg:flex-row lg:space-x-12 lg:items-center lg:mr-4 z-50">
+    {navLinks.map((link, index) => (
+      <NavbarLink key={index} name={link.name} onClick={() => navigate(link.path)} />
+    ))}
+    <NavbarButton onClick={() => console.log('Contact button clicked')}>
+      <div className="flex flex-row space-x-2 text-white items-center justify-center">
+        <div className="font-fira-code text-sm">Blog</div>
+        <FaArrowRight size={12} />
+      </div>
+    </NavbarButton>
+  </div>
+);
+
+export default DesktopMenu;
diff --git a/src/components/navbar/DropdownMenu.tsx b/src/components/navbar/DropdownMenu.tsx
@@ -0,0 +1,35 @@
+import { FaArrowRight } from "react-icons/fa";
+import { NavLink } from "./Navbar";
+import NavbarButton from "./NavbarButton";
+import NavbarLink from "./NavbarLink";
+
+type DropdownMenuProps = {
+  terminalText: string;
+  isCursorVisible: boolean;
+  navigate: (path: string) => void;
+  navLinks: NavLink[];
+};
+
+const DropdownMenu = ({ terminalText, isCursorVisible, navigate, navLinks }: DropdownMenuProps) => (
+  <div className="lg:hidden fixed top-0 left-0 w-full h-[480px] bg-gradient-to-b from-black to-[#1c1c1c] border-b-2 border-[#cdcdcd] bg-opacity-50">
+    <div className="flex flex-col items-center justify-center space-y-10 mt-32 text-white text-xl z-50">
+      {navLinks.map((link, index) => (
+        <NavbarLink key={index} name={link.name} onClick={() => navigate(link.path)} />
+      ))}
+      <NavbarButton onClick={() => console.log('Contact button clicked')}>
+        <div className="flex flex-row space-x-2 text-white items-center justify-center">
+          <div className="font-fira-code text-xl">Blog</div>
+          <FaArrowRight size={12} />
+        </div>
+      </NavbarButton>
+    </div>
+    <div className="text-[#cdcdcd] absolute bottom-0 p-2">
+      <p className="font-fira-code text-sm">
+        basile@desktop:~# <span>{terminalText}</span>
+        <span className="text-[7px]" style={{ opacity: isCursorVisible ? 0 : 1 }}>▄▄</span>
+      </p>
+    </div>
+  </div>
+);
+
+export default DropdownMenu;
diff --git a/src/components/navbar/Navbar.tsx b/src/components/navbar/Navbar.tsx
@@ -1,100 +1,88 @@
-import { FaArrowRight } from "react-icons/fa";
-
 import Logo from '../Logo';
 import NavbarButton from './NavbarButton';
 import NavbarContent from './NavbarContent';
-import NavbarLink from './NavbarLink';
 import { useNavigate } from "react-router-dom";
 import { useEffect, useState } from "react";
 import { IoMenu, IoClose } from "react-icons/io5";
-import { motion } from "framer-motion";
 import { useTypewriter } from "react-simple-typewriter";
+import DesktopMenu from './DesktopMenu';
+import DropdownMenu from './DropdownMenu';
 
-export default function Navbar() {
+// Définition des types pour les liens de navigation
+export type NavLink = {
+  name: string;
+  path: string;
+};
 
-  const [isDropdownNavToggled, setDropdownNavToggled] = useState(false);
-  const [isCursorVisible, setCursorVisible] = useState(true)
-  const [isShortLogo, setIsShortLogo] = useState(false);
+export default function Navbar() {
+  const [isDropdownNavToggled, setDropdownNavToggled] = useState<boolean>(false);
+  const [isCursorVisible, setCursorVisible] = useState<boolean>(true);
+  const [isShortLogo, setIsShortLogo] = useState<boolean>(false);
 
   const navigate = useNavigate();
   const [terminalText, _] = useTypewriter({
-    words: [":(){ :|:& };:", "sudo rm -rf /*", "aptitude -v moo", "alias istg='sudo'", "make love not war", "cowsay 'Moew!'", "echo 'don't nod' | rev"],
+    words: [":(){ :|:& };:", "sudo rm -rf /*", "aptitude -v moo", "alias please='sudo'", "make love not war", "cowsay 'Moew!'", "echo 'don't nod' | rev"],
     loop: 0,
     typeSpeed: 70,
     deleteSpeed: 50,
     delaySpeed: 495
   });
 
+  // Liste des liens de navigation avec un typage clair
+  const navLinks: NavLink[] = [
+    { name: "> mes-projets", path: "/" },
+    { name: "> mes-compétences", path: "/" },
+    { name: "> mes-expériences", path: "/" }
+  ];
+
   const handleDropdownNav = () => {
     setDropdownNavToggled(!isDropdownNavToggled);
-  }
+  };
 
   const handleResize = () => {
-    if (window.innerWidth <= 1024) {
-      setIsShortLogo(true);
-    } else {
-      setIsShortLogo(false);
-    }
+    setIsShortLogo(window.innerWidth <= 1024);
   };
 
   useEffect(() => {
     handleResize();
     window.addEventListener('resize', handleResize);
-    return () => {
-      window.removeEventListener('resize', handleResize);
-    };
+    return () => window.removeEventListener('resize', handleResize);
   }, []);
 
   useEffect(() => {
     if (isDropdownNavToggled) {
-      const interval = setInterval(() => {
-        setCursorVisible(prev => !prev);
-      }, 500);
-
+      const interval = setInterval(() => setCursorVisible(prev => !prev), 500);
       return () => clearInterval(interval);
     }
   }, [isDropdownNavToggled]);
 
   return (
     <nav className="flex flex-row items-center justify-between p-4">
-
       <div className="z-50">
         <Logo onClick={() => navigate('/')} scale="90" short={isShortLogo} />
       </div>
 
       <NavbarContent>
-
+        {/* Menu pour mobile */}
         <div className="flex lg:hidden z-50">
           <NavbarButton onClick={handleDropdownNav}>
             {isDropdownNavToggled ? <IoClose size={30} /> : <IoMenu size={30} />}
           </NavbarButton>
         </div>
 
-        <div className="hidden lg:flex lg:flex-row lg:space-x-12 lg:items-center lg:mr-4 z-50">
-          <NavbarLink name="> mes-projets" onClick={() => navigate('/')} />
-          <NavbarLink name="> mes-compétences" onClick={() => navigate('/')} />
-          <NavbarLink name="> mes-expériences" onClick={() => navigate('/')} />
-          <NavbarButton onClick={() => console.log('Contact button clicked')}>
-            <div className="flex flex-row space-x-2 text-white items-center justify-center">
-              <div className="font-fira-code text-sm">Blog</div>
-              <FaArrowRight size={12} />
-            </div>
-          </NavbarButton>
-        </div>
-
+        {/* Menu pour desktop */}
+        <DesktopMenu navigate={navigate} navLinks={navLinks} />
       </NavbarContent>
 
+      {/* Dropdown menu pour mobile */}
       {isDropdownNavToggled && (
-        <div className="lg:hidden fixed top-0 left-0 w-full h-[450px] bg-gradient-to-b from-black to-[#1c1c1c] border-b-2 border-[#cdcdcd] bg-opacity-50">
-          <div className="text-[#cdcdcd] absolute bottom-0 p-2">
-            <p className="font-fira-code text-sm">
-              basile@desktop:~# <span>{terminalText}</span>
-              <span className="text-[7px]" style={{ opacity: isCursorVisible ? 0 : 1 }}>▄▄</span>
-            </p>
-          </div>
-        </div>
+        <DropdownMenu 
+          terminalText={terminalText}
+          isCursorVisible={isCursorVisible}
+          navigate={navigate}
+          navLinks={navLinks}
+        />
       )}
-
     </nav>
   );
 }
diff --git a/src/components/navbar/NavbarLink.tsx b/src/components/navbar/NavbarLink.tsx
@@ -1,12 +1,14 @@
 interface NavbarLinkProps {
-    name: string;
-    onClick: () => void;
-};
+  name: string;
+  onClick: () => void;
+}
 
 export default function NavbarLink({ name, onClick }: NavbarLinkProps) {
   return (
-    <li>
-      <div onClick={onClick} className="font-fira-code text-white cursor-pointer select-none">{name}</div>
-    </li>
+    <div
+      onClick={onClick}
+      className="font-fira-code text-white cursor-pointer select-none">
+      {name}
+    </div>
   );
 }