#FEAT-014: Add template's logo to navbar (#78)

* Chore: remove unsued navigation bar * Feat: add template's logo * Style: * Chore: remove _blank target * Test: update header's snapshot
Pet3r1512 · Nov 13, 2024 · 5aaf7d7 · 5aaf7d7
1 parent 78dd8b8
commit 5aaf7d7
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 78 deletions.
diff --git a/src/components/Layouts/Header/Navbar.tsx b/src/components/Layouts/Header/Navbar.tsx
@@ -16,6 +16,7 @@ import NewBadge from "../Badges/NewBadge";
 import Logo from "./Logo";
 import { useSmoothScroll } from "@/hooks/useSmoothScroll";
 import { useInViewStore } from "@/stores/useInViewStore";
+import Image from "next/image";
 
 const badgeClassName =
   "relative ml-1.5 lg:ml-0 lg:top-[-12px] text-sm px-1.5 py-1";
@@ -48,14 +49,21 @@ export const navs = [
   },
 ];
 
-const templates: { title: string; href: string; description: string }[] = [
+const templates: {
+  title: string;
+  image: string;
+  href: string;
+  description: string;
+}[] = [
   {
     title: "Next.js",
+    image: "/images/templates/nextjs-deviniter.png",
     href: "/docs/template_structure/nextjs",
     description: "A Fullstack React.js Framework",
   },
   {
     title: "Vite",
+    image: "/images/templates/vite-deviniter.png",
     href: "/docs/template_structure/vite",
     description: "Fast and Modern React.js Build Tool",
   },
@@ -103,7 +111,7 @@ export function Navbar() {
             Getting Started
           </NavigationMenuTrigger>
           <NavigationMenuContent>
-            <ul className="grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr] dark:bg-black bg-white border-none !outline-none">
+            <ul className="grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr] shadow-2xl bg-black-main border-none !outline-none">
               <li className="row-span-3">
                 <NavigationMenuLink asChild>
                   <Link
@@ -150,6 +158,7 @@ export function Navbar() {
                 <ListItem
                   key={template.title}
                   title={template.title}
+                  image={template.image}
                   href={template.href}
                 >
                   {template.description}
@@ -189,8 +198,8 @@ export function Navbar() {
 
 const ListItem = React.forwardRef<
   React.ElementRef<"a">,
-  React.ComponentPropsWithoutRef<"a">
->(({ className, title, children, ...props }, ref) => {
+  React.ComponentPropsWithoutRef<"a"> & { title: string; image?: string }
+>(({ className, title, image, children, ...props }, ref) => {
   return (
     <li>
       <NavigationMenuLink asChild>
@@ -203,10 +212,21 @@ const ListItem = React.forwardRef<
           )}
           {...props}
         >
-          <div className="text-base font-bold leading-none">{title}</div>
-          <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
+          <div className="text-base font-bold leading-none flex items-center gap-x-2.5">
+            {image && (
+              <Image
+                src={image}
+                alt=""
+                width={32}
+                height={32}
+                className="size-6"
+              />
+            )}
+            {title}
+          </div>
+          <div className="line-clamp-2 text-sm leading-snug text-muted-foreground">
             {children}
-          </p>
+          </div>
         </a>
       </NavigationMenuLink>
     </li>

diff --git a/src/components/Layouts/Header/Navigations.tsx b/src/components/Layouts/Header/Navigations.tsx
diff --git a/src/components/Layouts/Header/__snapshots__/header.test.tsx.snap b/src/components/Layouts/Header/__snapshots__/header.test.tsx.snap
@@ -251,7 +251,6 @@ exports[`Render Header > Should match snapshot 1`] = `
             <a
               class="text-lg flex"
               href="/release"
-              target="_blank"
             >
               Release Notes
               <svg
@@ -571,7 +570,6 @@ exports[`Render Header > Should match snapshot 1`] = `
           <a
             class="text-lg flex"
             href="/release"
-            target="_blank"
           >
             Release Notes
             <svg

diff --git a/src/components/Layouts/Header/_index.tsx b/src/components/Layouts/Header/_index.tsx
@@ -28,7 +28,7 @@ export default function Header() {
             Contributing
             <ArrowUpRight size={14} />
           </Link>
-          <Link href="/release" target="_blank" className="text-lg flex">
+          <Link href="/release" className="text-lg flex">
             Release Notes
             <ArrowUpRight size={14} />
           </Link>

diff --git a/src/components/ui/navigation-menu.tsx b/src/components/ui/navigation-menu.tsx
@@ -69,7 +69,7 @@ const NavigationMenuContent = React.forwardRef<
   <NavigationMenuPrimitive.Content
     ref={ref}
     className={cn(
-      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
+      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto",
       className
     )}
     {...props}
@@ -86,7 +86,7 @@ const NavigationMenuViewport = React.forwardRef<
   <div className={cn("absolute left-0 top-full flex justify-center")}>
     <NavigationMenuPrimitive.Viewport
       className={cn(
-        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border border-neutral-200 bg-white text-neutral-950 shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)] dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
+        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-xl !outline-none !border-none !bg-transparent border border-neutral-200 bg-white text-neutral-950 shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)] dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
         className
       )}
       ref={ref}