Allow collapsing the side menu

Closes #487

components/layout/Nav.tsx

@@ -1,8 +1,10 @@
-import { Box, Flex } from "@chakra-ui/react";
+import { Box, Flex, IconButton } from "@chakra-ui/react";
 import MyLink from "components/common/MyLink";
 import { useActiveNavItem, useMyTheme } from "hooks/common";
 import Image from "next/image";
 import { useRouter } from "next/router";
+import { useState } from "react";
+import { FiArrowLeft, FiArrowRight } from "react-icons/fi";
 import { navItems } from "utils/constants";
 import UserItem from "./UserItem";
 
@@ -10,11 +12,15 @@ const Nav = () => {
   const router = useRouter();
   const navItem = useActiveNavItem();
   const { bgColor, secondaryBgColor, themeColorHex } = useMyTheme();
+  const [expanded, setExpanded] = useState(() =>
+    JSON.parse(window.localStorage.getItem("nav-expanded") ?? "true")
+  );
 
   if (router.pathname === "/") return null;
 
   return (
     <Box
+      width={expanded ? "175px" : "80px"}
       as="nav"
       flexShrink={0}
       position="sticky"
@@ -49,13 +55,26 @@ const Nav = () => {
                   width={32}
                   priority
                 />
-                <Box ml={2}>{name}</Box>
+                {expanded && <Box ml={2}>{name}</Box>}
               </Flex>
             </MyLink>
           </Box>
         );
       })}
-      <UserItem />
+      <UserItem expanded={expanded} />
+
+      <IconButton
+        icon={expanded ? <FiArrowLeft /> : <FiArrowRight />}
+        aria-label={expanded ? "Collapse menu" : "Expand menu"}
+        variant="ghost"
+        ml={4}
+        mt={2}
+        onClick={() => {
+          window.localStorage.setItem("nav-expanded", String(!expanded));
+          setExpanded(!expanded);
+        }}
+        borderRadius="50%"
+      />
     </Box>
   );
 };

components/layout/UserItem.tsx

@@ -3,7 +3,7 @@ import MyLink from "components/common/MyLink";
 import UserAvatar from "components/common/UserAvatar";
 import { useMyTheme, useUser } from "hooks/common";
 
-export const UserItem = () => {
+export const UserItem = ({ expanded }: { expanded: boolean }) => {
   const { secondaryBgColor, bgColor } = useMyTheme();
   const [user] = useUser();
 
@@ -26,7 +26,7 @@ export const UserItem = () => {
         >
           <>
             <UserAvatar user={user} size="sm" />
-            <Box ml={2}>My Page</Box>
+            {expanded && <Box ml={2}>My Page</Box>}
           </>
         </Flex>
       </MyLink>

pages/styles.css

@@ -29,13 +29,13 @@ header {
   row-gap: 1.5rem;
   column-gap: 1.5rem;
   grid-template-rows: 37px 1fr 100px;
-  grid-template-columns: 175px 1fr 175px;
+  grid-template-columns: auto 1fr 175px;
   min-height: 100vh;
 }
 
 @media (max-width: 1200px) {
   #__next {
-    grid-template-columns: 175px 1fr 0px;
+    grid-template-columns: auto 1fr 0px;
   }
 }