diff --git a/apps/builder/app/builder/shared/commands.ts b/apps/builder/app/builder/shared/commands.ts
index 108c257a6c..380fa31bb1 100644
--- a/apps/builder/app/builder/shared/commands.ts
+++ b/apps/builder/app/builder/shared/commands.ts
@@ -113,7 +113,7 @@ export const { emitCommand, subscribeCommands } = createCommandsEmitter({
       name: "clickCanvas",
       handler: () => {
         $breakpointsMenuView.set(undefined);
-        setActiveSidebarPanel(undefined);
+        setActiveSidebarPanel("auto");
       },
     },
 
@@ -124,7 +124,7 @@ export const { emitCommand, subscribeCommands } = createCommandsEmitter({
       defaultHotkeys: ["meta+shift+p", "ctrl+shift+p"],
       handler: () => {
         $isPreviewMode.set($isPreviewMode.get() === false);
-        setActiveSidebarPanel(undefined);
+        setActiveSidebarPanel("auto");
       },
     },
     {
diff --git a/apps/builder/app/builder/shared/nano-states/index.ts b/apps/builder/app/builder/shared/nano-states/index.ts
index 809d6b10d5..2b05addd99 100644
--- a/apps/builder/app/builder/shared/nano-states/index.ts
+++ b/apps/builder/app/builder/shared/nano-states/index.ts
@@ -100,7 +100,10 @@ export const $activeSidebarPanel = computed(
   }
 );
 
-export const setActiveSidebarPanel = (nextPanel?: SidebarPanelName) => {
+/**
+ * auto shows default panel when sidepanel is undocked and hides when docked
+ */
+export const setActiveSidebarPanel = (nextPanel: "auto" | SidebarPanelName) => {
   const currentPanel = $activeSidebarPanel.get();
   // - When navigator is open, user is trying to close the navigator.
   // - Navigator is closed, user is trying to close some other panel, and if navigator is undocked, it needs to be opened.
@@ -114,7 +117,7 @@ export const setActiveSidebarPanel = (nextPanel?: SidebarPanelName) => {
       return;
     }
   }
-  $activeSidebarPanel_.set(nextPanel);
+  $activeSidebarPanel_.set(nextPanel === "auto" ? undefined : nextPanel);
 };
 
 export const toggleActiveSidebarPanel = (panel: SidebarPanelName) => {
diff --git a/apps/builder/app/builder/sidebar-left/sidebar-left.tsx b/apps/builder/app/builder/sidebar-left/sidebar-left.tsx
index 9b2ce24c0b..789a3fb84b 100644
--- a/apps/builder/app/builder/sidebar-left/sidebar-left.tsx
+++ b/apps/builder/app/builder/sidebar-left/sidebar-left.tsx
@@ -141,7 +141,7 @@ export const SidebarLeft = ({ publish }: SidebarLeftProps) => {
   const returnTabRef = useRef<SidebarPanelName | undefined>(undefined);
 
   useSubscribe("dragEnd", () => {
-    setActiveSidebarPanel("none");
+    setActiveSidebarPanel("auto");
   });
 
   useOnDropEffect(() => {