feat(libs/website/shared/ui/navigation): create navbar

cuhacking · Nov 21, 2024 · 0cbb763 · 0cbb763
1 parent aa4510b
commit 0cbb763
Show file tree

Hide file tree

Showing 4 changed files with 237 additions and 0 deletions.
diff --git a/libs/website/shared/ui/navigation/navbar/ui/nav-item-mobile.tsx b/libs/website/shared/ui/navigation/navbar/ui/nav-item-mobile.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+
+export function MobileNavItem({ link, name }) {
+  return (
+    <div className="p-2.5">
+      <a href={link} className="block" aria-label={`Navigate to ${name}`}>
+        <h2 className="text-[48px] font-extrabold">
+          {name}
+        </h2>
+      </a>
+    </div>
+  )
+}
diff --git a/libs/website/shared/ui/navigation/navbar/ui/nav-item.tsx b/libs/website/shared/ui/navigation/navbar/ui/nav-item.tsx
@@ -0,0 +1,15 @@
+import { NavigationMenuLink } from '@cuhacking/shared/ui/src/cuHacking/components/navigation-menu'
+// import { Link } from '@remix-run/react'
+import React from 'react'
+// TODO: Refactor to use <Link> from Remix
+export function NavItem({ index, link, name }) {
+  return (
+    <NavigationMenuLink href={link}>
+      <span className="text-xs text-border">
+        {String(index + 1).padStart(2, '0')}
+        /
+      </span>
+      {name}
+    </NavigationMenuLink>
+  )
+}
diff --git a/libs/website/shared/ui/navigation/navbar/ui/navbar.presenter.stories.tsx b/libs/website/shared/ui/navigation/navbar/ui/navbar.presenter.stories.tsx
@@ -0,0 +1,109 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import hamburger from '@cuhacking/shared/assets/icons/general/hamburger-1.svg'
+import discord_white from '@cuhacking/shared/assets/icons/socials/discord-white-1.svg'
+import docs_white from '@cuhacking/shared/assets/icons/socials/docs-white-1.svg'
+import email_white from '@cuhacking/shared/assets/icons/socials/email-white-1.svg'
+import figma_white from '@cuhacking/shared/assets/icons/socials/figma-white-1.svg'
+import github_white from '@cuhacking/shared/assets/icons/socials/github-white-1.svg'
+import instagram_white from '@cuhacking/shared/assets/icons/socials/instagram-white-1.svg'
+import linkedin_white from '@cuhacking/shared/assets/icons/socials/linkedin-white-1.svg'
+import linktree_white from '@cuhacking/shared/assets/icons/socials/linktree-white-1.svg'
+import logo from '@cuhacking/shared/assets/logos/cuHacking/cuhacking-logo-1.svg'
+import { NavbarPresenter } from './navbar.presenter'
+
+const meta = {
+  title: 'cuHacking Design System/Navigation/Navbar',
+  component: NavbarPresenter,
+  tags: ['autodocs'],
+  args: {
+
+  },
+  argTypes: {
+    links: {
+      control: { type: 'object' },
+    },
+    logo: {
+      control: { type: 'text' },
+    },
+  },
+} satisfies Meta<typeof NavbarPresenter>
+
+const socials = [
+  {
+    link: 'https://github.com',
+    media: {
+      src: github_white.src,
+      alt: 'GitHub',
+    },
+  },
+  {
+    link: 'https://instagram.com',
+    media: {
+      src: instagram_white.src,
+      alt: 'Instagram',
+    },
+  },
+  {
+    link: 'https://linkedin.com',
+    media: {
+      src: linkedin_white.src,
+      alt: 'LinkedIn',
+    },
+  },
+  {
+    link: 'https://linktr.ee',
+    media: {
+      src: linktree_white.src,
+      alt: 'Linktree',
+    },
+  },
+  {
+    link: 'mailto:[email protected]',
+    media: {
+      src: email_white.src,
+      alt: 'Email',
+    },
+  },
+  {
+    link: 'https://discord.com',
+    media: {
+      src: discord_white.src,
+      alt: 'Discord',
+    },
+  },
+  {
+    link: 'https://docs.com',
+    media: {
+      src: docs_white.src,
+      alt: 'Documentation',
+    },
+  },
+  {
+    link: 'https://figma.com',
+    media: {
+      src: figma_white.src,
+      alt: 'Figma',
+    },
+  },
+]
+
+export default meta
+
+type Story = StoryObj<typeof Navbar>
+
+export const CustomNavbar: Story = {
+  args: {
+    links: [
+      { name: 'ABOUT', link: '/#about' },
+      { name: 'EVENTS', link: '/#events' },
+      { name: 'SPONSORS', link: '/#sponsors' },
+      { name: 'FAQ', link: '/#faq' },
+    ],
+    logo: logo.src,
+    socials,
+    hamburger: {
+      src: hamburger.src,
+      alt: 'Hamburger',
+    },
+  },
+}
diff --git a/libs/website/shared/ui/navigation/navbar/ui/navbar.presenter.tsx b/libs/website/shared/ui/navigation/navbar/ui/navbar.presenter.tsx
@@ -0,0 +1,100 @@
+'use client'
+import {
+  Drawer,
+  DrawerContent,
+  DrawerFooter,
+  DrawerTitle,
+} from '@cuhacking/shared/ui/src/cuHacking/components/drawer'
+import { Icon } from '@cuhacking/shared/ui/src/cuHacking/components/icon'
+import {
+  NavigationMenu,
+  NavigationMenuItem,
+  NavigationMenuList,
+} from '@cuhacking/shared/ui/src/cuHacking/components/navigation-menu'
+import { VisuallyHidden } from '@radix-ui/react-visually-hidden'
+import React, { useState } from 'react'
+import { Socials } from '../../../socials'
+import { NavItem } from './nav-item'
+import { MobileNavItem } from './nav-item-mobile'
+
+interface Media {
+  src: string
+  alt: string
+}
+
+interface NavbarProps {
+  links: {
+    name: string
+    link: string
+  }[]
+  logo: string
+  socials: {
+    link: string
+    media: Media
+  }[]
+  hamburger: Media
+}
+// TODO: Refactor to have the drawer in separate components
+export function NavbarPresenter({ links, logo, socials, hamburger }: NavbarProps) {
+  const [isOpen, setIsOpen] = useState(false)
+  function toggleOpen() {
+    setIsOpen(prev => !prev)
+  }
+  return (
+
+    <header
+      id="#navbar"
+      className="w-full fixed top-0 z-[60] backdrop-blur-sm"
+    >
+      <div className="mx-auto max-w-screen-xl px-4 py-2.5 flex justify-between">
+        <a href="/" aria-label="Return to homepage">
+          <img src={logo} alt="cuHacking logo" className="relative z-[60]" />
+        </a>
+        <NavigationMenu className="hidden md:block">
+          <NavigationMenuList className="gap-x-10">
+            {links.map(({ name, link }, index) => (
+              <NavigationMenuItem key={name}>
+                <NavItem index={index} link={link} name={name} />
+              </NavigationMenuItem>
+            ))}
+          </NavigationMenuList>
+        </NavigationMenu>
+        <Drawer
+          direction="right"
+          open={isOpen}
+        >
+          <button
+            type="button"
+            aria-label={isOpen ? 'Close Navigation Drawer' : 'Open Navigation Drawer'}
+            className="md:hidden"
+            onClick={toggleOpen}
+          >
+            <Icon media={hamburger} />
+          </button>
+          <VisuallyHidden>
+            <DrawerTitle>
+              Mobile Navigation
+            </DrawerTitle>
+          </VisuallyHidden>
+          <DrawerContent
+            className="h-full border-none overflow-x-hidden rounded-none bg-g-nav-drawer-background backdrop-blur-[3px]"
+            aria-describedby={undefined}
+          >
+            <div className="flex flex-col justify-center h-full text-center px-7">
+              <nav className="flex flex-col justify-between gap-y-7">
+                {links.map(({ name, link }) => (
+                  <MobileNavItem key={name} link={link} name={name} />
+                ))}
+              </nav>
+              <DrawerFooter className="pt-5 mt-0">
+                <Socials socials={socials} className="justify-center" />
+              </DrawerFooter>
+            </div>
+          </DrawerContent>
+        </Drawer>
+
+      </div>
+    </header>
+
+  )
+}