Merge pull request #23 from acm-ucr/VacaTheCow/topNavBar

Created top NavBar using shadcn

package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@radix-ui/react-alert-dialog": "^1.1.2",
+    "@radix-ui/react-navigation-menu": "^1.2.1",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-radio-group": "^1.2.1",
     "@radix-ui/react-slot": "^1.1.0",

src/app/form/[role]/page.tsx

@@ -25,7 +25,7 @@ const Page = ({ params }: props) => {
 
   return (
     <div className="mt-10 flex flex-col items-center justify-center gap-2">
-      <div className="w-1/2 w-full">
+      <div className="w-1/2">
         <Breadcrumb>
           <BreadcrumbList>
             <BreadcrumbItem>

src/app/form/layout.tsx

@@ -0,0 +1,17 @@
+import Navigation from "@/components/global/navigation";
+import { links } from "@/data/forms/navigation";
+
+type LayoutProps = {
+  children: React.ReactNode;
+};
+
+const Layout = ({ children }: LayoutProps) => {
+  return (
+    <div className="h-full">
+      <Navigation links={links} />
+      {children}
+    </div>
+  );
+};
+
+export default Layout;

src/components/global/navigation/index.tsx

@@ -1,5 +1,51 @@
-const Navigation = () => {
-  return <div className="flex bg-starlight-blue"></div>;
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import Image from "next/image";
+
+import {
+  NavigationMenu,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+} from "@/components/ui/navigation-menu";
+import logo from "@/public/assets/ACMStarlightLogo.webp";
+
+interface link {
+  name: string;
+  link: string;
+}
+
+interface props {
+  links: link[];
+}
+
+const Navigation = ({ links }: props) => {
+  const pathname = usePathname();
+  return (
+    <NavigationMenu className="flex max-w-full items-center justify-between bg-starlight-blue px-4 py-1 text-white">
+      <Link className="flex items-center" href="/">
+        <Image src={logo} alt="ACM Starlight Logo" width={64} height={64} />
+      </Link>
+      <NavigationMenuList>
+        {links.map(({ name, link }, index) => (
+          <NavigationMenuItem key={index}>
+            <NavigationMenuLink asChild>
+              <Link
+                href={link}
+                className={`text-white ${
+                  pathname === link ? "underline underline-offset-8" : ""
+                }`}
+              >
+                {name}
+              </Link>
+            </NavigationMenuLink>
+          </NavigationMenuItem>
+        ))}
+      </NavigationMenuList>
+    </NavigationMenu>
+  );
 };
 
 export default Navigation;

src/components/ui/navigation-menu.tsx

@@ -0,0 +1,128 @@
+import * as React from "react";
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
+import { cva } from "class-variance-authority";
+import { ChevronDown } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const NavigationMenu = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative z-10 flex max-w-max flex-1 items-center justify-center",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <NavigationMenuViewport />
+  </NavigationMenuPrimitive.Root>
+));
+NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
+
+const NavigationMenuList = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.List
+    ref={ref}
+    className={cn(
+      "group flex flex-1 list-none items-center justify-center space-x-1",
+      className,
+    )}
+    {...props}
+  />
+));
+NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
+
+const NavigationMenuItem = NavigationMenuPrimitive.Item;
+
+const navigationMenuTriggerStyle = cva(
+  "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50",
+);
+
+const NavigationMenuTrigger = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Trigger
+    ref={ref}
+    className={cn(navigationMenuTriggerStyle(), "group", className)}
+    {...props}
+  >
+    {children}{" "}
+    <ChevronDown
+      className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
+      aria-hidden="true"
+    />
+  </NavigationMenuPrimitive.Trigger>
+));
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
+
+const NavigationMenuContent = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <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",
+      className,
+    )}
+    {...props}
+  />
+));
+NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
+
+const NavigationMenuLink = NavigationMenuPrimitive.Link;
+
+const NavigationMenuViewport = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
+>(({ className, ...props }, ref) => (
+  <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 bg-popover text-popover-foreground 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}
+      {...props}
+    />
+  </div>
+));
+NavigationMenuViewport.displayName =
+  NavigationMenuPrimitive.Viewport.displayName;
+
+const NavigationMenuIndicator = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Indicator
+    ref={ref}
+    className={cn(
+      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
+      className,
+    )}
+    {...props}
+  >
+    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+  </NavigationMenuPrimitive.Indicator>
+));
+NavigationMenuIndicator.displayName =
+  NavigationMenuPrimitive.Indicator.displayName;
+
+export {
+  navigationMenuTriggerStyle,
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+};

src/data/forms/navigation.tsx

@@ -0,0 +1 @@
+export const links = [];

src/data/profile/profile-information.ts

@@ -0,0 +1,42 @@
+import { Questions } from "@/types/questions";
+
+export const questions: Questions[] = [
+  {
+    type: "text",
+    title: "Name",
+    placeholder: "Enter a Name",
+    maxLength: 250,
+    disabled: false,
+    value: "",
+  },
+  {
+    type: "select",
+    title: "Major",
+    options: ["Computer Science", "Computer Engineering", "Data Science"],
+    value: "",
+    disabled: false,
+  },
+  {
+    title: "Graduation Year",
+    options: [2025, 2026, 2027, 2028],
+    type: "radio",
+    disabled: false,
+    value: "",
+  },
+  // eventually should be an input thing here, its not in yet though
+  {
+    title: "Why do you want to join ACM Ignite?",
+    placeholder: "I want to join ACM Ignite because...",
+    type: "textarea",
+    maxLength: 250,
+    disabled: false,
+    value: "",
+  },
+  {
+    type: "select",
+    title: "Tech Stack",
+    options: ["Typescript", "Javascript", "C/C++"],
+    value: "",
+    disabled: false,
+  },
+];