Fix Layout of Navbar (#42)

Author: giorgioverzicco

src/lib/Layout/PanelSideBarLayout/PanelSideBar/Context/PanelSideBarContext.tsx

@@ -42,33 +42,55 @@ export interface PanelSideBarContextProps<TPanelItem, TMenuItem> {
    */
   userDropDownMenu?: ReactNode;
   /**
-   * The other menu content.
+   * The menu content on the right.
    */
-  topBarCustomItems?: ReactNode[];
+  topBarRightCustomItems?: ReactNode[];
+  /**
+   * The menu content on the left.
+   */
+  topBarLeftCustomItems?: ReactNode[];
 }
 
 export const PanelSideBarContext = createContext<PanelSideBarContextProps<any, any> | null>(null);
 
 export interface PanelSideBarMenuProviderProps<TPanelItem, TMenuItem>
-  extends Pick<PanelSideBarContextProps<TPanelItem, TMenuItem>, "globalItems" | "LinkRenderer" | "brand" | "footer" | "userDropDownMenu" | "userDropDownMenuToggle" | "topBarCustomItems" | "localItems"> {
+  extends Pick<
+    PanelSideBarContextProps<TPanelItem, TMenuItem>,
+    "globalItems" | "LinkRenderer" | "brand" | "footer" | "userDropDownMenu" | "userDropDownMenuToggle" | "topBarRightCustomItems" | "topBarLeftCustomItems" | "localItems"
+  > {
   /**
    * The children elements.
    */
   children: React.ReactNode;
 }
 
 export const PanelSideBarProvider = <TPanelItem, TMenuItem>(props: PanelSideBarMenuProviderProps<TPanelItem, TMenuItem>) => {
-  const { children, globalItems, localItems = [], LinkRenderer, brand = null, footer = null, userDropDownMenu, userDropDownMenuToggle, topBarCustomItems } = props;
-
-  const activePanel = globalItems.find(x => x.children?.find(y => y.children ? y.children.find(s => s.active) : y.active));
-  const firstActivePanel = activePanel ?? globalItems.find(x => x.id);
+  const {
+    children,
+    globalItems,
+    localItems = [],
+    LinkRenderer,
+    brand = null,
+    footer = null,
+    userDropDownMenu,
+    userDropDownMenuToggle,
+    topBarRightCustomItems,
+    topBarLeftCustomItems,
+  } = props;
+
+  const activePanel = globalItems.find((x) => x.children?.find((y) => (y.children ? y.children.find((s) => s.active) : y.active)));
+  const firstActivePanel = activePanel ?? globalItems.find((x) => x.id);
 
   const getActivePanelId = () => localItems?.at(0)?.id ?? firstActivePanel?.id ?? "";
 
   const [activePanelId, setActivePanelId] = useState(getActivePanelId());
 
-  const [toggledMenuItemIds, setToggledMenuItemIds] = useState<string[]>([(firstActivePanel?.children ?
-      firstActivePanel.children?.find((x) => x.children?.find(s => s.active)) : firstActivePanel?.children?.find((x) => x.active))?.id ?? ""]);
+  const [toggledMenuItemIds, setToggledMenuItemIds] = useState<string[]>([
+    (firstActivePanel?.children
+      ? firstActivePanel.children?.find((x) => x.children?.find((s) => s.active))
+      : firstActivePanel?.children?.find((x) => x.active)
+    )?.id ?? "",
+  ]);
 
   const setActivePanel = (panelId: string) => setActivePanelId(panelId);
 
@@ -97,7 +119,8 @@ export const PanelSideBarProvider = <TPanelItem, TMenuItem>(props: PanelSideBarM
         footer,
         userDropDownMenu,
         userDropDownMenuToggle,
-        topBarCustomItems,
+        topBarRightCustomItems,
+        topBarLeftCustomItems,
         brand,
       }}
     >

src/lib/Layout/PanelSideBarLayout/PanelSideBarLayout.tsx

@@ -5,7 +5,7 @@ import "../../../../styles/Layout/PanelSideBarLayout.scss";
 import { PanelSideBar } from "./PanelSideBar/PanelSidebar";
 import { PanelSideBarLayoutContent } from "./PanelSideBarLayoutContent";
 import { PanelSideBarToggle } from "./PanelSideBar/PanelSideBarToggle";
-import {usePanelSideBarContext} from "src/lib/Layout/PanelSideBarLayout/PanelSideBar/Context/PanelSideBarContext";
+import { usePanelSideBarContext } from "src/lib/Layout/PanelSideBarLayout/PanelSideBar/Context/PanelSideBarContext";
 
 export interface PanelSideBarLayoutProps extends PropsWithChildren {
   /**
@@ -33,23 +33,30 @@ export const PanelSideBarLayout = (props: PanelSideBarLayoutProps) => {
     footer: contextFooter,
     userDropDownMenu,
     userDropDownMenuToggle,
-    topBarCustomItems = [],
+    topBarRightCustomItems = [],
+    topBarLeftCustomItems = [],
   } = usePanelSideBarContext();
 
   return (
     <>
       <nav id="nav-top" className="panel-layout navbar navbar-expand">
         {/* Navbar Brand */}
         <div className="navbar-brand">{brand ?? contextBrand}</div>
-        <Nav className="navbar-user" vertical style={{ marginRight: 48 + topBarCustomItems.length * 32 }}>
-          {/*Other Custom Menu*/}
-          <div className="navbar-custom">
-            {topBarCustomItems?.map((item, index) => (
-              <NavItem key={index} className="navbar-custom-item">
-                {item}
-              </NavItem>
-            ))}
-          </div>
+        <Nav className="navbar-user flex-row justify-content-start align-items-center" style={{ marginLeft: 35 }}>
+          {/*Left Custom Menu*/}
+          {topBarLeftCustomItems?.map((item, index) => (
+            <NavItem key={index} className="navbar-custom-item">
+              {item}
+            </NavItem>
+          ))}
+        </Nav>
+        <Nav className="navbar-user flex-row justify-content-end align-items-center" style={{ marginRight: 48 }}>
+          {/*Right Custom Menu*/}
+          {topBarRightCustomItems?.map((item, index) => (
+            <NavItem key={index} className="navbar-custom-item">
+              {item}
+            </NavItem>
+          ))}
           {/* <NavbarUser /> */}
           <NavItem>
             <UncontrolledDropdown direction="start">

styles/Layout/PanelSideBarLayout.scss

@@ -94,7 +94,7 @@ $topnav-light-toggler-color: $gray-900;
   .navbar-user {
     display: flex;
     height: $usernav-base-height;
-    width: $usernav-base-height;
+    width: 100%;
     border: 1px solid $topnav-dark-toggler-color;
     border-radius: $usernav-base-height;
     background-color: $sidenav-light-link-active-color;
@@ -106,15 +106,6 @@ $topnav-light-toggler-color: $gray-900;
       rgba($color: $sidenav-light-color, $alpha: 0.75) 70%,
       rgba($color: $sidenav-light-link-active-color, $alpha: 1) 82%
     );
-    align-items: center;
-    justify-content: center;
-    align-self: flex-end;
-    margin-left: auto;
-
-    .navbar-custom {
-      display: flex;
-      flex-direction: row;
-    }
 
     .navbar-custom-item {
       margin-left: 1em;