refactor navigation menu labels and structure

Author: jeromehardaway

src/components/menu/main-menu/megamenu.tsx

@@ -13,7 +13,7 @@ const Megamenu = ({ className, align, menu, ...rest }: TProps) => {
     return (
         <div
             className={clsx(
-                "tw-w-[1170px] tw-flex tw-flex-wrap tw-absolute tw-z-20 tw-top-full tw-mt-5 tw-invisible tw-opacity-0 tw-pt-7.5 tw-pb-[34px] tw-px-3.8 tw-shadow-2md tw-shadow-black/5 tw-bg-white tw-border-b-4 tw-border-b-primary tw-transition-all tw-duration-300",
+                "tw-invisible tw-absolute tw-top-full tw-z-20 tw-mt-5 tw-flex tw-w-[1170px] tw-flex-wrap tw-border-b-4 tw-border-b-primary tw-bg-white tw-px-3.8 tw-pb-[34px] tw-pt-7.5 tw-opacity-0 tw-shadow-2md tw-shadow-black/5 tw-transition-all tw-duration-300",
                 align === "left" && "tw-left-0",
                 align === "center" && "tw-left-1/2 -tw-translate-x-1/2",
                 className
@@ -24,7 +24,7 @@ const Megamenu = ({ className, align, menu, ...rest }: TProps) => {
                 <div
                     key={id}
                     className={clsx(
-                        "tw-px-3.8 tw-shrink-0 tw-grow-0",
+                        "tw-shrink-0 tw-grow-0 tw-px-3.8",
                         submenu && "tw-w-1/4 tw-basis-1/4",
                         banner && "tw-w-1/2 tw-basis-1/2"
                     )}
@@ -37,7 +37,7 @@ const Megamenu = ({ className, align, menu, ...rest }: TProps) => {
                                     <Anchor
                                         path={nav.path}
                                         className={clsx(
-                                            "tw-leading-relaxed tw-block tw-font-medium tw-py-2 hover:tw-text-heading",
+                                            "tw-block tw-py-2 tw-font-medium tw-leading-relaxed hover:tw-text-heading",
                                             nav.status === "coming soon" && "tw-pointer-events-none"
                                         )}
                                     >
@@ -48,9 +48,10 @@ const Megamenu = ({ className, align, menu, ...rest }: TProps) => {
                                                     nav.status === "hot" ? "gradient" : "primary"
                                                 }
                                                 size="xs"
-                                                className="tw-ml-2.5 tw-font-bold tw-tracking-wide tw-uppercase"
+                                                variant="contained"
+                                                className="tw-ml-2.5 tw-font-bold tw-uppercase tw-tracking-wide"
                                             >
-                                                {nav.status}
+                                                {nav.status.toUpperCase()}
                                             </Badge>
                                         )}
                                     </Anchor>

src/data/menu.ts

@@ -36,86 +36,74 @@ type NavigationItem = SubMenuItem | MegaMenuItem;
 const navigation: NavigationItem[] = [
     {
         id: 1,
-        label: "Home",
-        path: "/",
+        label: "Train",
+        path: "#!",
+        submenu: [
+            {
+                id: 11,
+                label: "Start Your Mission",
+                path: "/apply",
+            },
+            {
+                id: 13,
+                label: "FAQ",
+                path: "/faq",
+            },
+        ],
     },
     {
         id: 2,
-        label: "About",
+        label: "Build",
         path: "#!",
         submenu: [
             {
-                id: 21,
-                label: "About Us",
-                path: "/about-us",
-            },
-            {
-                id: 22,
-                label: "Projects",
+                id: 14,
+                label: "Open Source Projects",
                 path: "/projects",
             },
             {
-                id: 23,
-                label: "Subjects",
+                id: 15,
+                label: "Subjects & Skills",
                 path: "/subjects/all",
             },
-            {
-                id: 24,
-                label: "FAQ",
-                path: "/faq",
-            },
         ],
     },
     {
         id: 3,
-        label: "Apply",
+        label: "Lead",
         path: "#!",
         submenu: [
             {
-                id: 31,
+                id: 16,
                 label: "Become a Mentor",
                 path: "/mentor",
             },
             {
-                id: 32,
-                label: "Apply to be a Student",
-                path: "/apply",
-                status: "new",
+                id: 17,
+                label: "Donate",
+                path: "/donate",
             },
-        ],
-    },
-    {
-        id: 4,
-        label: "Blog",
-        path: "/blogs/blog",
-    },
-    {
-        id: 5,
-        label: "Contact Us",
-        path: "/contact-us",
-    },
-    {
-        id: 6,
-        label: "Support",
-        path: "#!",
-        submenu: [
             {
-                id: 61,
+                id: 18,
                 label: "Events",
                 path: "/events",
             },
             {
-                id: 62,
+                id: 19,
+                label: "Stories",
+                path: "/blogs/blog",
+            },
+            {
+                id: 20,
+                label: "Contact",
+                path: "/contact-us",
+            },
+            {
+                id: 21,
                 label: "Shop",
                 path: "https://hashflag.shop/",
                 external: true,
             },
-            {
-                id: 63,
-                label: "Donate",
-                path: "/donate",
-                status: "hot",
-            },
         ],
     },
 ];