[CL-971] update responsive behavior of three panel layout (#19086) (#19149)

* update responsive behavior of three panel layout; give sidenav extra top padding on electron; add stories that show mix of drawer and sidenav states

---------

Co-authored-by: Will Martin <contact@willmartian.com>
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

libs/components/src/stories/kitchen-sink/kitchen-sink.stories.ts

@@ -2,14 +2,7 @@ import { importProvidersFrom } from "@angular/core";
 import { provideNoopAnimations } from "@angular/platform-browser/animations";
 import { RouterModule } from "@angular/router";
 import { Meta, StoryObj, applicationConfig, moduleMetadata } from "@storybook/angular";
-import {
-  userEvent,
-  getAllByRole,
-  getByRole,
-  fireEvent,
-  getByText,
-  getAllByLabelText,
-} from "storybook/test";
+import { userEvent, getAllByRole, getByRole, fireEvent, getAllByLabelText } from "storybook/test";
 
 import { PasswordManagerLogo } from "@bitwarden/assets/svg";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
@@ -90,6 +83,22 @@ export default {
 
 type Story = StoryObj<LayoutComponent>;
 
+type KitchenSinkRoute = "/bitwarden" | "/virtual-scroll";
+
+async function navigateTo(path: KitchenSinkRoute) {
+  window.location.hash = path;
+  await new Promise((resolve) => setTimeout(resolve, 50));
+}
+
+/** Waits for the ResizeObserver + Angular CD to settle, then opens the side nav if it's closed. */
+async function openSideNav(canvas: HTMLElement) {
+  await new Promise((resolve) => setTimeout(resolve, 200));
+  const toggleButton = getByRole(canvas, "button", { name: "Toggle side navigation" });
+  if (toggleButton.getAttribute("aria-expanded") === "false") {
+    await userEvent.click(toggleButton);
+  }
+}
+
 export const Default: Story = {
   render: (args) => {
     return {
@@ -130,6 +139,7 @@ export const MenuOpen: Story = {
   render: Default.render,
   play: async (context) => {
     const canvas = context.canvasElement;
+    await navigateTo("/bitwarden");
     const table = getByRole(canvas, "table");
 
     const menuButton = getAllByRole(table, "button")[0];
@@ -144,6 +154,7 @@ export const DialogOpen: Story = {
   render: Default.render,
   play: async (context) => {
     const canvas = context.canvasElement;
+    await navigateTo("/bitwarden");
     const dialogButton = getByRole(canvas, "button", {
       name: "Open Dialog",
     });
@@ -157,6 +168,7 @@ export const DrawerOpen: Story = {
   render: Default.render,
   play: async (context) => {
     const canvas = context.canvasElement;
+    await navigateTo("/bitwarden");
     const drawerButton = getByRole(canvas, "button", {
       name: "Open Drawer",
     });
@@ -170,6 +182,7 @@ export const PopoverOpen: Story = {
   render: Default.render,
   play: async (context) => {
     const canvas = context.canvasElement;
+    await navigateTo("/bitwarden");
     const popoverLink = getByRole(canvas, "button", {
       name: "Popover trigger link",
     });
@@ -182,6 +195,7 @@ export const SimpleDialogOpen: Story = {
   render: Default.render,
   play: async (context) => {
     const canvas = context.canvasElement;
+    await navigateTo("/bitwarden");
     const submitButton = getByRole(canvas, "button", {
       name: "Submit",
     });
@@ -195,6 +209,7 @@ export const EmptyTab: Story = {
   render: Default.render,
   play: async (context) => {
     const canvas = context.canvasElement;
+    await navigateTo("/bitwarden");
     const emptyTab = getByRole(canvas, "tab", { name: "Empty tab" });
     await userEvent.click(emptyTab);
   },
@@ -204,8 +219,7 @@ export const VirtualScrollBlockingDialog: Story = {
   render: Default.render,
   play: async (context) => {
     const canvas = context.canvasElement;
-    const navItem = getByText(canvas, "Virtual Scroll");
-    await userEvent.click(navItem);
+    await navigateTo("/virtual-scroll");
 
     const htmlEl = canvas.ownerDocument.documentElement;
     htmlEl.scrollTop = 2000;
@@ -216,11 +230,38 @@ export const VirtualScrollBlockingDialog: Story = {
   },
 };
 
+export const SideNavOpen: Story = {
+  render: Default.render,
+  play: async (context) => {
+    const canvas = context.canvasElement;
+    await navigateTo("/bitwarden");
+    await openSideNav(canvas);
+  },
+  parameters: {
+    chromatic: { viewports: [640, 1024, 1280] },
+  },
+};
+
+export const DrawerOpenBeforeSideNavOpen: Story = {
+  render: Default.render,
+  play: async (context) => {
+    const canvas = context.canvasElement;
+    // workaround for userEvent not firing in FF https://github.com/testing-library/user-event/issues/1075
+    await fireEvent.click(getByRole(canvas, "button", { name: "Open Drawer" }));
+
+    await navigateTo("/bitwarden");
+    await openSideNav(canvas);
+  },
+  parameters: {
+    chromatic: { viewports: [640, 1024, 1280, 1440] },
+  },
+};
+
 export const ResponsiveSidebar: Story = {
   render: Default.render,
   parameters: {
     chromatic: {
-      viewports: [640, 1280],
+      viewports: [640, 1024, 1280, 1440],
     },
   },
 };