Navbar Update

src/App.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 import { BrowserRouter } from "react-router-dom";
 
-import { Header } from "./components/header/Header";
-import { Footer } from "./components/footer/Footer";
+import { Header } from "./components/layout/header/Header";
+import { Footer } from "./components/layout/footer/Footer";
 
 import { AppRouter } from "./AppRouter";
 

src/AppRouter.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Post } from "./components/posts/post/Post";
+import { Post } from "./components/ui/posts/post/Post";
 import { About } from "./pages/About";
 import { Knowledgers } from "./pages/Knowledgers";
 import { Home } from "./pages/Home";

src/components/footer/Footer.tsx → src/components/layout/footer/Footer.tsx

@@ -1,8 +1,8 @@
 import React, { useContext } from "react";
 
-import TechknowledgeMiniLogo from "../../assets/images/new-logo-darkmode.svg";
-import TechknowledgeMiniLogoLight from "../../assets/images/new-logo-lightmode.svg";
-import { ThemeContext } from "../../context/ThemeContext";
+import TechknowledgeMiniLogo from "../../../assets/images/new-logo-darkmode.svg";
+import TechknowledgeMiniLogoLight from "../../../assets/images/new-logo-lightmode.svg";
+import { ThemeContext } from "../../../context/ThemeContext";
 
 export function Footer() {
   const { darkMode } = useContext(ThemeContext);

src/components/header/Header.tsx → src/components/layout/header/Header.tsx

@@ -3,11 +3,11 @@ import { Moon, Sun } from "@phosphor-icons/react";
 import { Link } from "react-router-dom";
 
 import { Navbar } from "../navbar/Navbar";
-import { ThemeContext } from "../../context/ThemeContext";
+import { ThemeContext } from "../../../context/ThemeContext";
 import styles from "./Header.module.css";
 
-import techknowledgeLogoDark from "../../assets/images/new-logo-darkmode.svg";
-import techknowledgeLogoLight from "../../assets/images/new-logo-lightmode.svg";
+import techknowledgeLogoDark from "../../../assets/images/new-logo-darkmode.svg";
+import techknowledgeLogoLight from "../../../assets/images/new-logo-lightmode.svg";
 
 export function Header() {
   const { darkMode, toggleDarkMode } = useContext(ThemeContext);

src/components/layout/navbar/Navbar.tsx

@@ -0,0 +1,61 @@
+import React, { useContext, useState } from "react";
+import { Link } from "react-router-dom";
+import { List } from "@phosphor-icons/react";
+
+import { ThemeContext } from "../../../context/ThemeContext";
+import { MenuModal } from "../../ui/menuModal/menuModal";
+
+export function Navbar() {
+  const [open, setOpen] = useState(false);
+  const { darkMode } = useContext(ThemeContext);
+
+  const routes = [
+    { path: "/", label: "" },
+    { path: "/about", label: "Sobre" },
+    { path: "/posts", label: "Posts" },
+    { path: "/techlab", label: "TechLab" },
+    { path: "/knowledgers", label: "Knowledgers" },
+  ];
+
+  return (
+    <nav>
+      <button
+        onClick={() => setOpen(!open)}
+        className="absolute right-4 top-8 cursor-pointer md:hidden"
+      >
+        {darkMode ? (
+          <span className="inline-flex items-center justify-center w-12 h-9 border border-white/10 rounded-full">
+            <List
+              size={24}
+              color="#ffffff"
+              className={`transition-all duration-300 ${
+                open
+                  ? "opacity-0 rotate-90 scale-75"
+                  : "opacity-100 rotate-0 scale-100"
+              }`}
+            />
+          </span>
+        ) : (
+          <span className="inline-flex items-center justify-center w-12 h-9 border border-black/10 rounded-full">
+            <List size={24} color="#000000" />
+          </span>
+        )}
+      </button>
+
+      <ul className="hidden md:flex md:items-center gap-4 text-xl">
+        {routes.map(({ path, label }) => (
+          <li key={label} className="relative md:ml-2 md:my-0 my-7">
+            <Link
+              to={path}
+              className="text-base relative after:content-[''] after:absolute after:left-0 after:bottom-[-4px] after:w-full after:h-[2px] dark:after:bg-blue-300 after:bg-blue-500 after:scale-x-0 after:transition-transform after:duration-300 hover:after:scale-x-100"
+            >
+              {label}
+            </Link>
+          </li>
+        ))}
+      </ul>
+
+      <MenuModal isOpen={open} onClose={() => setOpen(false)} routes={routes} />
+    </nav>
+  );
+}

src/components/cardknowledger/CardKnowledger.tsx → src/components/ui/cardknowledger/CardKnowledger.tsx

@@ -1,11 +1,11 @@
 import React, { useEffect, useState } from "react";
 
-import { getUsers } from "../../services/usersService";
+import { getUsers } from "../../../services/usersService";
 import { mockKnowledgers } from "./mockKnowledgers";
 
-import flagBrasil from "../../assets/images/bandeira-de-brasil.png";
-import flagAlagoas from "../../assets/images/bandeira-de-alagoas.png";
-import flagPara from "../../assets/images/bandeira-do-para.png";
+import flagBrasil from "../../../assets/images/bandeira-de-brasil.png";
+import flagAlagoas from "../../../assets/images/bandeira-de-alagoas.png";
+import flagPara from "../../../assets/images/bandeira-do-para.png";
 import { Link } from "react-router";
 
 interface UserProps {

src/components/cardknowledger/mockKnowledgers.ts → src/components/ui/cardknowledger/mockKnowledgers.ts

@@ -1,14 +1,14 @@
-import knowledgerMonique from "../../assets/images/knowledgers/monique.png";
-import knowledgerLeonardo from "../../assets/images/knowledgers/leonardo.png";
-import knowledgerAlves from "../../assets/images/knowledgers/alves.png";
-import knowledgerJoao from "../../assets/images/knowledgers/joao.png";
-import knowledgerDaniel from "../../assets/images/knowledgers/daniel.png";
+import knowledgerMonique from "../../../assets/images/knowledgers/monique.png";
+import knowledgerLeonardo from "../../../assets/images/knowledgers/leonardo.png";
+import knowledgerAlves from "../../../assets/images/knowledgers/alves.png";
+import knowledgerJoao from "../../../assets/images/knowledgers/joao.png";
+import knowledgerDaniel from "../../../assets/images/knowledgers/daniel.png";
 
-import LeonardoProfileImage from "../../assets/images/leonardo-profile-image.png";
-import AlvesProfileImage from "../../assets/images/image-alves-profile.png";
-import MoniqueProfileImage from "../../assets/images/image-monique-profile.png";
-import JoaoProfileImage from "../../assets/images/image-monique-profile.png";
-import DanielProfileImage from "../../assets/images/image-daniel-profile.png";
+import LeonardoProfileImage from "../../../assets/images/leonardo-profile-image.png";
+import AlvesProfileImage from "../../../assets/images/image-alves-profile.png";
+import MoniqueProfileImage from "../../../assets/images/image-monique-profile.png";
+import JoaoProfileImage from "../../../assets/images/image-monique-profile.png";
+import DanielProfileImage from "../../../assets/images/image-daniel-profile.png";
 
 import { GithubLogo, InstagramLogo, LinkedinLogo } from "@phosphor-icons/react";
 

src/components/ui/menuModal/menuModal.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+
+import TechknowledgeLightLogo from "../../../assets/images/new-logo-lightmode.svg";
+import { X } from "@phosphor-icons/react";
+import { Link } from "react-router";
+
+interface RouteProps {
+  path: string;
+  label: string;
+}
+
+interface MenuModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  routes: RouteProps[];
+}
+
+export function MenuModal({ isOpen, onClose, routes }: MenuModalProps) {
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black/30 z-40 flex items-center justify-center md:hidden">
+      <div className="relative bg-white w-[95%] h-[98vh] rounded-2xl py-5 px-2 shadow-lg border-2 border-white/10 flex flex-col justify-between animate-scaleUp">
+        <header className="flex items-center justify-between">
+          <img
+            src={TechknowledgeLightLogo}
+            className="h-[38px] object-cover lg:h-14"
+            alt=""
+          />
+
+          <button
+            onClick={onClose}
+            className="absolute right-2 top-5 cursor-pointer"
+            aria-label="Botão para fechar o menu"
+          >
+            <span className="inline-flex items-center justify-center w-12 h-9 border border-black/10 rounded-full">
+              <X size={24} color="#000000" />
+            </span>
+          </button>
+        </header>
+
+        <ul className="flex flex-col items-start gap-6 mt-6 flex-1">
+          {routes.map(({ path, label }) => (
+            <li key={label}>
+              <Link
+                to={path}
+                onClick={onClose}
+                className="text-xl text-black relative after:content-[''] after:absolute after:left-0 after:bottom-[-4px] after:w-full after:h-[2px] dark:after:bg-blue-300 after:bg-blue-500 after:scale-x-0 after:transition-transform after:duration-300 hover:after:scale-x-100"
+              >
+                {label}
+              </Link>
+            </li>
+          ))}
+        </ul>
+
+        <footer>
+          <p className="text-lg text-black">
+            © Todos os direitos reservados ao Techknowledge.
+          </p>
+        </footer>
+      </div>
+    </div>
+  );
+}

src/components/posts/mockAuthor.ts → src/components/ui/posts/mockAuthor.ts

@@ -1,11 +1,11 @@
-import authorLeticia from "../../assets/images/authors/leticia.jpeg";
-import authorMikael from "../../assets/images/authors/mikael.jpeg";
-import authorJoaoJacinto from "../../assets/images/authors/joao-jacinto.jpeg";
-import auhtorMoniqueCampos from "../../assets/images/authors/monique-campos.jpeg";
-import authorLeonardo from "../../assets/images/authors/leonardo.jpeg";
-import authorPedroMiguel from "../../assets/images/authors/pedro-miguel.png";
-import authorLucasAlves from "../../assets/images/authors/lucasalves.jpeg";
-import authorAlvesJhonata from "../../assets/images/authors/alves-jhonata.png";
+import authorLeticia from "../../../assets/images/authors/leticia.jpeg";
+import authorMikael from "../../../assets/images/authors/mikael.jpeg";
+import authorJoaoJacinto from "../../../assets/images/authors/joao-jacinto.jpeg";
+import auhtorMoniqueCampos from "../../../assets/images/authors/monique-campos.jpeg";
+import authorLeonardo from "../../../assets/images/authors/leonardo.jpeg";
+import authorPedroMiguel from "../../../assets/images/authors/pedro-miguel.png";
+import authorLucasAlves from "../../../assets/images/authors/lucasalves.jpeg";
+import authorAlvesJhonata from "../../../assets/images/authors/alves-jhonata.png";
 
 export const mockAuthor = [
   {