Add Resize the room sidepanel using a hoverable tool

.changeset/add_resize-side-panel.md

@@ -0,0 +1,5 @@
+---
+default: minor
+---
+
+Add Resize the room sidepanel using a hoverable tool

src/app/components/nav/styles.css.ts

@@ -9,6 +9,7 @@ export const NavCategory = style([
   DefaultReset,
   {
     position: 'relative',
+    overflow: 'scroll',
   },
 ]);
 

src/app/components/page/style.css.ts

@@ -6,6 +6,9 @@ import { DefaultReset, color, config, toRem } from 'folds';
 export const PageNav = recipe({
   variants: {
     size: {
+      '100%': {
+        width: '100%',
+      },
       '400': {
         width: toRem(256),
       },
@@ -15,7 +18,7 @@ export const PageNav = recipe({
     },
   },
   defaultVariants: {
-    size: '400',
+    size: '100%',
   },
 });
 export type PageNavVariants = RecipeVariants<typeof PageNav>;

src/app/features/room-nav/RoomNavCategoryButton.tsx

@@ -1,26 +1,48 @@
-import { as, Chip, Icon, Icons, Text } from 'folds';
+import { as, Chip, Icon, IconButton, Icons, Text } from 'folds';
 import classNames from 'classnames';
 import * as css from './styles.css';
 
 export const RoomNavCategoryButton = as<'button', { closed?: boolean }>(
-  ({ className, closed, children, ...props }, ref) => (
-    <Chip
-      className={classNames(css.CategoryButton, className)}
-      variant="Background"
-      radii="400"
-      after={
+  ({ className, closed, children, ...props }, ref) => {
+    if (children)
+      return (
+        <Chip
+          className={classNames(css.CategoryButton, className)}
+          variant="Background"
+          radii="400"
+          before={
+            <Icon
+              className={css.CategoryButtonIcon}
+              size="50"
+              src={closed ? Icons.ChevronRight : Icons.ChevronBottom}
+            />
+          }
+          {...props}
+          ref={ref}
+        >
+          {children && (
+            <Text size="B400" priority="300" truncate>
+              {children}
+            </Text>
+          )}
+        </Chip>
+      );
+    return (
+      <IconButton
+        className={classNames(css.CategoryButton, className)}
+        variant="Background"
+        radii="400"
+        {...props}
+        style={{ padding: '0' }}
+        ref={ref}
+      >
         <Icon
           className={css.CategoryButtonIcon}
           size="50"
+          style={{ padding: '0' }}
           src={closed ? Icons.ChevronRight : Icons.ChevronBottom}
         />
-      }
-      {...props}
-      ref={ref}
-    >
-      <Text size="B400" priority="300" truncate>
-        {children}
-      </Text>
-    </Chip>
-  )
+      </IconButton>
+    );
+  }
 );