From baef6aa2876b6e9dce1b07cc3ff736019868083d Mon Sep 17 00:00:00 2001
From: Pawan Kumar <pawan@appsmith.com>
Date: Mon, 25 Nov 2024 15:07:35 +0530
Subject: [PATCH] chore: Update size of sidebar + remove using sheet (#37638)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

https://github.com/user-attachments/assets/94c51ceb-d0cd-47b8-9766-a160f43b6f6f

/ok-to-test tags="@tag.Anvil"

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

## Release Notes

- **New Features**
- Enhanced styling for the sidebar title for improved visual
presentation.
- Streamlined sidebar component stories for simplicity and focus on core
functionality.

- **Bug Fixes**
- Removed unnecessary mobile state handling, resulting in a more
efficient sidebar rendering.

- **Style**
- Updated CSS for sidebar components to improve responsiveness and
visual consistency.
- Adjusted display properties for sidebar classes to enhance visibility.

- **Chores**
- Removed the `SidebarInset` component to simplify the sidebar
structure.
- Introduced a new `side` property to the sidebar provider for better
contextual control.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/11953544047>
> Commit: 40e605795762c6a5822f1cbd6aed5f0aaf99a239
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=11953544047&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Anvil`
> Spec:
> <hr>Thu, 21 Nov 2024 13:11:13 UTC
<!-- end of auto-generated comment: Cypress test results  -->
---
 .../src/components/Sidebar/src/Sidebar.tsx    |  20 +--
 .../components/Sidebar/src/SidebarContent.tsx |  12 +-
 .../components/Sidebar/src/SidebarInset.tsx   |  22 ---
 .../Sidebar/src/SidebarProvider.tsx           |   5 +-
 .../components/Sidebar/src/SidebarTrigger.tsx |  12 +-
 .../src/components/Sidebar/src/index.ts       |   1 -
 .../components/Sidebar/src/styles.module.css  | 127 +++++-------------
 .../src/components/Sidebar/src/types.ts       |   8 +-
 .../Sidebar/stories/Sidebar.stories.tsx       |  66 ++-------
 9 files changed, 73 insertions(+), 200 deletions(-)
 delete mode 100644 app/client/packages/design-system/widgets/src/components/Sidebar/src/SidebarInset.tsx

diff --git a/app/client/packages/design-system/widgets/src/components/Sidebar/src/Sidebar.tsx b/app/client/packages/design-system/widgets/src/components/Sidebar/src/Sidebar.tsx
index 60b628f8da..820de64e50 100644
--- a/app/client/packages/design-system/widgets/src/components/Sidebar/src/Sidebar.tsx
+++ b/app/client/packages/design-system/widgets/src/components/Sidebar/src/Sidebar.tsx
@@ -3,7 +3,6 @@ import * as React from "react";
 import { type Ref, useRef, useState } from "react";
 import { CSSTransition } from "react-transition-group";
 
-import { Sheet } from "../../Sheet";
 import styles from "./styles.module.css";
 import { useSidebar } from "./use-sidebar";
 import type { SidebarProps } from "./types";
@@ -19,13 +18,12 @@ const _Sidebar = (props: SidebarProps, ref: Ref<HTMLDivElement>) => {
     onEntered: onEnteredProp,
     onExit: onExitProp,
     onExited: onExitedProp,
-    side = "start",
     title,
     variant = "sidebar",
     ...rest
   } = props;
   const [isAnimating, setIsAnimating] = useState(false);
-  const { isMobile, setState, state } = useSidebar();
+  const { side, state } = useSidebar();
   const sidebarRef = useRef<HTMLDivElement>();
 
   const onEnter = () => {
@@ -64,22 +62,6 @@ const _Sidebar = (props: SidebarProps, ref: Ref<HTMLDivElement>) => {
     );
   }
 
-  if (Boolean(isMobile)) {
-    return (
-      <Sheet
-        isOpen={state === "expanded"}
-        onEnter={onEnter}
-        onEntered={onEntered}
-        onExit={onExit}
-        onExited={onExited}
-        onOpenChange={(isOpen) => setState(isOpen ? "expanded" : "collapsed")}
-        position={side}
-      >
-        {content}
-      </Sheet>
-    );
-  }
-
   return (
     <CSSTransition
       in={state === "full-width"}
diff --git a/app/client/packages/design-system/widgets/src/components/Sidebar/src/SidebarContent.tsx b/app/client/packages/design-system/widgets/src/components/Sidebar/src/SidebarContent.tsx
index f72ee85dc5..7f88187391 100644
--- a/app/client/packages/design-system/widgets/src/components/Sidebar/src/SidebarContent.tsx
+++ b/app/client/packages/design-system/widgets/src/components/Sidebar/src/SidebarContent.tsx
@@ -33,9 +33,17 @@ const _SidebarContent = (
           className={styles.sidebarHeader}
           isInner
           justifyContent="space-between"
-          padding="spacing-2"
         >
-          {Boolean(title) && <Text lineClamp={1}>{title}</Text>}
+          {Boolean(title) && (
+            <Text
+              className={styles.sidebarTitle}
+              fontWeight={500}
+              lineClamp={1}
+              textAlign="center"
+            >
+              {title}
+            </Text>
+          )}
           {!isMobile && (
             <Button
               color="neutral"
diff --git a/app/client/packages/design-system/widgets/src/components/Sidebar/src/SidebarInset.tsx b/app/client/packages/design-system/widgets/src/components/Sidebar/src/SidebarInset.tsx
deleted file mode 100644
index f6c3a1d0bc..0000000000
--- a/app/client/packages/design-system/widgets/src/components/Sidebar/src/SidebarInset.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import clsx from "clsx";
-import * as React from "react";
-import type { ComponentProps, Ref } from "react";
-
-import styles from "./styles.module.css";
-
-export const _SidebarInset = (
-  props: ComponentProps<"main">,
-  ref: Ref<HTMLDivElement>,
-) => {
-  const { className, ...rest } = props;
-
-  return (
-    <main
-      className={clsx(styles.sidebarInset, className)}
-      ref={ref}
-      {...rest}
-    />
-  );
-};
-
-export const SidebarInset = React.forwardRef(_SidebarInset);
diff --git a/app/client/packages/design-system/widgets/src/components/Sidebar/src/SidebarProvider.tsx b/app/client/packages/design-system/widgets/src/components/Sidebar/src/SidebarProvider.tsx
index 16dcc26a5a..602fe9c2a5 100644
--- a/app/client/packages/design-system/widgets/src/components/Sidebar/src/SidebarProvider.tsx
+++ b/app/client/packages/design-system/widgets/src/components/Sidebar/src/SidebarProvider.tsx
@@ -20,6 +20,7 @@ export const _SidebarProvider = (
     className,
     defaultState = "expanded",
     onStateChange: setStateProp,
+    side = "end",
     state: stateProp,
     style,
     ...rest
@@ -69,9 +70,10 @@ export const _SidebarProvider = (
       state,
       setState,
       isMobile,
+      side,
       toggleSidebar,
     }),
-    [state, setState, isMobile, toggleSidebar],
+    [state, setState, isMobile, toggleSidebar, side],
   );
 
   return (
@@ -81,7 +83,6 @@ export const _SidebarProvider = (
         ref={ref}
         style={
           {
-            "--sidebar-width": SIDEBAR_CONSTANTS.WIDTH.DESKTOP,
             "--sidebar-width-icon": SIDEBAR_CONSTANTS.WIDTH.ICON,
             ...style,
           } as React.CSSProperties
diff --git a/app/client/packages/design-system/widgets/src/components/Sidebar/src/SidebarTrigger.tsx b/app/client/packages/design-system/widgets/src/components/Sidebar/src/SidebarTrigger.tsx
index 4649d3ae87..87a3b1d21b 100644
--- a/app/client/packages/design-system/widgets/src/components/Sidebar/src/SidebarTrigger.tsx
+++ b/app/client/packages/design-system/widgets/src/components/Sidebar/src/SidebarTrigger.tsx
@@ -9,15 +9,19 @@ interface SidebarTriggerProps {
 
 export const SidebarTrigger = (props: SidebarTriggerProps) => {
   const { onPress } = props;
-  const { state, toggleSidebar } = useSidebar();
+  const { side, state, toggleSidebar } = useSidebar();
 
   return (
     <Button
       color="neutral"
       icon={
-        state === "expanded"
-          ? "layout-sidebar-right-collapse"
-          : "layout-sidebar-left-collapse"
+        state === "collapsed"
+          ? side === "start"
+            ? "layout-sidebar-left-expand"
+            : "layout-sidebar-right-expand"
+          : side === "start"
+            ? "layout-sidebar-left-collapse"
+            : "layout-sidebar-right-collapse"
       }
       onPress={() => {
         onPress?.();
diff --git a/app/client/packages/design-system/widgets/src/components/Sidebar/src/index.ts b/app/client/packages/design-system/widgets/src/components/Sidebar/src/index.ts
index 7a7b66a4eb..eb31345382 100644
--- a/app/client/packages/design-system/widgets/src/components/Sidebar/src/index.ts
+++ b/app/client/packages/design-system/widgets/src/components/Sidebar/src/index.ts
@@ -1,6 +1,5 @@
 export { Sidebar } from "./Sidebar";
 export { SidebarProvider } from "./SidebarProvider";
-export { SidebarInset } from "./SidebarInset";
 export { SidebarTrigger } from "./SidebarTrigger";
 export { SidebarContent } from "./SidebarContent";
 export { useSidebar } from "./use-sidebar";
diff --git a/app/client/packages/design-system/widgets/src/components/Sidebar/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/Sidebar/src/styles.module.css
index 91c640d923..13eef6e476 100644
--- a/app/client/packages/design-system/widgets/src/components/Sidebar/src/styles.module.css
+++ b/app/client/packages/design-system/widgets/src/components/Sidebar/src/styles.module.css
@@ -13,20 +13,25 @@
  *-----------------------------------------------------
  */
 .mainSidebar {
-  display: none;
+  --sidebar-width: 100cqw;
+  display: block;
   color: var(--color-fg);
 }
 
-@container (min-width: 768px) {
-  .mainSidebar {
-    display: block;
-  }
-}
-
 .mainSidebar[data-collapsible="icon"] {
   overflow: hidden;
 }
 
+[data-state="full-width"] .sidebar {
+  --sidebar-width: 100cqw;
+}
+
+@container (width > 550px) {
+  .mainSidebar {
+    --sidebar-width: min(50cqw, 1024px);
+  }
+}
+
 /**
  *-----------------------------------------------------
  * FAKE SIDEBAR
@@ -57,11 +62,6 @@
   width: var(--sidebar-width-icon);
 }
 
-.mainSidebar[data-variant="floating"][data-collapsible="icon"] .fakeSidebar,
-.mainSidebar[data-variant="inset"][data-collapsible="icon"] .fakeSidebar {
-  width: calc(var(--sidebar-width-icon) + var(--inner-spacing-2));
-}
-
 /**
  *-----------------------------------------------------
  * SIDEBAR
@@ -72,7 +72,7 @@
   top: 0;
   bottom: 0;
   z-index: 10;
-  display: none;
+  display: flex;
   height: 100%;
   width: var(--sidebar-width);
   transition:
@@ -82,16 +82,6 @@
   background-color: var(--color-bg-elevation-2);
 }
 
-[data-state="full-width"] .sidebar {
-  width: 100%;
-}
-
-@container (min-width: 768px) {
-  .sidebar {
-    display: flex;
-  }
-}
-
 .mainSidebar[data-side="start"] .sidebar {
   left: 0;
 }
@@ -108,45 +98,25 @@
   right: calc(var(--sidebar-width) * -1);
 }
 
-.mainSidebar[data-variant="floating"] .sidebar,
-.mainSidebar[data-variant="inset"] .sidebar {
-  padding: var(--inner-spacing-2);
-}
-
 .mainSidebar[data-collapsible="icon"] .sidebar {
   width: calc(var(--sidebar-width-icon));
 }
 
-.mainSidebar[data-variant="floating"][data-collapsible="icon"] .sidebar,
-.mainSidebar[data-variant="inset"][data-collapsible="icon"] .sidebar {
-  width: calc(var(--sidebar-width-icon) + var(--inner-spacing-2) + 2px);
+@container (width > 550px) {
+  .mainSidebar[data-side="start"] .sidebar {
+    border-inline-end: var(--border-width-1) solid var(--color-bd-elevation-1);
+  }
+
+  .mainSidebar[data-side="end"] .sidebar {
+    border-inline-start: var(--border-width-1) solid var(--color-bd-elevation-1);
+  }
 }
 
-.mainSidebar[data-side="start"]:not([data-variant="floating"]):not(
-    [data-variant="inset"]
-  )
-  .sidebar {
-  border-inline-end: var(--border-width-1) solid var(--color-bd-elevation-1);
-}
-
-.mainSidebar[data-side="end"]:not([data-variant="floating"]):not(
-    [data-variant="inset"]
-  )
-  .sidebar {
-  border-inline-start: var(--border-width-1) solid var(--color-bd-elevation-1);
-}
-
-.mainSidebar[data-state="full-width"][data-side="start"]:is(
-    [data-variant="sidebar"]
-  )
-  .sidebar {
+.mainSidebar[data-state="full-width"][data-side="start"] .sidebar {
   border-inline-end: none;
 }
 
-.mainSidebar[data-state="full-width"][data-side="end"]:is(
-    [data-variant="sidebar"]
-  )
-  .sidebar {
+.mainSidebar[data-state="full-width"][data-side="end"] .sidebar {
   border-inline-start: none;
 }
 
@@ -170,12 +140,6 @@
   border-inline-end: var(--border-width-1) solid var(--color-bd-subtle);
 }
 
-.mainSidebar[data-variant="floating"] .sidebarContainer {
-  border-radius: var(--border-radius-elevation-3);
-  border: var(--border-width-1) solid var(--color-bd);
-  box-shadow: var(--box-shadow-1);
-}
-
 /**
  *-----------------------------------------------------
  * SIDEBAR CONTENT
@@ -192,47 +156,20 @@
   width: 100%;
 }
 
-/**
- *-----------------------------------------------------
- * SIDEBAR INSET
- *-----------------------------------------------------
- */
-.sidebarInset {
-  position: relative;
-  display: flex;
-  min-height: 100%;
-  flex: 1;
-  flex-direction: column;
-  background-color: var(--background);
-}
-
-[data-variant="inset"] ~ .sidebarInset {
-  min-height: calc(100% - var(--inner-spacing-2) * 2);
-}
-
-@container (min-width: 768px) {
-  [data-variant="inset"] ~ .sidebarInset {
-    margin: var(--inner-spacing-2);
-    border-radius: var(--border-radius-elevation-3);
-    box-shadow: var(--box-shadow-1);
-    border: var(--border-width-1) solid var(--color-bd);
-  }
-
-  /* Handle margin when sidebar is collapsed */
-  [data-state="collapsed"][data-variant="inset"] ~ .sidebarInset {
-    margin-left: var(--inner-spacing-2);
-  }
-
-  [data-variant="inset"] ~ .sidebarInset {
-    margin-left: 0;
-  }
-}
-
 /**
  *-----------------------------------------------------
  * SIDEBAR HEADER
  *-----------------------------------------------------
  */
 .sidebarHeader {
+  height: var(--sizing-13);
+  padding: 0 var(--inner-spacing-2);
   border-bottom: var(--border-width-1) solid var(--color-bd-elevation-1);
 }
+
+.sidebarTitle {
+  position: absolute;
+  left: 0;
+  right: 0;
+  margin: 0 var(--sizing-14);
+}
diff --git a/app/client/packages/design-system/widgets/src/components/Sidebar/src/types.ts b/app/client/packages/design-system/widgets/src/components/Sidebar/src/types.ts
index 00f84b1375..c67f2bac02 100644
--- a/app/client/packages/design-system/widgets/src/components/Sidebar/src/types.ts
+++ b/app/client/packages/design-system/widgets/src/components/Sidebar/src/types.ts
@@ -1,10 +1,14 @@
 import type { ReactNode } from "react";
 
+export type SidebarState = "collapsed" | "expanded" | "full-width";
+
+export type SidebarSide = "start" | "end";
 export interface SidebarContextType {
   state: SidebarState;
   setState: (state: SidebarState) => void;
   isMobile: boolean;
   toggleSidebar: () => void;
+  side: SidebarSide;
 }
 
 export interface SidebarProviderProps {
@@ -14,12 +18,10 @@ export interface SidebarProviderProps {
   children: ReactNode;
   className?: string;
   style?: React.CSSProperties;
+  side?: SidebarSide;
 }
 
-export type SidebarState = "collapsed" | "expanded" | "full-width";
-
 export interface SidebarProps {
-  side?: "start" | "end";
   variant?: "sidebar" | "floating" | "inset";
   collapsible?: "offcanvas" | "icon" | "none";
   onEnter?: () => void;
diff --git a/app/client/packages/design-system/widgets/src/components/Sidebar/stories/Sidebar.stories.tsx b/app/client/packages/design-system/widgets/src/components/Sidebar/stories/Sidebar.stories.tsx
index b460c3c474..01c12545b7 100644
--- a/app/client/packages/design-system/widgets/src/components/Sidebar/stories/Sidebar.stories.tsx
+++ b/app/client/packages/design-system/widgets/src/components/Sidebar/stories/Sidebar.stories.tsx
@@ -1,11 +1,6 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import {
-  Sidebar,
-  SidebarTrigger,
-  SidebarProvider,
-  SidebarInset,
-} from "../src/index";
+import { Sidebar, SidebarTrigger, SidebarProvider } from "../src/index";
 import { Flex } from "../../Flex";
 import { Text, Icon } from "@appsmith/wds";
 
@@ -23,22 +18,21 @@ const meta: Meta<typeof Sidebar> = {
   },
   args: {
     title: "Sidebar",
-    side: "start",
-    variant: "sidebar",
   },
   render: (args) => (
     <SidebarProvider
+      defaultState="collapsed"
       style={{
         height: "50vh",
         border: "1px solid var(--color-bd-elevation-1)",
       }}
     >
-      <Sidebar {...args}>
-        <DemoContent />
-      </Sidebar>
       <Flex alignItems="start" margin="spacing-4" width="100%">
         <SidebarTrigger />
       </Flex>
+      <Sidebar {...args}>
+        <DemoContent />
+      </Sidebar>
     </SidebarProvider>
   ),
 };
@@ -72,52 +66,22 @@ export const Default: Story = {
   args: {},
 };
 
-export const SideRight: Story = {
-  args: {
-    side: "end",
-  },
+export const SideLeft: Story = {
+  args: {},
   render: (args) => (
     <SidebarProvider
+      side="start"
       style={{
         height: "50vh",
         border: "1px solid var(--color-bd-elevation-1)",
       }}
     >
+      <Sidebar {...args}>
+        <DemoContent />
+      </Sidebar>
       <Flex alignItems="start" margin="spacing-4" width="100%">
         <SidebarTrigger />
       </Flex>
-      <Sidebar {...args}>
-        <DemoContent />
-      </Sidebar>
-    </SidebarProvider>
-  ),
-};
-
-export const VariantFloating: Story = {
-  args: {
-    variant: "floating",
-  },
-};
-
-export const VariantInset: Story = {
-  args: {
-    variant: "inset",
-  },
-  render: (args) => (
-    <SidebarProvider
-      style={{
-        height: "50vh",
-        border: "1px solid var(--color-bd-elevation-1)",
-      }}
-    >
-      <Sidebar {...args}>
-        <DemoContent />
-      </Sidebar>
-      <SidebarInset>
-        <Flex alignItems="start" margin="spacing-4" width="100%">
-          <SidebarTrigger />
-        </Flex>
-      </SidebarInset>
     </SidebarProvider>
   ),
 };
@@ -130,6 +94,9 @@ export const WithRenderProps: Story = {
         border: "1px solid var(--color-bd-elevation-1)",
       }}
     >
+      <Flex alignItems="start" margin="spacing-4" width="100%">
+        <SidebarTrigger />
+      </Flex>
       <Sidebar {...args}>
         {({ isAnimating, state }) => (
           <Flex direction="column" gap="spacing-2" padding="spacing-4">
@@ -156,11 +123,6 @@ export const WithRenderProps: Story = {
           </Flex>
         )}
       </Sidebar>
-      <SidebarInset>
-        <Flex alignItems="start" margin="spacing-4" width="100%">
-          <SidebarTrigger />
-        </Flex>
-      </SidebarInset>
     </SidebarProvider>
   ),
 };