feat: sidebar toggle button in mobile environment (#161)

* wip

* wip

src/components/layouts/Article/Article.module.scss

@@ -3,7 +3,7 @@
   width: 100%;
   min-width: 200px;
   max-width: 980px;
-  padding: $size-article-padding-small;
+  padding: $size-article-padding-large $size-article-padding-small;
   margin: 0 auto;
 
   @include screen(lg) {

src/components/layouts/Aside/Aside.jsx

@@ -1,5 +1,28 @@
+'use client';
+
+import { useState } from 'react';
+import { HiOutlineMenuAlt2 } from 'react-icons/hi';
+
 import styles from './Aside.module.scss';
 
 export default function Aside({ children }) {
-  return <aside className={styles.aside}>{children}</aside>;
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <>
+      <aside className={`${styles.aside} ${visible ? styles.visible : ''}`}>
+        {children}
+      </aside>
+      <div
+        className={`${styles.div} ${visible ? styles.visible : ''}`}
+        onClick={() => {
+          setVisible(prevState => !prevState);
+        }}
+      >
+        <HiOutlineMenuAlt2 />
+      </div>
+    </>
+  );
 }
+
+// TODO: Add `useMemo` Hook to `${visible ? styles.visible : ''}`.

src/components/layouts/Aside/Aside.module.scss

@@ -1,3 +1,5 @@
+$transition: transform 0.75s ease-in-out;
+
 .aside {
   @include selector-scrollbar($size-2);
 
@@ -6,9 +8,50 @@
   height: calc(100vh - $size-header-height);
   background-color: var(--color-bg-default);
   border-right: $border-default;
+  transition: $transition;
+  transform: translateX(-100%);
+
+  &.visible {
+    transform: translateX(0);
+  }
 
   > ul:not(:last-child) {
     margin: 16px 0;
     border-bottom: $border-default;
   }
+
+  @include screen(xl) {
+    transform: translateX(0);
+  }
+}
+
+.div {
+  @include props-flex-center;
+
+  position: fixed;
+  top: $size-header-height;
+  z-index: 1;
+  width: 32px;
+  height: 32px;
+  background-color: var(--color-bg-inset);
+  border-right: $border-default;
+  border-bottom: $border-default;
+  border-bottom-right-radius: $size-border-radius;
+  transition: $transition;
+  transform: translateX(0);
+
+  &.visible {
+    transform: translateX($size-sidebar-width);
+  }
+
+  > svg {
+    width: 100%;
+    height: 100%;
+    margin: $size-4;
+  }
+
+  @include screen(xl) {
+    opacity: 0;
+    transform: translateX($size-sidebar-width);
+  }
 }

src/components/layouts/Body/Body.module.scss

@@ -15,18 +15,13 @@
   > aside {
     z-index: 1;
     grid-area: 2 / 1 / 3 / 2;
-    transform: translateX(-100%); // TODO: Move to `Aside` component.
   }
 
   > main {
     grid-area: 2 / 1 / 3 / 3;
   }
 
   @include screen(xl) {
-    > aside {
-      transform: translateX(0); // TODO: Move to `Aside` component.
-    }
-
     > main {
       grid-area: 2 / 2 / 3 / 3;
     }

src/components/layouts/Nav/Nav.module.scss

@@ -5,7 +5,7 @@
   top: $size-header-height;
   box-sizing: border-box;
   height: calc(100vh - $size-header-height);
-  padding: $size-article-padding-small;
+  padding: $size-article-padding-large $size-article-padding-small;
   background-color: var(--color-bg-inset);
   border-left: $border-default;