Skip to content

Commit

Permalink
FAQ updated - some styling nits
Browse files Browse the repository at this point in the history
  • Loading branch information
@ryqndev
ryqndev committed Oct 3, 2023
1 parent f0349ce commit 3fe09a5
Show file tree
Hide file tree
Showing 6 changed files with 366 additions and 231 deletions.
251 changes: 117 additions & 134 deletions src/app/components/Nav/Nav.js
View file
Original file line number Diff line number Diff line change
@@ -1,142 +1,125 @@
import { useState, memo } from 'react';
import { Link, useLocation } from 'react-router-dom';
import { useState, memo } from "react";
import { Link, useLocation } from "react-router-dom";

import { Text } from 'app/components';
import { Space, Icon } from 'app/Symbols';
import socials from 'assets/data/socials.json';
import { Text } from "app/components";
import { Space, Icon } from "app/Symbols";
import socials from "assets/data/socials.json";

import './Nav.scss';
import "./Nav.scss";

const Nav = () => {
const { pathname } = useLocation();
const [mobileExpand, setMobileExpand] = useState(false);
const toggleMobileExpand = () => {
setMobileExpand(!mobileExpand);
};
if (pathname === '/designathon22/' || pathname === '/designathon22')
return <></>;
const { pathname } = useLocation();
const [mobileExpand, setMobileExpand] = useState(false);
const toggleMobileExpand = () => {
setMobileExpand(!mobileExpand);
};
if (pathname === "/designathon22/" || pathname === "/designathon22")
return <></>;

return (
<nav>
<div id='nav' mobile-expand={mobileExpand ? 'true' : 'false'}>
<div className='wrapper center wide'>
<div className='center row group left'>
{pathname === '/' ? (
<>
<Space w='8' />
{socials.map(({ name, icons, link }) => (
<a
key={name}
target='_blank'
rel='noreferrer noopener'
href={link}
className='item social center'
>
<Icon
w='24'
h='24'
hoverable
src={icons.nav}
/>
</a>
))}
</>
) : (
<Link to='/' className='item center brand'>
<Icon w='24' h='24' src='logo.svg' />
<Space w='16' />
<Text>Design at UCI</Text>
</Link>
)}
</div>
<div className='center row group'>
<Link to='/join' className='item center'>
<Text>Join</Text>
</Link>
<Link to='/events' className='item center'>
<Text>Events</Text>
</Link>
<Link to='/resources' className='item center'>
<Text>Resources</Text>
</Link>
<Link to='/merch' className='item center'>
<Text>Merch</Text>
</Link>
</div>
<div className='center row group right'>
<Link to='/about' className='item center'>
<Text>About</Text>
</Link>
<Link to='/contact' className='item center'>
<Text>Contact</Text>
</Link>
</div>
</div>
<div className='wrapper center mobile'>
<div className='center row group left'>
{pathname === '/' ? (
<>
<Space w='8' />
{socials.map(({ name, icons, link }) => (
<a
key={name}
href={link}
className='item social center'
>
<Icon
w='24'
h='24'
hoverable
src={icons.nav}
/>
</a>
))}
</>
) : (
<Link to='/' className='item center brand'>
<Icon w='24' h='24' src='logo.svg' />
<Space w='24' />
<Text>Design at UCI</Text>
</Link>
)}
</div>
<div className='center row group right'>
<button
className='item center'
id='navToggle'
onClick={toggleMobileExpand}
style={{
border: 'none',
display: 'inline-block',
padding: '16px',
}}
>
<Icon w='24' h='24' src='nav-menu.svg' />
</button>
</div>
<div className='links spaceChildren'>
{[
{ label: 'Events', url: '/events' },
{ label: 'Resources', url: '/resources' },
{ label: 'About', url: '/about' },
{ label: 'Contact', url: '/contact' },
{ label: 'Merch', url: '/merch' },
].map(({ label, url }) => (
<Link key={url} to={url} className='item center'>
<Text size='L'>{label}</Text>
</Link>
))}
<Link
to='/join'
className='item center button fill sky'
>
<Text size='L'>Join</Text>
</Link>
</div>
</div>
</div>
</nav>
);
return (
<nav>
<div id="nav" mobile-expand={mobileExpand ? "true" : "false"}>
<div className="wrapper center wide">
<div className="center row group left">
{pathname === "/" ? (
<>
<Space w="8" />
{socials.map(({ name, icons, link }) => (
<a
key={name}
target="_blank"
rel="noreferrer noopener"
href={link}
className="item social center"
>
<Icon w="24" h="24" hoverable src={icons.nav} />
</a>
))}
</>
) : (
<Link to="/" className="logo item center brand">
<Icon w="24" h="24" src="logo.svg" />
<Space w="16" />
<Text>Design at UCI</Text>
</Link>
)}
</div>
<div className="center row group">
<Link to="/join" className="item center">
<Text>Join</Text>
</Link>
<Link to="/events" className="item center">
<Text>Events</Text>
</Link>
<Link to="/resources" className="item center">
<Text>Resources</Text>
</Link>
<Link to="/merch" className="item center">
<Text>Merch</Text>
</Link>
</div>
<div className="center row group right">
<Link to="/about" className="item center">
<Text>About</Text>
</Link>
<Link to="/contact" className="item center">
<Text>Contact</Text>
</Link>
</div>
</div>
<div className="wrapper center mobile">
<div className="center row group left">
{pathname === "/" ? (
<>
<Space w="8" />
{socials.map(({ name, icons, link }) => (
<a key={name} href={link} className="item social center">
<Icon w="24" h="24" hoverable src={icons.nav} />
</a>
))}
</>
) : (
<Link to="/" className="item center brand">
<Icon w="24" h="24" src="logo.svg" />
<Space w="24" />
<Text>Design at UCI</Text>
</Link>
)}
</div>
<div className="center row group right">
<button
className="item center"
id="navToggle"
onClick={toggleMobileExpand}
style={{
border: "none",
display: "inline-block",
padding: "16px",
}}
>
<Icon w="24" h="24" src="nav-menu.svg" />
</button>
</div>
<div className="links spaceChildren">
{[
{ label: "Events", url: "/events" },
{ label: "Resources", url: "/resources" },
{ label: "About", url: "/about" },
{ label: "Contact", url: "/contact" },
{ label: "Merch", url: "/merch" },
].map(({ label, url }) => (
<Link key={url} to={url} className="item center">
<Text size="L">{label}</Text>
</Link>
))}
<Link to="/join" className="item center button fill sky">
<Text size="L">Join</Text>
</Link>
</div>
</div>
</div>
</nav>
);
};

export default memo(Nav);
8 changes: 6 additions & 2 deletions src/app/components/Nav/Nav.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,10 @@
padding: 0 48px;
z-index: 1000;
background: white;

& .logo {
min-width: 190px;
}

& .wrapper {
display: grid;
Expand Down Expand Up @@ -38,7 +42,7 @@
}


@media screen and (max-width: 768px) {
@media screen and (max-width: 800px) {
padding: 0 16px;
box-shadow: 0 0px 128px 64px #6670;

Expand Down Expand Up @@ -96,7 +100,7 @@
}


@media only screen and (min-width: 768px) {
@media only screen and (min-width: 800px) {
#nav.shrink>.wrapper {
height: 66px;
}
Expand Down
Loading

0 comments on commit 3fe09a5

Please sign in to comment.