diff --git a/app/globals.css b/app/globals.css index 7cc41ff..bc4dee7 100644 --- 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 index 91309b8..fa35bf3 100644 --- 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 ( - {children} + + + {children} + ) } diff --git a/app/page.tsx b/app/page.tsx index 4d5c1db..18dbd5a 100644 --- 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 ( -
- - -
+
) } diff --git a/components/NavLinks.tsx b/components/NavLinks.tsx new file mode 100644 index 0000000..534b9ae --- /dev/null +++ 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:support@ccv.brown.edu" }, + { + 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 = ({ linkType }) => { + const pathname = usePathname() + if (linkType === "mobile") { + return ( + <> + {navigation.map((path) => { + return ( + + {path.title} + + ) + })} + + ) + } + return ( + <> + {navigation.map((path) => { + return ( + +
+ + {path.title} + +
+ + ) + })} + + ) +} +export default NavLinks diff --git a/components/Navbar.tsx b/components/Navbar.tsx new file mode 100644 index 0000000..1171b74 --- /dev/null +++ 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 ( + +
+
+
+
+ + Brown IT Website + + + + Home + + +
+
+ +
+
+
+ +
+ +
+
+
+ {/* Mobile menu button */} + + + Open main menu + +
+
+
+
+
+ + +
+ +
+ + + ) +} +export default Navbar diff --git a/components/assets/LogoBrown.tsx b/components/assets/LogoBrown.tsx index 9fbdfdb..b316dc6 100644 --- 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 = ({ width = 75 }) => { return ( <> { 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 index a4cc1a2..bc6acd0 100644 --- 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 = ({ width = 75 }) => { return ( <>