brown-ccv · hetd54 · Aug 23, 2024 · Aug 23, 2024 · Oct 10, 2024 · Oct 10, 2024
diff --git a/app/globals.css b/app/globals.css
@@ -24,18 +24,9 @@
     }
 
     body {
-        @apply grid;
-        @apply bg-neutral-50;
-        grid-template-columns:
-      1fr
-      min(1000px, 100%)
-      1fr;
+        @apply bg-white;
     }
 
-    body > * {
-        grid-column: 2;
-        @apply px-3;
-    }
 }
 
 

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -2,6 +2,7 @@ import type { Metadata } from "next"
 import { Inter } from "next/font/google"
 import "./globals.css"
 import React from "react"
+import Navbar from "@/components/Navbar"
 
 const inter = Inter({ subsets: ["latin"] })
 
@@ -17,7 +18,10 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+        <Navbar />
+        {children}
+      </body>
     </html>
   )
 }
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,12 +1,5 @@
-import Calendar from "@/components/calendar/Calendar"
-import LogoBrown from "@/components/assets/LogoBrown"
-import LogoCcv from "@/components/assets/LogoCcv"
-
 export default function Home() {
   return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24">
-      <LogoBrown />
-      <LogoCcv />
-    </main>
+    <main className="flex min-h-screen flex-col items-center justify-between p-24"></main>
   )
 }
