chore: Update size of sidebar + remove using sheet

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";
@@ -25,7 +24,7 @@ const _Sidebar = (props: SidebarProps, ref: Ref<HTMLDivElement>) => {
     ...rest
   } = props;
   const [isAnimating, setIsAnimating] = useState(false);
-  const { isMobile, setState, state } = useSidebar();
+  const { state } = useSidebar();
   const sidebarRef = useRef<HTMLDivElement>();
 
   const onEnter = () => {
@@ -64,22 +63,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

@@ -81,7 +81,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/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/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";
 
@@ -24,10 +19,10 @@ 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)",
@@ -93,35 +88,6 @@ export const SideRight: Story = {
   ),
 };
 
-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>
-  ),
-};
-
 export const WithRenderProps: Story = {
   render: (args) => (
     <SidebarProvider
@@ -156,11 +122,9 @@ export const WithRenderProps: Story = {
           </Flex>
         )}
       </Sidebar>
-      <SidebarInset>
-        <Flex alignItems="start" margin="spacing-4" width="100%">
-          <SidebarTrigger />
-        </Flex>
-      </SidebarInset>
+      <Flex alignItems="start" margin="spacing-4" width="100%">
+        <SidebarTrigger />
+      </Flex>
     </SidebarProvider>
   ),
 };