chore: Update size of sidebar + remove using sheet (#37638)

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: 40e6057
> <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  -->

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"}

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"

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

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?.();

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";

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);
-}
-
-.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);
-}
+@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"]:not([data-variant="floating"]):not(
-    [data-variant="inset"]
-  )
-  .sidebar {
-  border-inline-start: 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-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);
+}

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;