Skip to content

Created Navbar Component (#18) #41

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

Open
wants to merge 5 commits into
base: develop
Choose a base branch
from
+47 −1
Open

Created Navbar Component (#18) #41

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3c25b25
Add basic NavBar component
reiiiiiiiiii Sep 24, 2025
9d62126
Created NavBar design
t1np0t Sep 24, 2025
cf481f2
Match navbar to wireframe
reiiiiiiiiii Oct 1, 2025
55b6bd8
Update profile image as MUI IconButton
reiiiiiiiiii Oct 3, 2025
c2d61e0
Add tooltip and update profile icon
reiiiiiiiiii Oct 7, 2025
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
7 changes: 6 additions & 1 deletion src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import type { Metadata } from 'next';
import NavBar from '@components/NavBar';

export const metadata: Metadata = {
alternates: {
Expand All @@ -7,7 +8,11 @@ export const metadata: Metadata = {
};

const Home = () => {
return 'UTD Notebook';
return (
<>
<NavBar />
</>
);
};

export default Home;
41 changes: 41 additions & 0 deletions src/components/NavBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import React from 'react';
import Link from 'next/link';
import Image from 'next/image';
import { IconButton, Tooltip } from '@mui/material';

export default function NavBar() {
return (
<>
<div className="bg-darken relative flex flex-wrap items-center gap-x-2 gap-y-0 overflow-hidden border-b-1 px-4 py-1 sm:flex-nowrap md:gap-x-4 md:px-8 md:py-1 lg:gap-x-8 lg:px-16">
<Image
src={'/background.png'}
alt="background"
className="-z-10 object-cover"
fill
/>

<Link
href="/"
className="font-display flex items-center gap-2 text-lg font-medium md:text-xl md:font-bold"
>
UTD Notebook
</Link>

<div className="ml-auto flex items-center gap-x-2 md:gap-x-4">
<Tooltip title="Profile">
<IconButton size="medium" href="/profile">
<div className="relative size-10 flex-shrink-0 md:size-12">
<Image
src="/icon-white.svg"
alt="profile picture"
fill
className="rounded-full border-2 border-white object-cover"
/>
</div>
</IconButton>
</Tooltip>
</div>
</div>
</>
);
}