style: stylized navbar

nitkkr-dev · Nov 9, 2024 · ec8f4d6 · ec8f4d6
1 parent b8de59f
commit ec8f4d6
Show file tree

Hide file tree

Showing 2 changed files with 215 additions and 15 deletions.
diff --git a/app/[locale]/header.tsx b/app/[locale]/header.tsx
@@ -10,6 +10,14 @@ import { Button, HamburgerButton } from '~/components/buttons';
 import { CtrlLink } from '~/components/link';
 import LocaleSwitcher from '~/components/locale-switcher';
 import MaybeLink from '~/components/maybe-link';
+import {
+  NavigationMenu,
+  NavigationMenuCustomListItem,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  navigationMenuTriggerStyle,
+} from '~/components/ui';
 import { getTranslations } from '~/i18n/translations';
 import { cn } from '~/lib/utils';
 import { getServerAuthSession } from '~/server/auth';
@@ -22,11 +30,84 @@ export default async function Header({ locale }: { locale: string }) {
   const isMacOS = agent.os.name === 'Mac OS';
 
   const items = [
-    { label: text.institute, href: 'institute' },
-    { label: text.academics, href: 'academics' },
+    {
+      label: text.institute,
+      href: 'institute',
+      listItems: [
+        {
+          title: 'Institute Profile',
+          href: '/institute/profile',
+          description:
+            'Get to know our institute’s vision, mission, and values.',
+        },
+        {
+          title: 'Administration',
+          href: '/institute/administration',
+          description: 'Meet the leadership team guiding our institution.',
+        },
+        {
+          title: 'Sections',
+          href: '/institute/sections',
+          description:
+            'Explore the various sections that support campus life and academics.',
+        },
+        {
+          title: 'Campus Infrastructure',
+          href: '/institute/campus-infra',
+          description:
+            'Discover the state-of-the-art facilities and infrastructure on campus.',
+        },
+      ],
+    },
+    {
+      label: text.academics,
+      href: 'academics',
+      listItems: [
+        {
+          title: 'Departments',
+          href: '/academics/departments',
+          description:
+            'Explore the diverse academic departments and their offerings.',
+        },
+        {
+          title: 'Programmes',
+          href: '/academics/programmes',
+          description:
+            'Discover our range of undergraduate and postgraduate programmes.',
+        },
+        {
+          title: 'Courses & Curricula',
+          href: '/academics/curricula',
+          description: 'Browse through the detailed list of courses available.',
+        },
+        {
+          title: 'Convocation',
+          href: '/academics/convocation',
+          description: 'Get information on upcoming convocation ceremonies.',
+        },
+        {
+          title: 'Awards',
+          href: '/academics/awards',
+          description:
+            'Recognizing excellence in academics, research, and beyond.',
+        },
+        {
+          title: 'Scholarship',
+          href: '/academics/scholarships',
+          description:
+            'Learn about scholarships, eligibility, and application details.',
+        },
+        {
+          title: 'Academic Notifications',
+          href: '/academics/notifications',
+          description:
+            'Stay updated with the latest academic announcements and deadlines.',
+        },
+      ],
+    },
     { label: text.faculty, href: 'faculty-and-staff' },
     { label: text.placement, href: 'training-and-placement' },
-    { label: text.alumni, href: 'alumni' },
+    // { label: text.alumni, href: 'alumni' },
     { label: text.activities, href: 'student-activities' },
   ];
 
@@ -48,16 +129,43 @@ export default async function Header({ locale }: { locale: string }) {
             src="assets/nitlogo.png"
           />
         </Link>
+        <NavigationMenu>
+          <NavigationMenuList
+            className={cn('hidden grow lg:flex', 'gap-4 xl:gap-5 2xl:gap-6')}
+          >
+            {items.map(({ label, href, listItems }, index) => (
+              <NavigationMenuCustomListItem
+                key={index}
+                triggerName={label}
+                locale={locale}
+                listItems={listItems}
+                href={href}
+                imageDetails={{
+                  src: `${href}/image01.jpg`,
+                  alt: label,
+                  href: href,
+                }}
+              />
+            ))}
 
-        <ol className={cn('hidden grow lg:flex', 'gap-4 xl:gap-5 2xl:gap-6')}>
-          {items.map(({ label, href }, index) => (
-            <li className="my-auto min-h-fit" key={index}>
-              <Link href={`/${locale}/${href}`} prefetch>
-                {label}
+            {/* <NavigationMenuCustomListItem
+              triggerName={items[0].label}
+              imageDetails={{
+                src: 'https://s3-alpha-sig.figma.com/img/054e/19b7/43c945f2ee30e43f797f944b1c02fe2e?Expires=1728259200&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=TjH6LvDVUoTwEvUvc02-8DAwccrJ9YRqDqTy5h-0O0cYSVWG03it8-zr5OSBcjGVuu5TMnV7ZlnEiM3CIHQ3mQAy7Z3~Bv2sbCL8plMbE0GDxzmjpaVkKPAfgbMpuyofWABnyQjH4cda6qWEzeBuGEw~KQfFxVuAA-wHYTA6GL~B776fRbfdfzNxtSqucrIEqfGG1nUMFEdxvTLMPCqXTjErPikIs2rDXtAZ3K3U4suPFFqLRyBQ9H0B3DAGDzxZ64CIVLkAaE~ALCRy1BBUDyXrU24E1~BeTobiCoR0q1WcnBOPMKpnUb0c2qTyaDz8BxMe9hMMI9vGnv4fxdqGBA__',
+                alt: items[0].label,
+                href: items[0].href,
+              }}
+              listItems={components}
+            /> */}
+            {/* <NavigationMenuItem>
+              <Link href="/docs" legacyBehavior passHref>
+                <NavigationMenuLink className={navigationMenuTriggerStyle()}>
+                  Documentation
+                </NavigationMenuLink>
               </Link>
-            </li>
-          ))}
-        </ol>
+            </NavigationMenuItem> */}
+          </NavigationMenuList>
+        </NavigationMenu>
 
         <ol className="inline-flex h-10 gap-2">
           <li className="flex h-full rounded-xl border border-neutral-500 bg-neutral-50">

diff --git a/components/ui/navigation-menu.tsx b/components/ui/navigation-menu.tsx
@@ -2,6 +2,8 @@ import * as React from 'react';
 import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
 import { cva } from 'class-variance-authority';
 import { RxChevronDown } from 'react-icons/rx';
+import Link from 'next/link';
+import Image from 'next/image';
 
 import { cn } from '~/lib/utils';
 
@@ -47,13 +49,13 @@ const navigationMenuTriggerStyle = cva(
 const NavigationMenuTrigger = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
->(({ className, children, title, ...props }, ref) => (
+>(({ className, children, ...props }, ref) => (
   <NavigationMenuPrimitive.Trigger
     ref={ref}
     className={cn(navigationMenuTriggerStyle(), 'group', className)}
     {...props}
   >
-    <p className="w-fit min-w-0 text-pretty text-left">{children}</p>
+    <p className="w-fit min-w-0 text-pretty text-left text-base">{children}</p>
     <RxChevronDown
       className="relative top-[1px] my-auto ml-1 w-5 transition duration-200 group-data-[state=open]:rotate-180"
       aria-hidden="true"
@@ -86,7 +88,7 @@ const NavigationMenuViewport = React.forwardRef<
   <div className={cn('absolute left-0 top-full flex justify-center')}>
     <NavigationMenuPrimitive.Viewport
       className={cn(
-        'origin-top-center border-gray-200 bg-white text-gray-950 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow-lg 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)]',
+        'origin-top-center text-neutral-950 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-xl border border-neutral-200 bg-shade-light shadow-lg 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)]',
         className
       )}
       ref={ref}
@@ -109,17 +111,107 @@ const NavigationMenuIndicator = React.forwardRef<
     )}
     {...props}
   >
-    <div className="bg-gray-200  relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
+    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-neutral-200 shadow-md" />
   </NavigationMenuPrimitive.Indicator>
 ));
 NavigationMenuIndicator.displayName =
   NavigationMenuPrimitive.Indicator.displayName;
 
+const NavigationMenuCustomListItem = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Item> & {
+    locale: string;
+    triggerName: string;
+    listItems?: {
+      title: string;
+      description: string;
+      href: string;
+    }[];
+    imageDetails?: {
+      src: string;
+      alt: string;
+      href: string;
+    };
+    href?: string;
+  }
+>(({ imageDetails, listItems, triggerName, href, locale, ...props }, ref) => {
+  if (!listItems) {
+    return (
+      <NavigationMenuItem {...props} ref={ref}>
+        <Link href={`/${locale}/${href}`} legacyBehavior passHref>
+          <NavigationMenuLink className={navigationMenuTriggerStyle()}>
+            {triggerName}
+          </NavigationMenuLink>
+        </Link>
+      </NavigationMenuItem>
+    );
+  }
+  const imageHeight = listItems.length > 4 ? 4 : listItems.length;
+  return (
+    <NavigationMenuItem {...props} ref={ref}>
+      <NavigationMenuTrigger>{triggerName}</NavigationMenuTrigger>
+      <NavigationMenuContent className="flex gap-4 p-6 xl:gap-6 2xl:gap-8">
+        {imageDetails && (
+          <Link href={imageDetails.href} passHref legacyBehavior>
+            <NavigationMenuLink
+              className="group relative flex select-none flex-col justify-end overflow-hidden rounded-xl no-underline outline-none"
+              style={{ minWidth: `${70 * imageHeight}px` }}
+            >
+              <Image
+                className="absolute inset-0 z-0 h-full w-full object-cover transition-transform duration-500 ease-in-out group-hover:scale-125"
+                alt=""
+                src={imageDetails.src}
+                width={0}
+                height={0}
+              />
+              <section className="relative z-30 flex h-full w-full flex-col justify-end rounded-xl bg-gradient-to-b from-primary-500/0 to-primary-500 p-2 focus:shadow-md">
+                <h5 className="!mb-0 origin-bottom-left text-shade-light transition-transform duration-500 ease-in-out group-hover:scale-150">
+                  {imageDetails.alt + '→'}
+                </h5>
+              </section>
+            </NavigationMenuLink>
+          </Link>
+        )}
+        <ul
+          className={cn(
+            'grid grid-flow-col auto-rows-max gap-4 xl:gap-6 2xl:gap-8'
+          )}
+          style={{
+            gridTemplateRows: `repeat(${imageHeight}, minmax(0, 1fr))`,
+          }}
+        >
+          {listItems.map(({ title, description, href }, index) => (
+            <li key={index}>
+              <NavigationMenuLink asChild>
+                <Link
+                  className={cn(
+                    'group block w-56 select-none space-y-1 rounded-xl p-3 leading-none no-underline outline-none transition-colors transition-transform duration-500 ease-in-out hover:scale-110 hover:bg-neutral-50 focus:bg-neutral-50'
+                  )}
+                  href={`/${locale}/${href}`}
+                >
+                  <h6 className="font-sans font-semibold leading-none text-shade-dark group-hover:text-primary-500 group-focus:text-primary-500">
+                    {title}
+                  </h6>
+                  <p className="line-clamp-3 text-sm leading-snug text-neutral-700 group-hover:text-primary-500 group-focus:text-primary-500">
+                    {description}
+                  </p>
+                </Link>
+              </NavigationMenuLink>
+            </li>
+          ))}
+        </ul>
+      </NavigationMenuContent>
+    </NavigationMenuItem>
+  );
+});
+NavigationMenuCustomListItem.displayName = 'NavigationMenuCustomListItem';
+
 export {
   navigationMenuTriggerStyle,
   NavigationMenu,
   NavigationMenuList,
   NavigationMenuItem,
+  NavigationMenuCustomListItem,
   NavigationMenuContent,
   NavigationMenuTrigger,
   NavigationMenuLink,