Add mobile nav

components/MobileNav.tsx

@@ -0,0 +1,64 @@
+import { FC, useContext } from 'react';
+import { DarkModeContext } from './DarkMode';
+import styled from 'styled-components';
+import IconButton from './IconButton';
+import Button from './Button';
+
+interface Props {
+	open: boolean;
+	close: () => void;
+}
+
+interface StyledProps {
+	dark: boolean;
+	open: boolean;
+}
+
+const Bar = styled.nav<StyledProps>`
+	position: fixed;
+	z-index: 2;
+	top: 0;
+	right: 0;
+	transform-origin: right;
+	transform: ${({ open }) => (open ? 'translateX(0%)' : 'translateX(100%)')};
+	width: 80%;
+	height: 100vh;
+	background: ${({ theme, dark }) => (dark ? theme.colors.dark.text : theme.colors.light.text)};
+	transition: transform 250ms ease-in-out;
+	display: grid;
+	grid-template-rows: auto;
+	row-gap: 0.3rem;
+	padding: 1rem 1rem 5rem 1rem;
+
+	.close {
+		justify-self: flex-end;
+		align-self: flex-start;
+		margin-top: 0.5rem;
+	}
+
+	.mobile {
+		color: ${({ theme, dark }) =>
+			dark ? theme.colors.light.text : theme.colors.dark.text} !important;
+		margin: 0rem 1rem;
+	}
+`;
+
+const MobileNav: FC<Props> = ({ open, close }) => {
+	const { dark, toggle } = useContext(DarkModeContext);
+
+	return (
+		<Bar dark={dark} open={open}>
+			<div className='close'>
+				<IconButton icon={dark ? '/dark-close.svg' : '/light-close.svg'} onClick={close} />
+			</div>
+			<Button className='mobile'>About</Button>
+			<Button className='mobile'>Blog</Button>
+			<Button className='mobile'>Portfolio</Button>
+			<Button className='mobile' onClick={() => toggle()}>
+				{dark ? 'Light Mode' : 'Dark Mode'}
+			</Button>
+		</Bar>
+	);
+};
+
+export default MobileNav;

components/Nav.tsx

@@ -1,10 +1,11 @@
-import { FC, useContext } from 'react';
+import { FC, useContext, useState } from 'react';
 import { DarkModeContext } from './DarkMode';
 import styled from 'styled-components';
 import Image from 'next/image';
 import Button from './Button';
 import IconButton from './IconButton';
 import { useRouter } from 'next/router';
+import MobileNav from './MobileNav';
 
 const Bar = styled.nav`
 	user-select: none;
@@ -16,12 +17,20 @@ const Bar = styled.nav`
 
 	h2 {
 		font-size: 1.7rem;
+
+		@media (max-width: 768px) {
+			font-size: 1.2rem;
+		}
 	}
 
 	div {
 		display: grid;
 		align-items: center;
 		column-gap: 1rem;
+
+		@media (max-width: 768px) {
+			column-gap: 0.5rem;
+		}
 	}
 
 	.logo {
@@ -33,10 +42,25 @@ const Bar = styled.nav`
 	.buttons {
 		grid-template-columns: repeat(5, auto);
 		justify-content: flex-end;
+
+		@media (max-width: 768px) {
+			display: none;
+		}
+	}
+
+	.mobile-buttons {
+		display: none;
+
+		@media (max-width: 768px) {
+			display: grid;
+			grid-template-columns: repeat(2, auto);
+			justify-content: flex-end;
+		}
 	}
 `;
 
 const Nav: FC = () => {
+	const [mobileNavOpen, setMobileNavOpen] = useState<boolean>(false);
 	const { dark, toggle } = useContext(DarkModeContext);
 	const router = useRouter();
 
@@ -55,6 +79,16 @@ const Nav: FC = () => {
 					Resume
 				</Button>
 			</div>
+			<div className='mobile-buttons'>
+				<Button variant='outline' onClick={() => router.push('/resume.pdf')}>
+					Resume
+				</Button>
+				<IconButton
+					icon={dark ? '/light-menu.svg' : '/dark-menu.svg'}
+					onClick={() => setMobileNavOpen(true)}
+				/>
+			</div>
+			<MobileNav open={mobileNavOpen} close={() => setMobileNavOpen(false)} />
 		</Bar>
 	);
 };