Skip to content

Commit 644e917

Browse files
author
Ryan Hodge
committed
Adding the nav bar for now
1 parent c2471f8 commit 644e917

File tree

16 files changed

+1180
-60
lines changed

16 files changed

+1180
-60
lines changed

‎templerobotics.github.io/app/favicon.ico‎

24.8 KB
Binary file not shown.

‎templerobotics.github.io/app/globals.css‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,44 @@
55
:root {
66
--background: #ffffff;
77
--foreground: #171717;
8+
--foreground-hover: #4e4e4e;
9+
--primary: #9D2235;
810
}
911

12+
/* Dark theme colors */
1013
@media (prefers-color-scheme: dark) {
1114
:root {
1215
--background: #0a0a0a;
1316
--foreground: #ededed;
17+
--foreground-hover: #cccccc;
18+
--primary: #9D2235;
1419
}
1520
}
1621

1722
body {
1823
color: var(--foreground);
1924
background: var(--background);
2025
font-family: Arial, Helvetica, sans-serif;
26+
27+
& * {
28+
height: 100%;
29+
}
30+
}
31+
32+
.flex-vertical {
33+
display: flex;
34+
flex-direction: column;
35+
align-items: center;
36+
gap: 1rem;
37+
}
38+
39+
.flex-horizontal {
40+
display: flex;
41+
flex-direction: row;
42+
align-items: center;
43+
gap: 1rem;
44+
}
45+
46+
.flex-horizontal > * {
47+
align-content: center;
2148
}

‎templerobotics.github.io/app/layout.tsx‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,33 @@
1-
import type { Metadata } from "next";
2-
import { Geist, Geist_Mono } from "next/font/google";
31
import "./globals.css";
42

5-
const geistSans = Geist({
6-
variable: "--font-geist-sans",
7-
subsets: ["latin"],
8-
});
3+
import type { Metadata } from "next";
4+
import { Roboto } from 'next/font/google';
5+
import NavBar from "@components/navigation/NavBar";
6+
import { ThemeProvider } from '@mui/material/styles';
7+
import theme from '@styles/theme';
98

10-
const geistMono = Geist_Mono({
11-
variable: "--font-geist-mono",
12-
subsets: ["latin"],
9+
const roboto = Roboto({
10+
weight: ['300', '400', '500', '700'],
11+
subsets: ['latin'],
12+
display: 'swap',
13+
variable: '--font-roboto',
1314
});
1415

1516
export const metadata: Metadata = {
16-
title: "Create Next App",
17-
description: "Generated by create next app",
17+
title: "Temple Robotics Website",
18+
description: "Learn about the club and our next events!",
1819
};
1920

2021
export default function RootLayout({
21-
children,
22-
}: Readonly<{
23-
children: React.ReactNode;
24-
}>) {
22+
children
23+
}: Readonly<{ children: React.ReactNode }>) {
2524
return (
2625
<html lang="en">
27-
<body
28-
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
29-
>
30-
{children}
26+
<body className={`${roboto.variable} antialiased`} >
27+
<ThemeProvider theme={theme}>
28+
<NavBar/>
29+
{children}
30+
</ThemeProvider>
3131
</body>
3232
</html>
3333
);

‎templerobotics.github.io/app/page.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
1+
// Third party imports
2+
import Title from '@components/home/Title'
13
import React from 'react'
24

3-
export default function Home() {
4-
return <h1>Hello Next.js!</h1>
5+
export default function Home (): React.ReactElement {
6+
return (
7+
<>
8+
<Title/>
9+
</>
10+
)
511
}

‎templerobotics.github.io/app/robotics/page.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
11
import React from 'react'
22

3-
const Robotics = (): React.ReactElement => {
3+
export default function Robotics (): React.ReactElement {
44
return (
55
<div>
66
Robotics page
77
</div>
88
)
99
}
10-
11-
export default Robotics

‎templerobotics.github.io/assets/club-logo.png‎

50.2 KB
Loading

‎templerobotics.github.io/components/home/Title.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from 'react'
2+
3+
const Title = (): React.ReactElement => {
4+
return (
5+
<div className='test-class'>
6+
Home title
7+
</div>
8+
)
9+
}
10+
11+
export default Title

‎templerobotics.github.io/components/navigation/DropDownMenu.module.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+

‎templerobotics.github.io/components/navigation/DropDownMenu.tsx‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
'use client'
2+
3+
import { Link, Menu, MenuItem } from '@mui/material'
4+
5+
import React, { useState } from 'react'
6+
// import { PATHS } from '@utils/Constants'
7+
8+
export default function DropDownMenu (): React.ReactElement {
9+
const [anchorEl, setAnchorEl] = useState<Element | null>(null)
10+
const open = Boolean(anchorEl);
11+
12+
const handleMouseOver = (event: React.MouseEvent) => {
13+
setAnchorEl(event.currentTarget)
14+
};
15+
16+
const handleMouseOut = () => {
17+
setAnchorEl(null)
18+
};
19+
20+
return (
21+
<>
22+
<div
23+
onMouseEnter={handleMouseOver}
24+
aria-controls={open ? 'basic-menu' : undefined}
25+
aria-haspopup="true"
26+
aria-expanded={open ? 'true' : undefined}
27+
className={'flex-horizontal'}>
28+
<Link>Robotics</Link>
29+
</div>
30+
<Menu
31+
id="simple-menu"
32+
anchorEl={anchorEl}
33+
open={open}
34+
onClose={handleMouseOut}
35+
transformOrigin={{
36+
vertical: 'bottom',
37+
horizontal: 'right',
38+
}}
39+
MenuListProps={{ 'aria-labelledby': 'basic-button' }}>
40+
<MenuItem onClick={handleMouseOut}>Profile</MenuItem>
41+
<MenuItem onClick={handleMouseOut}>My account</MenuItem>
42+
<MenuItem onClick={handleMouseOut}>Logout</MenuItem>
43+
</Menu>
44+
</>
45+
)
46+
}

‎templerobotics.github.io/components/navigation/NavBar.module.css‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
.navBar {
2+
justify-content: space-between;
3+
height: 3rem;
4+
background-color: var(--primary);
5+
padding: 0 1rem;
6+
7+
& * {
8+
height: 100%;
9+
}
10+
}
11+
12+
.iconLink {
13+
height: 60%;
14+
}
15+
16+
.image {
17+
width: auto; /* maintain the aspect ratio */
18+
object-fit: contain; /* scale the image to contain within the wrapper */
19+
}

0 commit comments

Comments
 (0)