fix: allow sidebar to occupy left space on canvas when it is embed mo…

…de and nav is visible
appsmithorg · Jun 7, 2023 · cb8f82e · cb8f82e
1 parent 57ad194
commit cb8f82e
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/app/client/src/pages/AppViewer/AppPage.tsx b/app/client/src/pages/AppViewer/AppPage.tsx
@@ -35,6 +35,8 @@ export function AppPage(props: AppPageProps) {
   const { search } = useLocation();
   const queryParams = new URLSearchParams(search);
   const isEmbed = queryParams.get("embed");
+  const isNavbarVisibleInEmbeddedApp = queryParams.get("navbar");
+  const isEmbeddedAppWithNavVisible = isEmbed && isNavbarVisibleInEmbeddedApp;
 
   useDynamicAppLayout();
 
@@ -55,7 +57,9 @@ export function AppPage(props: AppPageProps) {
         isAppSidebarPinned
       }
       isPublished={isPublished}
-      sidebarWidth={isMobile || isEmbed ? 0 : sidebarWidth}
+      sidebarWidth={
+        isMobile || (isEmbed && !isEmbeddedAppWithNavVisible) ? 0 : sidebarWidth
+      }
     >
       <PageView className="t--app-viewer-page" width={props.canvasWidth}>
         {props.widgetsStructure.widgetId &&

diff --git a/app/client/src/utils/hooks/useDynamicAppLayout.tsx b/app/client/src/utils/hooks/useDynamicAppLayout.tsx
@@ -73,6 +73,7 @@ export const useDynamicAppLayout = () => {
   const { search } = useLocation();
   const queryParams = new URLSearchParams(search);
   const isEmbed = queryParams.get("embed");
+  const isNavbarVisibleInEmbeddedApp = queryParams.get("navbar");
 
   // /**
   //  * calculates min height
@@ -158,12 +159,13 @@ export const useDynamicAppLayout = () => {
      * 2. App settings open with navigation tab
      * 3. Published
      */
+    const isEmbeddedAppWithNavVisible = isEmbed && isNavbarVisibleInEmbeddedApp;
     if (
       (appMode === APP_MODE.PUBLISHED ||
         isPreviewMode ||
         isAppSettingsPaneWithNavigationTabOpen) &&
       !isMobile &&
-      !isEmbed &&
+      (!isEmbed || isEmbeddedAppWithNavVisible) &&
       sidebarWidth
     ) {
       calculatedWidth -= sidebarWidth;