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;