feat: Update Navbar component to improve accessibility and styles

jnaraujo · Aug 4, 2024 · c5630b0 · c5630b0
1 parent 65c779b
commit c5630b0
Showing 1 changed file with 53 additions and 36 deletions.
diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
@@ -9,48 +9,66 @@ import ThemeToggle from "../ThemeToggle";
 import { Menu, X } from "lucide-react";
 
 const Navbar = () => {
-  const [isOpen, setIsOpen] = useState(false);
-
-  const handleClick = () => {
-    setIsOpen(!isOpen);
-  };
-
   return (
     <header className="container flex items-center justify-between py-4">
       <Link
         href="/"
         passHref
-        className="text-lg font-semibold text-zinc-700 dark:text-zinc-300"
+        className="text-lg font-semibold text-zinc-700 dark:text-stone-200"
       >
         Teste de Leiturabilidade
       </Link>
 
-      <nav className="hidden sm:block">
-        <ul className="flex items-center justify-center gap-4">
-          {NAVBAR_LINKS.map(({ title, url }) => (
-            <li key={title}>
-              <Link
-                href={url}
-                className="text-zinc-700 hover:text-zinc-800 dark:text-zinc-400 dark:hover:text-zinc-500"
-              >
-                {title}
-              </Link>
-            </li>
-          ))}
-          <li>
-            <Button
-              asChild
-              className="h-full bg-violet-600 hover:bg-violet-700 dark:text-zinc-200"
+      <Nav />
+      <MobileNav />
+    </header>
+  );
+};
+export default Navbar;
+
+function Nav() {
+  return (
+    <nav className="hidden sm:block">
+      <ul className="flex items-center justify-center gap-4">
+        {NAVBAR_LINKS.map(({ title, url }) => (
+          <li key={title}>
+            <Link
+              href={url}
+              className="text-zinc-700 hover:text-zinc-800 dark:text-stone-400 dark:hover:text-stone-500"
             >
-              <Link href="/editor">Testar o Novo Editor!</Link>
-            </Button>
+              {title}
+            </Link>
           </li>
-          <li>
-            <ThemeToggle />
-          </li>
-        </ul>
-      </nav>
+        ))}
+        <li>
+          <Button
+            asChild
+            className="h-full bg-violet-600 hover:bg-violet-700 dark:text-stone-200"
+          >
+            <Link href="/editor">Testar o Novo Editor!</Link>
+          </Button>
+        </li>
+        <li>
+          <ThemeToggle />
+        </li>
+      </ul>
+    </nav>
+  );
+}
+
+function MobileNav() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  function closeMenu() {
+    setIsOpen(false);
+  }
 
+  return (
+    <>
       <nav
         className={cn(
           "hidden bg-zinc-100 p-4 dark:bg-zinc-900",
@@ -74,7 +92,8 @@ const Navbar = () => {
             <li key={title}>
               <Link
                 href={url}
-                className="text-zinc-700 hover:text-zinc-800 dark:text-zinc-400"
+                className="text-zinc-700 hover:text-zinc-800 dark:text-stone-400 dark:hover:text-stone-500"
+                onClick={closeMenu}
               >
                 {title}
               </Link>
@@ -83,7 +102,7 @@ const Navbar = () => {
           <li>
             <Button
               asChild
-              className="h-full bg-violet-600 hover:bg-violet-700 dark:text-zinc-200"
+              className="h-full bg-violet-600 text-zinc-50 hover:bg-violet-700"
             >
               <Link href="/editor">Testar o Novo Editor!</Link>
             </Button>
@@ -93,7 +112,6 @@ const Navbar = () => {
           </li>
         </ul>
       </nav>
-
       <button
         className="text-2xl text-zinc-700 focus:outline-none sm:hidden"
         type="button"
@@ -102,7 +120,6 @@ const Navbar = () => {
       >
         <Menu />
       </button>
-    </header>
+    </>
   );
-};
-export default Navbar;
+}