Merge pull request amplication#29 from amplication/fix/missing-worksp…

…ace-panel Fix/missing workspace panel
Spotrix · Feb 6, 2022 · 5dba666 · 5dba666
2 parents 6a032f9 + 85a981a
commit 5dba666
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 2 deletions.
diff --git a/packages/amplication-client/src/Layout/MainLayout.scss b/packages/amplication-client/src/Layout/MainLayout.scss
@@ -53,6 +53,20 @@ $expand-button-padding: 4px;
       display: flex;
       flex-direction: row;
 
+      &__menu-fixed-panel {
+        @include scrollbars($default-scroll-width, var(--black60), transparent);
+        background-color: var(--menu-fixed-panel-background);
+        height: 100%;
+        width: var(--fixed-menu-panel-width);
+        max-width: var(--fixed-menu-panel-max-width);
+        overflow: auto;
+        transition: width var(--menu-expand-animation-duration) ease-in;
+
+        &:empty {
+          width: 0;
+        }
+      }
+
       &__main-menu {
         height: 100%;
         display: flex;

diff --git a/packages/amplication-client/src/Layout/MainLayout.tsx b/packages/amplication-client/src/Layout/MainLayout.tsx
@@ -9,6 +9,7 @@ import { ReactComponent as LogoTextual } from "../assets/logo-textual.svg";
 import CommandPalette from "../CommandPalette/CommandPalette";
 import MenuItem from "./MenuItem";
 import UserBadge from "../Components/UserBadge";
+import { FixedMenuPanel } from "../util/teleporter";
 import { Popover, Icon } from "@amplication/design-system";
 import SupportMenu from "./SupportMenu";
 import { useTracking } from "../util/analytics";
@@ -109,6 +110,7 @@ const Menu = ({ children }: MenuProps) => {
             />
           </div>
         </div>
+        <FixedMenuPanel.Target className="main-layout__menu__wrapper__menu-fixed-panel" />
       </div>
     </div>
   );

diff --git a/packages/amplication-client/src/Layout/MenuItemWithFixedPanel.tsx b/packages/amplication-client/src/Layout/MenuItemWithFixedPanel.tsx
@@ -1,7 +1,7 @@
 import React, { ReactNode, useCallback } from "react";
 import classNames from "classnames";
 import { Button, EnumButtonStyle } from "../Components/Button";
-import { AsidePanel } from "../util/teleporter";
+import { FixedMenuPanel } from "../util/teleporter";
 
 import { Icon, Tooltip } from "@amplication/design-system";
 
@@ -61,7 +61,7 @@ const MenuItemWithFixedPanel = ({
           </Tooltip>
         )}
       </div>
-      {isOpen && <AsidePanel.Source>{children}</AsidePanel.Source>}
+      {isOpen && <FixedMenuPanel.Source>{children}</FixedMenuPanel.Source>}
     </div>
   );
 };

diff --git a/packages/amplication-client/src/util/teleporter.ts b/packages/amplication-client/src/util/teleporter.ts
@@ -2,3 +2,4 @@ import { createTeleporter } from "react-teleporter";
 
 export const HeaderToolbar = createTeleporter();
 export const AsidePanel = createTeleporter();
+export const FixedMenuPanel = createTeleporter();
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,3 +2,4 @@ import { createTeleporter } from "react-teleporter";

		export const HeaderToolbar = createTeleporter();
		export const AsidePanel = createTeleporter();
		export const FixedMenuPanel = createTeleporter();