fix: Remove empty space in embed apps when nav is set to sidebar (#23971)

## Description
When the navigation was set to sidebar and you tried to embed the app,
the sidebar wouldn't show up but the canvas had some empty left margin.
This PR fixes that.

#### PR fixes following issue(s)
Fixes #23190 

#### Type of change
- Bug fix (non-breaking change which fixes an issue)

## Testing
#### How Has This Been Tested?
- [x] Manual
- [ ] Jest
- [ ] Cypress

#### Test Plan
> Add Testsmith test cases links that relate to this PR
>
>
#### Issues raised during DP testing
> Link issues raised during DP testing for better visiblity and tracking
(copy link from comments dropped on this PR)
>
>
>
## Checklist:
#### Dev activity
- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my own code
- [x] I have commented my code, particularly in hard-to-understand areas
- [] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag


#### QA activity:
- [ ] [Speedbreak
features](https://github.com/appsmithorg/TestSmith/wiki/Test-plan-implementation#speedbreaker-features-to-consider-for-every-change)
have been covered
- [ ] Test plan covers all impacted features and [areas of
interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans/_edit#areas-of-interest)
- [ ] Test plan has been peer reviewed by project stakeholders and other
QA members
- [x] Manually tested functionality on DP
- [ ] We had an implementation alignment call with stakeholders post QA
Round 2
- [ ] Cypress test cases have been added and approved by SDET/manual QA
- [ ] Added `Test Plan Approved` label after Cypress tests were reviewed
- [ ] Added `Test Plan Approved` label after JUnit tests were reviewed

Author: dhruvikn

app/client/src/pages/AppViewer/AppPage.tsx

@@ -15,6 +15,7 @@ import { NAVIGATION_SETTINGS } from "constants/AppConstants";
 import { PageView, PageViewContainer } from "./AppPage.styled";
 import { useIsMobileDevice } from "utils/hooks/useDeviceDetect";
 import { APP_MODE } from "entities/App";
+import { useLocation } from "react-router";
 
 type AppPageProps = {
   appName?: string;
@@ -31,6 +32,11 @@ export function AppPage(props: AppPageProps) {
   const isMobile = useIsMobileDevice();
   const appMode = useSelector(getAppMode);
   const isPublished = appMode === APP_MODE.PUBLISHED;
+  const { search } = useLocation();
+  const queryParams = new URLSearchParams(search);
+  const isEmbed = queryParams.get("embed");
+  const isNavbarVisibleInEmbeddedApp = queryParams.get("navbar");
+  const isEmbeddedAppWithNavVisible = isEmbed && isNavbarVisibleInEmbeddedApp;
 
   useDynamicAppLayout();
 
@@ -51,7 +57,9 @@ export function AppPage(props: AppPageProps) {
         isAppSidebarPinned
       }
       isPublished={isPublished}
-      sidebarWidth={isMobile ? 0 : sidebarWidth}
+      sidebarWidth={
+        isMobile || (isEmbed && !isEmbeddedAppWithNavVisible) ? 0 : sidebarWidth
+      }
     >
       <PageView className="t--app-viewer-page" width={props.canvasWidth}>
         {props.widgetsStructure.widgetId &&

app/client/src/utils/hooks/useDynamicAppLayout.tsx

@@ -40,6 +40,7 @@ import { scrollbarWidth } from "utils/helpers";
 import { useWindowSizeHooks } from "./dragResizeHooks";
 import type { AppState } from "@appsmith/reducers";
 import { ReduxActionTypes } from "@appsmith/constants/ReduxActionConstants";
+import { useLocation } from "react-router";
 
 const GUTTER_WIDTH = 72;
 export const AUTOLAYOUT_RESIZER_WIDTH_BUFFER = 40;
@@ -69,6 +70,10 @@ export const useDynamicAppLayout = () => {
     (state: AppState) => state.ui.widgetDragResize.isAutoCanvasResizing,
   );
   const [isCanvasResizing, setIsCanvasResizing] = useState<boolean>(false);
+  const { search } = useLocation();
+  const queryParams = new URLSearchParams(search);
+  const isEmbed = queryParams.get("embed");
+  const isNavbarVisibleInEmbeddedApp = queryParams.get("navbar");
 
   // /**
   //  * calculates min height
@@ -147,17 +152,20 @@ export const useDynamicAppLayout = () => {
      * If there is
      * 1. a sidebar for navigation,
      * 2. it is pinned,
-     * 3. and device is not mobile
+     * 3. device is not mobile
+     * 4. and it is not an embedded app
      * we need to subtract the sidebar width as well in the following modes -
      * 1. Preview
      * 2. App settings open with navigation tab
      * 3. Published
      */
+    const isEmbeddedAppWithNavVisible = isEmbed && isNavbarVisibleInEmbeddedApp;
     if (
       (appMode === APP_MODE.PUBLISHED ||
         isPreviewMode ||
         isAppSettingsPaneWithNavigationTabOpen) &&
       !isMobile &&
+      (!isEmbed || isEmbeddedAppWithNavVisible) &&
       sidebarWidth
     ) {
       calculatedWidth -= sidebarWidth;