diff --git a/components/NavLinks.tsx b/components/NavLinks.tsx
@@ -0,0 +1,158 @@
+"use client"
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+import { Menu } from "@headlessui/react"
+import React from "react"
+
+interface NavLinksProps {
+  linkType?: string
+}
+
+export const navigation = [
+  {
+    title: "Services",
+    href: "/services",
+    routes: [
+      { name: "Classroom", href: "/services/classroom" },
+      { name: "Computing", href: "/services/computing" },
+      {
+        name: "Campus File Storage and Transfer",
+        href: "/services/file-storage-and-transfer",
+      },
+      { name: "Rates", href: "/services/rates" },
+      { name: "Visualization Systems", href: "/services/visualization" },
+      { name: "Consulting", href: "/services/consulting" },
+    ],
+  },
+  {
+    title: "Our Work",
+    href: "/our-work",
+    routes: [
+      { name: "Collaborations", href: "#" },
+      {
+        name: "Software",
+        href: "/our-work/software",
+      },
+      {
+        name: "Workshops and Talks",
+        href: "/our-work/workshops-and-talks",
+      },
+      {
+        name: "Publications",
+        href: "https://publications.ccv.brown.edu",
+      },
+    ],
+  },
+  {
+    title: "Help",
+    href: "/help",
+    routes: [
+      { name: "Submit a Ticket", href: "mailto:[email protected]" },
+      {
+        name: "Discourse",
+        href: "https://ask.cyberinfrastructure.org/c/brown-research-computing/37",
+      },
+      {
+        name: "Slack",
+        href: "https://ccv-share.slack.com/signup#/",
+      },
+      {
+        name: "Office Hours",
+        href: "https://events.brown.edu/ccv/month",
+      },
+    ],
+  },
+  {
+    title: "About",
+    href: "/about",
+    routes: [
+      { name: "Mission", href: "/about#mission" },
+      {
+        name: "Office of Information Technology",
+        href: "/about#office-of-information-technology",
+      },
+      {
+        name: "Our Teams",
+        href: "/about#our-teams",
+      },
+      {
+        name: "People",
+        href: "/about#people",
+      },
+      {
+        name: "Opportunities",
+        href: "/about#opportunities",
+      },
+      {
+        name: "Events",
+        href: "https://events.brown.edu/ccv/month",
+      },
+      {
+        name: "Facilities Statement",
+        href: "/about#facilities-statement",
+      },
+      {
+        name: "Diversity Statement",
+        href: "/about#diversity-statement",
+      },
+    ],
+  },
+  {
+    title: "Blog",
+    href: "/blog",
+  },
+  {
+    title: "Documentation",
+    href: "https://docs.ccv.brown.edu/documentation",
+    routes: [
+      { name: "Oscar", href: "https://docs.ccv.brown.edu" },
+      {
+        name: "Stronghold",
+        href: "/services/computing#data-risk-level-3-computing-(stronghold)",
+      },
+      { name: "Globus", href: "/services/file-storage-and-transfer#globus" },
+      { name: "Jupyter Hub", href: "/services/classroom#jupyterhub" },
+    ],
+  },
+]
+
+const NavLinks: React.FC<NavLinksProps> = ({ linkType }) => {
+  const pathname = usePathname()
+  if (linkType === "mobile") {
+    return (
+      <>
+        {navigation.map((path) => {
+          return (
+            <Menu
+              key={path.href}
+              as="a"
+              href={path.href}
+              className={`block border-l-4 text-lg font-medium py-2 pl-3 pr-4 hover:border-gray-300 hover:text-secondary-blue-500 ${pathname === path.href ? "active text-secondary-blue-500 border-secondary-blue-500" : "border-transparent text-neutral-700"}`}
+            >
+              {path.title}
+            </Menu>
+          )
+        })}
+      </>
+    )
+  }
+  return (
+    <>
+      {navigation.map((path) => {
+        return (
+          <Menu key={path.href}>
+            <div className="hidden lg:ml-6 group lg:flex">
+              <Link
+                className={`inline-flex text-lg items-center border-b-2 px-1 pt-1 font-medium hover:border-gray-300 hover:text-secondary-blue-500 ${pathname === path.href ? "active text-secondary-blue-500 border-b-2 border-secondary-blue-500" : "border-transparent text-neutral-700"}`}
+                href={path.href}
+              >
+                {path.title}
+              </Link>
+            </div>
+          </Menu>
+        )
+      })}
+    </>
+  )
+}
+export default NavLinks
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
@@ -0,0 +1,74 @@
+import {
+  Disclosure,
+  DisclosureButton,
+  DisclosurePanel,
+} from "@headlessui/react"
+import { MagnifyingGlassIcon } from "@heroicons/react/20/solid"
+import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline"
+import Link from "next/link"
+import LogoCcv from "@/components/assets/LogoCcv"
+import LogoBrown from "@/components/assets/LogoBrown"
+import NavLinks from "@/components/NavLinks"
+
+const Navbar = () => {
+  return (
+    <Disclosure as="nav" className="bg-neutral-50 shadow">
+      <div className="mx-auto max-w-7xl p-2 sm:px-4 lg:px-8">
+        <div className="flex flex-col gap-3.5 xl:flex-row xl:h-16 xl:justify-between">
+          <div className="flex justify-between px-2 lg:px-0">
+            <div className="flex flex-shrink-0 items-center gap-3">
+              <a href="https://it.brown.edu/" target="_blank">
+                <span className="sr-only">Brown IT Website</span>
+                <LogoBrown width={115} />
+              </a>
+              <Link href="/">
+                <span className="sr-only">Home</span>
+                <LogoCcv width={95} />
+              </Link>
+            </div>
+            <div className="hidden xl:ml-6 xl:flex xl:items-center xl:space-x-8">
+              <NavLinks />
+            </div>
+            <section className="flex items-center px-2 gap-10 space-x-4 xl:ml-6">
+              <div className="w-full max-w-lg xl:max-w-xs">
+                <label htmlFor="search" className="sr-only">
+                  Search
+                </label>
+                <div className="relative">
+                  <button className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+                    <MagnifyingGlassIcon
+                      aria-hidden="true"
+                      className="h-5 w-5 text-neutral-300"
+                    />
+                  </button>
+                </div>
+              </div>
+              <div className="flex items-center xl:hidden">
+                {/* Mobile menu button */}
+                <DisclosureButton className="group relative inline-flex items-center justify-center rounded-md p-2 text-neutral-700 ">
+                  <span className="absolute -inset-0.5" />
+                  <span className="sr-only">Open main menu</span>
+                  <Bars3Icon
+                    aria-hidden="true"
+                    className="block h-6 w-6 group-data-[open]:hidden"
+                  />
+                  <XMarkIcon
+                    aria-hidden="true"
+                    className="hidden h-6 w-6 group-data-[open]:block"
+                  />
+                </DisclosureButton>
+              </div>
+            </section>
+          </div>
+        </div>
+      </div>
+
+      <DisclosurePanel className="xl:hidden">
+        <div className="space-y-1 pb-3 pt-2">
+          <NavLinks linkType="mobile" />
+        </div>
+      </DisclosurePanel>
+    </Disclosure>
+  )
+}
+export default Navbar
diff --git a/components/assets/LogoBrown.tsx b/components/assets/LogoBrown.tsx
@@ -1,6 +1,11 @@
 import React from "react"
 
-const LogoBrown: React.FC = () => {
+export interface LogoProps {
+  width?: number
+  height?: number
+}
+
+const LogoBrown: React.FC<LogoProps> = ({ width = 75 }) => {
   return (
     <>
       <svg
@@ -9,7 +14,7 @@ const LogoBrown: React.FC = () => {
         xmlns="http://www.w3.org/2000/svg"
         x="0px"
         y="0px"
-        width="100%"
+        width={width}
         viewBox="0 0 3078 1273"
         enableBackground="new 0 0 3078 1273"
       >

diff --git a/components/assets/LogoCcv.tsx b/components/assets/LogoCcv.tsx
@@ -1,12 +1,14 @@
 import React from "react"
+import { LogoProps } from "@/components/assets/LogoBrown"
 
-const LogoCcv: React.FC = () => {
+const LogoCcv: React.FC<LogoProps> = ({ width = 75 }) => {
   return (
     <>
       <svg
         id="ccv-logo"
         version="1.1"
         xmlns="http://www.w3.org/2000/svg"
+        width={width}
         x="0px"
         y="0px"
         viewBox="0 0 810 306"