rushilwiz/tj-sga-website-react
1
0
Fork 0
mirror of https://github.com/tjsga/tj-sga-website-react.git synced 2025-04-09 22:50:17 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

Added dropdown to navbar

Browse Source
This commit is contained in:
Michael Fatemi 2020-11-25 21:14:30 -05:00
parent 9297e875a0
commit 2fdfaa954a
3 changed files with 94 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.eslintcache
View File

File diff suppressed because one or more lines are too long

58
src/components/Navbar.tsx
View File

@ -15,8 +15,35 @@ let pages = [
url: '/initiatives',
title: 'Initiatives',
},
{
url: '#',
title: 'What We Do',
items: [
{
url: '/mission',
title: 'Mission and History',
},
{
url:
'https://docs.google.com/document/d/1ftcFGlGiyU4cS5zNX5KLoIm4M1TR90C7btj9nIWxp4M/edit',
title: 'Constitution',
},
{
url:
'https://drive.google.com/open?id=0B7IEunr2_iS7MTcyMDA0NmQtOTFjYy00MWQ2LThiOTItNzg5NmJiZjgxMmIy',
title: 'Meeting Minutes',
},
{
url:
'https://docs.google.com/spreadsheets/d/195ydC8ReqixYX989V_5FurQc5wdt_a7B29PtYzXyqJg/edit?usp=sharing',
title: 'Finance',
},
],
},
];
export function Submenu({ items }) {}
export default function Navbar() {
return (
<div className='nav'>
@ -24,11 +51,32 @@ export default function Navbar() {
<img src='/images/banner.png' alt='TJ SGA' className='nav-logo' />
</Link>
{pages.map((page) => {
return (
<Link key={page.url} className='nav-link' to={page.url}>
{page.title}
</Link>
);
if ('items' in page) {
return (
<div className='submenu-outer'>
<Link key={page.url} className='nav-link' to={page.url}>
{page.title}
</Link>
<div className='submenu-content'>
{/* Most of these are external so we use <a> tags instead of <Link> */}
{page.items?.map((item) => (
<>
<a key={item.url} className='submenu-link' href={item.url}>
{item.title}
</a>
<br />
</>
))}
</div>
</div>
);
} else {
return (
<Link key={page.url} className='nav-link' to={page.url}>
{page.title}
</Link>
);
}
})}
</div>
);

54
src/css/navbar.css
View File

@ -1,25 +1,51 @@
.nav {
width: 100%;
color: #1a202c;
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
color: #1a202c;
display: flex;
flex-direction: row;
align-items: center;
}
.nav-link {
display: block;
padding: 10px;
text-transform: uppercase;
font-weight: 100;
transition: background-color 100ms;
display: block;
padding: 10px;
text-transform: uppercase;
font-weight: 100;
transition: background-color 100ms;
}
.nav-link:hover {
background-color: #ccc;
background-color: #ccc;
}
.nav-logo {
height: 4rem;
align-self: center;
margin: 1rem;
height: 4rem;
align-self: center;
margin: 1rem;
}
.submenu-link {
padding: 10px;
text-transform: uppercase;
font-weight: 100;
display: inline-block;
}
.submenu-outer {
display: block;
position: relative;
}
.submenu-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
padding: 12px 16px;
z-index: 1;
}
.submenu-outer:hover .submenu-content {
display: inline-block;
}