[Merge branch staging] Responsive Navbar

package.json

@@ -16,6 +16,8 @@
     "react-dom": "^18.2.0",
     "react-icons": "^5.2.1",
     "react-router-dom": "^6.23.1",
+    "react-simple-typewriter": "^5.0.1",
+    "typewriter-effect": "^2.21.0",
     "url": "^0.11.3"
   },
   "devDependencies": {

src/components/Logo.tsx

@@ -3,14 +3,15 @@ import clsx from "clsx";
 interface LogoProps {
   scale?: string;
   onClick: () => void;
+  short?: boolean;
 };
 
-export default function Logo({ scale = '100', onClick }: LogoProps) {
+export default function Logo({ scale = '100', onClick, short }: LogoProps) {
   return (
     <div className={clsx('flex flex-row justify-center items-center space-x-2 select-none cursor-pointer', `scale-${scale}`)} onClick={onClick}>
-      <div className="text-white font-jost-black text-6xl">ZEYX</div>
+      <div className="text-white font-jost-black text-6xl">{short ? 'Z' : 'ZEYX'}</div>
       <div className="w-12 h-12 bg-[#FF6969] rounded-full"></div>
-      <div className="text-white font-libre-barcode text-5xl">DEV</div>
+      <div className="text-white font-libre-barcode text-5xl pl-[3px]">DEV</div>
     </div>
   );
 };

src/components/Navbar.tsx

@@ -30,3 +30,4 @@ export default function Navbar() {
     </nav>
   );
 }
+

src/components/NavbarLink.tsx

@@ -10,3 +10,4 @@ export default function NavbarLink({ name, onClick }: NavbarLinkProps) {
     </li>
   );
 }
+

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;

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;

src/components/navbar/Navbar.tsx

@@ -0,0 +1,88 @@
+import Logo from '../Logo';
+import NavbarButton from './NavbarButton';
+import NavbarContent from './NavbarContent';
+import { useNavigate } from "react-router-dom";
+import { useEffect, useState } from "react";
+import { IoMenu, IoClose } from "react-icons/io5";
+import { useTypewriter } from "react-simple-typewriter";
+import DesktopMenu from './DesktopMenu';
+import DropdownMenu from './DropdownMenu';
+
+// Définition des types pour les liens de navigation
+export type NavLink = {
+  name: string;
+  path: string;
+};
+
+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 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 = () => {
+    setIsShortLogo(window.innerWidth <= 1024);
+  };
+
+  useEffect(() => {
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  useEffect(() => {
+    if (isDropdownNavToggled) {
+      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>
+
+        {/* Menu pour desktop */}
+        <DesktopMenu navigate={navigate} navLinks={navLinks} />
+      </NavbarContent>
+
+      {/* Dropdown menu pour mobile */}
+      {isDropdownNavToggled && (
+        <DropdownMenu 
+          terminalText={terminalText}
+          isCursorVisible={isCursorVisible}
+          navigate={navigate}
+          navLinks={navLinks}
+        />
+      )}
+    </nav>
+  );
+}

src/components/NavbarContent.tsx → src/components/navbar/NavbarContent.tsx

@@ -4,7 +4,7 @@ interface NavbarContentProps {
 
 export default function NavbarContent({ children }: NavbarContentProps) {
   return (
-    <ul className="flex flex-row space-x-12 items-center mr-4">
+    <ul className="flex flex-row items-center">
       {children}
     </ul>
   );

src/components/navbar/NavbarLink.tsx

@@ -0,0 +1,14 @@
+interface NavbarLinkProps {
+  name: string;
+  onClick: () => void;
+}
+
+export default function NavbarLink({ name, onClick }: NavbarLinkProps) {
+  return (
+    <div
+      onClick={onClick}
+      className="font-fira-code text-white cursor-pointer select-none">
+      {name}
+    </div>
+  );
+}

src/pages/HomePage.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 
-import Navbar from '@/components/Navbar';
+import Navbar from '@/components/navbar/Navbar';
 
 const PAGE_NAME: string = 'Home – ZeyX.dev';
 
@@ -10,8 +10,10 @@ export default function HomePage() {
   }, []);
 
   return (
-    <div className="h-screen bg-[#0E0E0E] flex flex-col space-y-2">
-      <Navbar />
+    <div className='h-screen bg-[#0E0E0E]'>
+      <div className="flex flex-col space-y-2">
+        <Navbar />
+      </div>
     </div>
   );
 }