Add mobile nav

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>
 	);
 };