responsive navbar

src/components/common/Nav.tsx

@@ -1,22 +1,68 @@
-import React from 'react';
-import tw, { styled } from 'twin.macro';
+import React, { useState } from 'react';
+import tw, { styled, theme } from 'twin.macro';
 import { Icon } from '~/components/ui/icons/Icon';
 import { Link } from 'gatsby';
 import { Groups } from '~/components/ui/groups/Groups';
+import cn from 'classnames';
 
 const Root = styled.nav`
-	${tw`bg-blue-600 text-white flex items-center justify-between`}
+	${tw`bg-blue-600 flex flex-col sm:flex-row sm:items-center justify-between text-white relative`}
 	min-height: 2rem;
 `;
 
 const NavLink = styled(Link)`
 	${tw`h-full block flex items-center px-3`}
 `;
 
+const HamburgerButton = styled.button<{ open: boolean }>`
+	${tw`block sm:hidden focus:outline-none mr-2`}
+	cursor: pointer;
+	width: 48px;
+	height: 48px;
+	transition: all 0.25s;
+
+	> span {
+		content: '';
+		position: absolute;
+		width: 24px;
+		background: ${theme('colors.white')};
+		height: 2px;
+		transform: rotate(0);
+		transition: all 0.2s;
+	}
+
+	> span:first-child {
+		transform: translateY(-5px);
+
+		${({ open }) =>
+			open &&
+			`
+			 transform: rotate(45deg)
+   		 translateY(0px);
+		`}
+	}
+
+	> span:last-child {
+		transform: translateY(3px);
+
+		${({ open }) =>
+			open &&
+			`
+			 transform: rotate(-45deg)
+   		 translateY(0px);
+		`}
+	}
+
+	.hamburger:hover > span {
+		background: #333;
+	}
+`;
+
 export function Nav({ profile: { github, linkedin, facebook } }) {
+	const [open, setOpen] = useState(false);
 	return (
 		<Root>
-			<div>
+			<div tw={'flex items-center justify-between'}>
 				<Groups
 					className={'flex p-2 items-center justify-center md:justify-start'}
 					size={2}
@@ -31,9 +77,25 @@ export function Nav({ profile: { github, linkedin, facebook } }) {
 						<Icon name={'facebook'} size={24} />
 					</a>
 				</Groups>
+				<HamburgerButton
+					open={open}
+					type='button'
+					onClick={() => setOpen(!open)}
+				>
+					<span />
+					<span />
+				</HamburgerButton>
 			</div>
-			<div tw={'self-stretch'}>
-				<NavLink to='/' activeClassName='bg-accent'>
+
+			<div
+				tw={
+					'self-stretch sm:flex flex-col sm:flex-row sm:items-center sm:w-auto absolute sm:static top-full w-full'
+				}
+				className={cn({
+					hidden: !open,
+				})}
+			>
+				<NavLink to='/' activeClassName='bg-accent' className={'sm:p-0 p-2 '}>
 					<Icon name={'home'} className={'mr-2'} size={20} /> Home
 				</NavLink>
 			</div>

tailwind.config.js

@@ -155,6 +155,10 @@ module.exports = {
 		}),
 
 		extend: {
+			inset: {
+				full: '100%',
+				'1/2': '50%',
+			},
 			colors: {
 				secondary: '#d1e0f4',
 				primary: '#41A4F5',