Merge pull request #364 from qoretechnologies/feature/rework-sidebar

Remove Sidebar component in favor of improved `ReqoreMenu`

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qoretechnologies/reqore",
-  "version": "0.39.0",
+  "version": "0.40.0",
   "description": "ReQore is a highly theme-able and modular UI library for React",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

src/components/ControlGroup/index.tsx

@@ -17,16 +17,14 @@ import { StyledEffect } from '../Effect';
 import { StyledHeader } from '../Header';
 import { StyledParagraph } from '../Paragraph';
 
-export interface IReqoreControlGroupProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    IWithReqoreFlat,
+export interface IReqoreControlGroupComponentProps
+  extends IWithReqoreFlat,
     IWithReqoreSize,
     IWithReqoreMinimal,
     IReqoreIntent,
     IWithReqoreFluid,
     IWithReqoreCustomTheme {
   stack?: boolean;
-  children: any;
   fixed?: boolean;
   rounded?: boolean;
   responsive?: boolean;
@@ -54,6 +52,12 @@ export interface IReqoreControlGroupProps
   fill?: boolean;
 }
 
+export interface IReqoreControlGroupProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    IReqoreControlGroupComponentProps {
+  children: any;
+}
+
 export interface IReqoreControlGroupStyle extends IReqoreControlGroupProps {
   theme: IReqoreTheme;
 }

src/components/Menu/section.tsx

@@ -0,0 +1,82 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { TReqoreIntent } from '../../constants/theme';
+import { IReqoreComponent } from '../../types/global';
+import ReqoreButton, { IReqoreButtonProps } from '../Button';
+import ReqoreControlGroup from '../ControlGroup';
+
+export interface IReqoreMenuSectionProps extends IReqoreComponent, IReqoreButtonProps {
+  children: any;
+  collapsible?: boolean;
+  isCollapsed?: boolean;
+  onCollapseChange?: (collapsed: boolean) => void;
+  activeIntent?: TReqoreIntent;
+}
+
+export const ReqoreMenuSection = ({
+  children,
+  _insidePopover,
+  _popoverId,
+  customTheme,
+  wrap,
+  flat,
+  minimal,
+  collapsible = true,
+  isCollapsed,
+  activeIntent,
+  onCollapseChange,
+  ...rest
+}: IReqoreMenuSectionProps) => {
+  const [_isCollapsed, setIsCollapsed] = useState(isCollapsed);
+
+  useEffect(() => {
+    setIsCollapsed(isCollapsed);
+  }, [isCollapsed]);
+
+  const handleCollapseChange = useCallback(
+    (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+      if (collapsible) {
+        setIsCollapsed(!_isCollapsed);
+        onCollapseChange?.(!_isCollapsed);
+      }
+
+      rest.onClick?.(event);
+    },
+    [_isCollapsed, onCollapseChange, collapsible, rest.onClick]
+  );
+
+  return (
+    <ReqoreControlGroup vertical fluid className='reqore-menu-section'>
+      <ReqoreButton
+        wrap={wrap}
+        flat={flat}
+        minimal={minimal}
+        active={collapsible && !_isCollapsed}
+        {...rest}
+        className={`${rest.className || ''} reqore-menu-section-toggle`}
+        intent={collapsible && !_isCollapsed ? activeIntent : rest.intent}
+        fluid
+        onClick={handleCollapseChange}
+        rightIcon={rest.rightIcon || (collapsible ? 'ArrowRightSLine' : 'ArrowDownSLine')}
+        rightIconProps={{
+          rotation: collapsible && !_isCollapsed ? 90 : 0,
+        }}
+      />
+      {!_isCollapsed || !collapsible ? (
+        <ReqoreControlGroup vertical fluid style={{ paddingLeft: '10px' }}>
+          {React.Children.map(children, (child) => {
+            return child
+              ? React.cloneElement(child, {
+                  _insidePopover: child.props?._insidePopover ?? _insidePopover,
+                  _popoverId: child.props?._popoverId ?? _popoverId,
+                  customTheme: child.props?.customTheme || customTheme,
+                  wrap: 'wrap' in (child.props || {}) ? child.props.wrap : wrap,
+                  flat: 'flat' in (child.props || {}) ? child.props.flat : flat,
+                  minimal: 'minimal' in (child.props || {}) ? child.props.minimal : minimal,
+                })
+              : null;
+          })}
+        </ReqoreControlGroup>
+      ) : null}
+    </ReqoreControlGroup>
+  );
+};