Merge pull request #506 from HoomanDgtl/sec-nav

feat: update header and roadmap components

Author: HoomanDgtl

src/components/header/header.astro

@@ -21,7 +21,7 @@ const { disableSticky } = Astro.props;
 const visibilty = {
   network: ["/about", "/token"],
   community: ["/community"],
-  development: ["/development"],
+  development: ["/development", "/roadmap"],
   ecosystem: ["/ecosystem"],
   pricing: ["/pricing"],
 };
@@ -43,7 +43,9 @@ const latestRoadmapYear = getYearToUse();
 
 <header
   class={clsx(
-    "bg-white dark:bg-[#242424] border-b border-defaultBorder",
+    "bg-white dark:bg-[#242424]  ",
+    !visibilty.development.includes(pathname) &&
+      "border-b border-defaultBorder",
     disableSticky
       ? ""
       : pathnames.includes(pathname)

src/components/header/popovers/popover-nav-community.tsx

@@ -76,9 +76,7 @@ const PopOverSmall = ({
                           target={
                             item.link.startsWith("http") ? "_blank" : "_self"
                           }
-                          className={`dark:hover:bg- group flex  cursor-pointer items-center gap-6 rounded-lg px-4 py-3 transition-all hover:bg-gray-50 dark:hover:bg-black/10    ${
-                            active ? "" : ""
-                          } `}
+                          className="dark:hover:bg- group flex  cursor-pointer items-center gap-6 rounded-lg px-4 py-3 transition-all hover:bg-gray-50 dark:hover:bg-black/10"
                         >
                           <div className="text-[#9CA3AF] transition-all group-hover:text-primary dark:text-para">
                             {item.icon ? (
@@ -169,6 +167,8 @@ export const SubNavbar = ({
                   className={clsx(
                     "flex cursor-pointer items-center gap-2  border-b-2   p-4 text-para    ",
                     pathname === item.link ||
+                      (item.link === "roadmap" &&
+                        pathname?.split("/")[1] === "roadmap") ||
                       pathname?.split("/")[2] === item.link?.split("/")[2]
                       ? " border-foreground "
                       : "border-transparent",

src/components/roadmap/roadmap.astro

@@ -33,7 +33,7 @@ const { year, quarters, years } = Astro.props;
       </div>
     </section>
     <section
-      class="container-reader sticky top-[56px] z-[20] w-full bg-background pb-6 md:top-[66px]"
+      class="container-reader sticky top-[57px] z-[20] w-full bg-background pb-6 md:top-[43px]"
     >
       <YearSelector years={years} currentYear={year} client:load />
     </section>