Skip to content

Issue 18 Create Navbar Component and add Breadcrumb Component #80

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

Merged
Fozzyack merged 21 commits into from
Jan 24, 2026
Merged

Issue 18 Create Navbar Component and add Breadcrumb Component #80

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
a820492
added navbar
melbauerr Nov 29, 2025
f8d499f
Navbar button styling
melbauerr Dec 3, 2025
b155ab0
Mobile view styling
melbauerr Dec 10, 2025
1017d75
Add responsive navbar styling
melbauerr Dec 13, 2025
c234df6
mobile view adjustments
melbauerr Dec 13, 2025
05a327f
mobile view adjustments
melbauerr Dec 13, 2025
7d9d137
merge conflicts
MahitGtg Dec 13, 2025
af2e312
Merges main branch
melbauerr Jan 10, 2026
76cc6bc
Sticky navbar
melbauerr Jan 10, 2026
3d5d9ca
format page with prettier
melbauerr Jan 10, 2026
b2c22fe
ClassName redundant changes
melbauerr Jan 10, 2026
e24c4a7
navbar border changed to black
melbauerr Jan 10, 2026
68048b6
navbar adjustments: dropdown and styling
melbauerr Jan 10, 2026
a4bd95a
link to find-my-booking page.tsx
melbauerr Jan 11, 2026
229e2d5
makes mobile nav take up whole screen and centers their icons
Fozzyack Jan 24, 2026
dac1d02
Adds simple breadcrumb componenet for navigation
Fozzyack Jan 24, 2026
eab285a
Merge branch 'main' into issue-18-Create_Navbar_component
Fozzyack Jan 24, 2026
6a9afc0
Adds min height layout header for easier centering page components
Fozzyack Jan 24, 2026
b198808
removes classes that are not needed
Fozzyack Jan 24, 2026
af59fc7
Adds comments in globals.css
Fozzyack Jan 24, 2026
5830310
Running prettier (passing format check)
Fozzyack Jan 24, 2026
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
9 changes: 8 additions & 1 deletion client/src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,14 @@ const montserrat = Montserrat({
export default function RootLayout({ children }: { children: ReactNode }) {
return (
<html lang="en">
<body className={montserrat.variable}>
<body
className={montserrat.variable}
// The following attributes are injected by browser extensions.
// This can cause React hydration warnings. They are safe to ignore or remove.
data-new-gr-c-s-check-loaded="14.1265.0"
data-gr-ext-installed=""
data-gr-ext-disabled="forever"
>
<Providers>
<Navbar />
{children}
Expand Down
9 changes: 6 additions & 3 deletions client/src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,12 @@ export default function Home() {
"flex min-h-screen flex-col items-center gap-4 p-24 font-montserrat",
)}
>
<Button variant="login" onClick={() => setClicked(true)}
className="flex items-center gap-2">
<HiOutlineUser className="h-5 w-5" />
<Button
variant="login"
onClick={() => setClicked(true)}
className="flex items-center gap-2"
>
<HiOutlineUser className="h-5 w-5" />
Ping
</Button>
<p>
Expand Down
2 changes: 1 addition & 1 deletion client/src/components/input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@
import { format } from "date-fns";
import React from "react";

import { Calendar } from "@/components/calendar";
import Badge from "@/components/badge";
import { Calendar } from "@/components/calendar";
import {
Popover,
PopoverContent,
Expand Down
7 changes: 0 additions & 7 deletions client/src/components/ui/button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,6 @@ const buttonVariants = cva(
login: "items-center hover:bg-bloom-yellow rounded-none bg-bloom-gray",
text: "border-b border-transparent hover:border-b hover:border-black",
ghost: "hover:bg-accent hover:text-accent-foreground",
link: "text-primary hover:border-b-2 border-black decoration-2 rounded-none transition-all ease-in-out duration-50",
login:
"flex gap-2 items-center hover:bg-bloom-yellow rounded-none bg-slate-200",
outline: "border border-2 border-black hover:bg-bloom-blue-light",
confirm: "bg-bloom-blue hover:bg-bloom-blue-light",
warning: "bg-bloom-red text-white hover:bg-bloom-red-light",
booking: "bg-bloom-orbit text-white hover:bg-bloom-orbit-light",
},
size: {
default: "h-10 px-4 py-2",
Expand Down
43 changes: 24 additions & 19 deletions client/src/components/ui/navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@ export default function Navbar() {
const [open, setOpen] = useState(false);

return (
<nav className="w-full border-b bg-white">
<div className="mx-auto flex max-w-6xl items-center justify-between px-4 py-3">
<nav className="sticky top-0 z-50 w-full border-b-2 border-black bg-white">
<div className="max-w-8xl mx-auto flex items-center justify-between px-12 py-3">
{/* logo */}
<Link href="/" className="text-xl font-semibold">
<Image src="/logo.png" width={50} height={50} alt="logo" />
Expand Down Expand Up @@ -47,13 +47,13 @@ export default function Navbar() {

{/* desktop */}
<div className="hidden items-center gap-6 md:flex">
<Link href="/" className="hover:text-primary">
<Link href="/">
<Button variant="outline">Book room</Button>
</Link>
<Link href="/bookings" className="hover:text-primary">
<Button variant="link">Find my booking</Button>
<Link href="/find-my-booking">
<Button variant="text">Find my booking</Button>
</Link>
<Link href="/admin" className="hover:text-primary">
<Link href="/admin">
<Button variant="login">
<HiOutlineUser className="h-5 w-5" />
Admin login
Expand All @@ -64,20 +64,25 @@ export default function Navbar() {

{/* mobile hamburger */}
{open && (
<div className="m-6 flex flex-col items-end px-8 pb-4 md:hidden">
<Link href="/" className="hover:text-primary">
<Button variant="outline">Book room</Button>
</Link>
<Link href="/bookings" className="-mx-4 mt-4 hover:text-primary">
<Button variant="link">Find my booking</Button>
</Link>
<div className="-mx-2 mt-20">
<Link href="/admin" className="hover:text-primary">
<Button variant="login">
<HiOutlineUser className="h-5 w-5" />
Admin login
</Button>
<div className="absolute left-0 top-full max-h-screen w-full overflow-y-auto bg-white md:hidden">
<div className="flex h-full flex-col items-end gap-6 px-8 py-6">
Copy link
Contributor

@Fozzyack Fozzyack Jan 17, 2026

Choose a reason for hiding this comment

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

items-end can be changed top items-center

<Link href="/">
<Button variant="outline">Book room</Button>
</Link>
<Link
href="/find-my-booking"
className="-mx-4 mt-4 hover:text-primary"
>
<Button variant="text">Find my booking</Button>
</Link>
<div className="-mx-2 mt-20">
<Link href="/admin">
<Button variant="login">
<HiOutlineUser className="h-5 w-5" />
Admin login
</Button>
</Link>
</div>
</div>
</div>
)}
Expand Down