From 8c445d99168f9db898f8615b3ac1c4c24427643d Mon Sep 17 00:00:00 2001 From: heydoyouknowme0 <68548165+heydoyouknowme0@users.noreply.github.com> Date: Sat, 28 Sep 2024 11:35:30 +0530 Subject: [PATCH] style: stylized navbar --- app/[locale]/header.tsx | 75 ++++++++++++++++++++++---- components/ui/navigation-menu.tsx | 87 +++++++++++++++++++++++++++++-- 2 files changed, 149 insertions(+), 13 deletions(-) diff --git a/app/[locale]/header.tsx b/app/[locale]/header.tsx index 3c81dc3b..e709c126 100644 --- 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'; @@ -29,6 +37,43 @@ export default async function Header({ locale }: { locale: string }) { { label: text.alumni, href: 'alumni' }, { label: text.activities, href: 'student-activities' }, ]; + const components: { title: string; href: string; description: string }[] = [ + { + title: 'Alert Dialog', + href: '/docs/primitives/alert-dialog', + description: + 'A modal dialog that interrupts the user with important content and expects a response.', + }, + { + title: 'Hover Card', + href: '/docs/primitives/hover-card', + description: + 'For sighted users to preview content available behind a link.', + }, + { + title: 'Progress', + href: '/docs/primitives/progress', + description: + 'Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.', + }, + { + title: 'Scroll-area', + href: '/docs/primitives/scroll-area', + description: 'Visually or semantically separates content.', + }, + { + title: 'Tabs', + href: '/docs/primitives/tabs', + description: + 'A set of layered sections of content—known as tab panels—that are displayed one at a time.', + }, + { + title: 'Tooltip', + href: '/docs/primitives/tooltip', + description: + 'A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.', + }, + ]; return (
@@ -48,16 +93,28 @@ export default async function Header({ locale }: { locale: string }) { src="assets/nitlogo.png" /> - -
    - {items.map(({ label, href }, index) => ( -
  1. - - {label} + + + + + + + Documentation + -
    2. - ))} -
+ + +
  1. diff --git a/components/ui/navigation-menu.tsx b/components/ui/navigation-menu.tsx index f933a035..a94762b2 100644 --- 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'; @@ -41,13 +43,13 @@ NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName; const NavigationMenuItem = NavigationMenuPrimitive.Item; const navigationMenuTriggerStyle = cva( - 'hover:text-gray-900 focus:bg-gray-100 focus:text-gray-900 group flex max-w-fit rounded-md bg-background transition-colors hover:bg-neutral-100 focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-neutral-100/50 data-[state=open]:bg-neutral-100/50' + 'hover:text-gray-900 focus:bg-gray-100 focus:text-gray-900 group flex max-w-fit rounded-md bg-background transition-colors hover:bg-neutral-100 focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-neutral-100/50 data-[state=open]:bg-neutral-100/50 lg:text-lg' ); const NavigationMenuTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef ->(({ className, children, title, ...props }, ref) => ( +>(({ className, children, ...props }, ref) => ( -
    +
    )); NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName; +const NavigationMenuCustomListItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef & { + imageDetails?: { + src: string; + alt: string; + href: string; + }; + listItems: { + title: string; + description: string; + href: string; + }[]; + triggerName: string; + } +>(({ imageDetails, listItems, triggerName, ...props }, ref) => { + const imageHeight = listItems.length > 4 ? 4 : listItems.length; + return ( + + {triggerName} + + {imageDetails && ( + + + +
    +
    + {imageDetails.alt + '→'} +
    +
    +     + + )} +
      + {listItems.map(({ title, description, href }, index) => ( +
    • + + +
      + {title} +
      +

      + {description} +

      + +       +
      • + ))} +
    +     +     + ); +}); +NavigationMenuCustomListItem.displayName = 'NavigationMenuCustomListItem'; + export { navigationMenuTriggerStyle, NavigationMenu, NavigationMenuList, NavigationMenuItem, + NavigationMenuCustomListItem, NavigationMenuContent, NavigationMenuTrigger, NavigationMenuLink,