Allow partial open of sidebar

src/components/ha-drawer.ts

@@ -11,6 +11,9 @@ export class HaDrawer extends DrawerBase {
       .mdc-drawer {
         top: 0;
       }
+      .mdc-drawer--modal.mdc-drawer--open {
+        left: min(0px, var(--drawer-modal-left-offset));
+      }
     `,
   ];
 }

src/external_app/external_app_entrypoint.ts

@@ -53,7 +53,10 @@ const handleExternalMessage = (
       result: null,
     });
   } else if (msg.command === "sidebar/show") {
-    fireEvent(hassMainEl, "hass-toggle-menu", { open: true });
+    fireEvent(hassMainEl, "hass-toggle-menu", {
+      open: true,
+      screenPercentage: msg.data?.screenPercentage,
+    });
     bus.fireMessage({
       id: msg.id,
       type: "result",

src/external_app/external_messaging.ts

@@ -131,6 +131,7 @@ interface EMIncomingMessageShowSidebar {
   id: number;
   type: "command";
   command: "sidebar/show";
+  data?: { screenPercentage: number };
 }
 
 export type EMIncomingMessageCommands =

src/layouts/home-assistant-main.ts

@@ -19,7 +19,9 @@ import "./partial-panel-resolver";
 declare global {
   // for fire event
   interface HASSDomEvents {
-    "hass-toggle-menu": undefined | { open?: boolean };
+    "hass-toggle-menu":
+      | undefined
+      | { open?: boolean; screenPercentage?: number };
     "hass-edit-sidebar": EditSideBarEvent;
     "hass-show-notifications": undefined;
   }
@@ -120,6 +122,10 @@ export class HomeAssistantMain extends LitElement {
       }
       if (this._sidebarNarrow) {
         this._drawerOpen = ev.detail?.open ?? !this._drawerOpen;
+        const offset = ev.detail?.screenPercentage
+          ? -256 + screen.width * (ev.detail.screenPercentage / 100)
+          : 0;
+        this.style.setProperty("--drawer-modal-left-offset", `${offset}px`);
       } else {
         fireEvent(this, "hass-dock-sidebar", {
           dock: ev.detail?.open