Skip to content

Commit e0f3939

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

File tree

16 files changed

+1152
-60
lines changed

16 files changed

+1152
-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: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.menuContainer {
2+
height: 100%;
3+
}

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
'use client'
2+
3+
import styles from './DropDownMenu.module.css'
4+
5+
import { Link } from '@mui/material'
6+
7+
import React from 'react'
8+
import { PATHS } from '@utils/Constants'
9+
10+
export default function DropDownMenu (): React.ReactElement {
11+
return (
12+
<div className={`${styles.menuContainer} flex-horizontal`}>
13+
<Link onMouseOver={() => console.log('MouseOver')} href={PATHS.ROBOTICS}>Robotics</Link>
14+
</div>
15+
)
16+
}

‎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)