feat(ui-components): add collapsible sidebar (#8595)

packages/ui-components/src/Containers/Article/index.module.css

@@ -3,16 +3,15 @@
 .articleLayout {
   @apply max-w-10xl
     ml:grid
-    ml:grid-cols-[--spacing(52)_1fr]
+    ml:grid-cols-[auto_1fr]
     ml:grid-rows-[1fr]
     ml:overflow-visible
     ml:[grid-template-areas:'sidebar_main''sidebar_footer']
     mx-auto
     block
     w-full
-    xl:grid-cols-[--spacing(52)_1fr_--spacing(52)]
-    xl:[grid-template-areas:'sidebar_main_metabar''sidebar_footer_metabar']
-    2xl:grid-cols-[--spacing(80)_1fr_--spacing(80)];
+    xl:grid-cols-[auto_1fr_auto]
+    xl:[grid-template-areas:'sidebar_main_metabar''sidebar_footer_metabar'];
 
   > *:nth-child(1) {
     @apply [grid-area:sidebar]

packages/ui-components/src/Containers/Sidebar/index.module.css

@@ -1,32 +1,73 @@
 @reference "../../styles/index.css";
 
 .wrapper {
-  @apply scrollbar-thin
-    ml:max-w-xs
-    ml:overflow-auto
-    ml:border-r
+  @apply ml:border-r
+    ml:overflow-visible!
+    ml:max-w-[clamp(200px,20vw,320px)]
+    relative
     z-0
     flex
     w-full
     flex-col
-    gap-8
     border-r-0
     border-neutral-200
     bg-white
-    px-4
-    py-6
-    2xl:px-6
+    transition-[transform,width]
+    duration-220
+    ease-out
     dark:border-neutral-900
     dark:bg-neutral-950;
 
-  .navigation {
-    @apply ml:flex
-      hidden;
-  }
+  &[data-collapsed='true'] {
+    @apply ml:w-0
+      overflow-hidden;
 
-  .mobileSelect {
-    @apply ml:hidden
-      flex
-      w-full;
+    .content {
+      @apply invisible;
+    }
   }
 }
+
+.content {
+  @apply scrollbar-thin
+    flex
+    h-full
+    flex-col
+    gap-8
+    overflow-y-auto
+    px-4
+    py-6
+    2xl:min-w-80
+    2xl:px-6;
+}
+
+.navigation {
+  @apply ml:flex
+    hidden;
+}
+
+.mobileSelect {
+  @apply ml:hidden
+    flex
+    w-full;
+}
+
+.toggleButton {
+  @apply absolute
+    top-1/2
+    left-full
+    z-50
+    flex
+    h-12
+    w-6
+    -translate-y-1/2
+    cursor-pointer
+    items-center
+    justify-center
+    bg-green-600
+    text-white
+    outline-none
+    max-xl:hidden;
+
+  clip-path: polygon(0 0, 100% 25%, 100% 75%, 0 100%);
+}

packages/ui-components/src/Containers/Sidebar/index.tsx

@@ -1,4 +1,7 @@
-import { forwardRef } from 'react';
+'use client';
+
+import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/solid';
+import { forwardRef, useState } from 'react';
 
 import WithNoScriptSelect from '#ui/Common/Select/NoScriptSelect';
 import SidebarGroup from '#ui/Containers/Sidebar/SidebarGroup';
@@ -21,6 +24,8 @@ type SidebarProps = {
 
 const SideBar = forwardRef<HTMLElement, PropsWithChildren<SidebarProps>>(
   ({ groups, pathname, title, onSelect, as, children, placeholder }, ref) => {
+    const [isOpen, setIsOpen] = useState(true);
+
     const selectItems = groups.map(({ items, groupName }) => ({
       label: groupName,
       items: items.map(({ label, link }) => ({ value: link, label })),
@@ -31,31 +36,46 @@ const SideBar = forwardRef<HTMLElement, PropsWithChildren<SidebarProps>>(
       .find(item => pathname === item.value);
 
     return (
-      <aside ref={ref} className={styles.wrapper}>
-        {children}
+      <aside ref={ref} className={styles.wrapper} data-collapsed={!isOpen}>
+        <button
+          type="button"
+          className={styles.toggleButton}
+          onClick={() => setIsOpen(prev => !prev)}
+          aria-label={isOpen ? 'Collapse Sidebar' : 'Expand Sidebar'}
+        >
+          {isOpen ? (
+            <ChevronLeftIcon className="h-4 w-4" />
+          ) : (
+            <ChevronRightIcon className="h-4 w-4" />
+          )}
+        </button>
+
+        <div className={styles.content}>
+          {children}
 
-        {selectItems.length > 0 && (
-          <WithNoScriptSelect
-            label={title}
-            values={selectItems}
-            defaultValue={currentItem?.value}
-            placeholder={placeholder}
-            onChange={onSelect}
-            className={styles.mobileSelect}
-            as={as}
-          />
-        )}
+          {selectItems.length > 0 && (
+            <WithNoScriptSelect
+              label={title}
+              values={selectItems}
+              defaultValue={currentItem?.value}
+              placeholder={placeholder}
+              onChange={onSelect}
+              className={styles.mobileSelect}
+              as={as}
+            />
+          )}
 
-        {groups.map(({ groupName, items }) => (
-          <SidebarGroup
-            key={groupName.toString()}
-            groupName={groupName}
-            items={items}
-            pathname={pathname}
-            as={as}
-            className={styles.navigation}
-          />
-        ))}
+          {groups.map(({ groupName, items }) => (
+            <SidebarGroup
+              key={groupName.toString()}
+              groupName={groupName}
+              items={items}
+              pathname={pathname}
+              as={as}
+              className={styles.navigation}
+            />
+          ))}
+        </div>
       </aside>
     );
   }