Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feat: initialize navbar #19

Open
wants to merge 12 commits into
base: main
Choose a base branch
from
+420 −37
Open

Feat: initialize navbar #19

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
de5ce4d
feat: ccv logo
hetd54 Aug 23, 2024
a446f4d
feat: brown logo
hetd54 Aug 23, 2024
bfd8b36
Merge branch 'main' into feat-navbar
hetd54 Oct 10, 2024
a4018a3
style: colors of body to match existing site
hetd54 Oct 10, 2024
90f4cfd
refactor: use logos from main
hetd54 Oct 10, 2024
34c797d
feat: navbar with main routes
hetd54 Oct 10, 2024
71157ed
chore: add back in default tailwind colors too
hetd54 Oct 22, 2024
df11be3
chore: add headlessui and heroicons
hetd54 Oct 22, 2024
6b9d3bd
feat: add section for mobile-styled links
hetd54 Oct 22, 2024
9b02fa6
style: make text larger
hetd54 Oct 22, 2024
5923c36
feat: tailwindui styled navbar
hetd54 Oct 22, 2024
9b59a9b
style: searchbar columns when it is too crowded
hetd54 Oct 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 2 additions & 11 deletions app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
@layer base {
:root {
@apply font-body;
@apply text-base;
@apply text-xl;
@apply text-neutral-700;
--accent: 0, 128, 108;
--accent-light: 0, 230, 195;
Expand All @@ -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;
}
}


Expand Down
6 changes: 5 additions & 1 deletion app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"] })

Expand All @@ -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>
)
}
5 changes: 1 addition & 4 deletions app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,6 @@ 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>
)
}
55 changes: 55 additions & 0 deletions components/NavLinks.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
"use client"
import Link from "next/link"
import { usePathname } from "next/navigation"
import { DisclosureButton } from "@headlessui/react"
import React from "react"

interface NavLinksProps {
linkType?: string
}

const NavLinks: React.FC<NavLinksProps> = ({ linkType }) => {
const paths = [
{ slug: "/services", title: "Services" },
{ slug: "/our-work", title: "Our Work" },
{ slug: "/help", title: "Help" },
{ slug: "/about", title: "About" },
{ slug: "/blog", title: "Blog" },
]
const pathname = usePathname()
if (linkType === "mobile") {
//block border-l-4 border-transparent py-2 pl-3 pr-4 text-base font-medium text-gray-600 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-800
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

delete?

return (
<>
{paths.map((path) => {
return (
<DisclosureButton
key={path.slug}
as="a"
href={path.slug}
className={`block border-l-4 font-medium py-2 pl-3 pr-4 hover:border-gray-300 hover:text-secondary-blue-500 ${pathname === path.slug ? "active text-secondary-blue-500 border-secondary-blue-500" : "border-transparent text-neutral-700"}`}
>
{path.title}
</DisclosureButton>
)
})}
</>
)
}
return (
<>
{paths.map((path) => {
return (
<Link
key={path.slug}
className={`inline-flex items-center border-b-2 px-1 pt-1 font-medium hover:border-gray-300 hover:text-secondary-blue-500 ${pathname === path.slug ? "active text-secondary-blue-500 border-b-2 border-secondary-blue-500" : "border-transparent text-neutral-700"}`}
href={path.slug}
>
{path.title}
</Link>
)
})}
</>
)
}
export default NavLinks
100 changes: 100 additions & 0 deletions components/Navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
import LogoCcv from "@/components/assets/LogoCcv"
import LogoBrown from "@/components/assets/LogoBrown"
import NavLinks from "@/components/NavLinks"

import {
Disclosure,
DisclosureButton,
DisclosurePanel,
} from "@headlessui/react"
import {
MagnifyingGlassIcon,
DocumentTextIcon,
} from "@heroicons/react/20/solid"
import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline"
import Link from "next/link"

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={105} />
</Link>
</div>
<div className="hidden lg:ml-6 lg:flex lg:items-center lg:space-x-8">
<NavLinks />
</div>
<div className="flex items-center lg:hidden">
{/* Mobile menu button */}
<DisclosureButton className="group relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
<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>
</div>
<div className="flex flex-1 items-center justify-center px-2 gap-10 lg:ml-6">
<div>
<a
href="https://docs.ccv.brown.edu"
target="_blank"
aria-label="CCV Services' Documentation"
className="bg-white text-secondary-blue-700 inline-flex items-center rounded-md px-3 py-2 "
>
Docs
<DocumentTextIcon
aria-hidden="true"
className="h-5 w-5 text-secondary-blue-700"
/>
</a>
</div>

<div className="w-full max-w-lg lg:max-w-xs">
<label htmlFor="search" className="sr-only">
Search
</label>
<div className="relative">
<div 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-gray-400"
/>
</div>
<input
id="search"
name="search"
type="search"
placeholder="Search"
className="block w-full rounded-md border-0 bg-white py-1.5 pl-10 pr-3 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
/>
</div>
</div>
</div>
</div>
</div>

<DisclosurePanel className="lg:hidden">
<div className="space-y-1 pb-3 pt-2">
<NavLinks linkType="mobile" />
</div>
</DisclosurePanel>
</Disclosure>
)
}
export default Navbar
9 changes: 7 additions & 2 deletions components/assets/LogoBrown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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"
>
Expand Down
4 changes: 3 additions & 1 deletion components/assets/LogoCcv.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
Expand Down
Loading