refactor: rename navbar

aabuhijleh · Nov 18, 2024 · c4566b1 · c4566b1
1 parent cf86fee
commit c4566b1
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 13 deletions.
diff --git a/app/page.tsx b/app/page.tsx
@@ -4,11 +4,12 @@ import { Contact } from "~/components/contact";
 import { Work } from "~/components/work";
 import { Projects } from "~/components/projects";
 import { Footer } from "~/components/footer";
-import { Header } from "~/components/header";
+import { Navbar } from "~/components/navbar";
+
 export default function Home() {
   return (
     <main className="mx-auto max-w-screen-xl px-8">
-      <Header />
+      <Navbar />
       <Hero />
       <About />
       <Work />

diff --git a/assets/config.ts b/assets/config.ts
@@ -39,28 +39,28 @@ export const socialLinks: BrandLink[] = [
 
 export const navLinks: NavLink[] = [
   {
-    href: "#home",
     label: "Home",
+    href: "#home",
     icon: Home,
   },
   {
-    href: "#about",
     label: "About",
+    href: "#about",
     icon: User,
   },
   {
-    href: "#work",
     label: "Work",
+    href: "#work",
     icon: Briefcase,
   },
   {
-    href: "#projects",
     label: "Projects",
+    href: "#projects",
     icon: FolderGit,
   },
   {
-    href: "#contact",
     label: "Contact",
+    href: "#contact",
     icon: Mail,
   },
 ];

diff --git a/components/header.tsx → components/navbar.tsx b/components/header.tsx → components/navbar.tsx
@@ -6,16 +6,16 @@ import { X, Menu } from "lucide-react";
 import { cn } from "~/lib/utils";
 import { useScrollDirection } from "~/hooks/useScrollDirection";
 
-export const Header = () => {
+export const Navbar = () => {
   return (
     <>
-      <HeaderMobile />
-      <HeaderDesktop />
+      <NavbarMobile />
+      <NavbarDesktop />
     </>
   );
 };
 
-const HeaderMobile = () => {
+const NavbarMobile = () => {
   const [isOpen, setIsOpen] = useState(false);
   const scrollingDown = useScrollDirection();
 
@@ -28,6 +28,7 @@ const HeaderMobile = () => {
         }`}
       >
         <Menu />
+        <span className="sr-only">Menu</span>
       </button>
 
       <div
@@ -47,6 +48,7 @@ const HeaderMobile = () => {
           className="absolute right-4 top-4 rounded-full p-2 hover:bg-gray-100/10"
         >
           <X className="h-6 w-6 text-card-foreground" />
+          <span className="sr-only">Close</span>
         </button>
 
         <ul className="mt-12 space-y-4">
@@ -74,7 +76,7 @@ const HeaderMobile = () => {
   );
 };
 
-const HeaderDesktop = () => {
+const NavbarDesktop = () => {
   const scrollingDown = useScrollDirection();
 
   return (

diff --git a/types/data.ts b/types/data.ts
@@ -5,8 +5,8 @@ export type BrandLink = {
 };
 
 export type NavLink = {
-  href: string;
   label: string;
+  href: string;
   icon: React.ElementType;
 };