Added possibility to add custom JSX Elements as additional topbar item

Author: Andrea Aliberti

src/Layout/PanelSideBarLayout/Context/PanelSideBarLayoutContext.tsx

@@ -17,15 +17,19 @@ export interface PanelSideBarLayoutProviderProps {
    * The user dropdown menu content.
    */
   userDropDownMenu?: ReactNode;
+  /**
+   * The other menu content.
+   */
+  topBarCustomItems?: JSX.Element[];
 }
 
 const PanelSideBarLayoutContext = createContext<PanelSideBarLayoutProviderProps | null>(null);
 
 export const PanelSideBarLayoutProvider = (props: PropsWithChildren<PanelSideBarLayoutProviderProps>) => {
-  const { brand = null, children, footer = null, userDropDownMenu, userDropDownMenuToggle } = props;
+  const { brand = null, children, footer = null, userDropDownMenu, userDropDownMenuToggle, topBarCustomItems } = props;
 
   return (
-    <PanelSideBarLayoutContext.Provider value={{ brand, footer, userDropDownMenu, userDropDownMenuToggle }}>
+    <PanelSideBarLayoutContext.Provider value={{ brand, footer, userDropDownMenu, userDropDownMenuToggle, topBarCustomItems }}>
       {children}
     </PanelSideBarLayoutContext.Provider>
   );

src/Layout/PanelSideBarLayout/PanelSideBarLayout.tsx

@@ -29,7 +29,13 @@ export const PanelSideBarLayout = (props: PanelSideBarLayoutProps) => {
   const [isOpen, setIsOpen] = useState(true);
   const toggleSidebar = () => setIsOpen((prev) => !prev);
 
-  const { brand: contextBrand, footer: contextFooter, userDropDownMenu, userDropDownMenuToggle } = usePanelSideBarLayoutContext();
+  const {
+    brand: contextBrand,
+    footer: contextFooter,
+    userDropDownMenu,
+    userDropDownMenuToggle,
+    topBarCustomItems = [],
+  } = usePanelSideBarLayoutContext();
 
   return (
     <>
@@ -38,7 +44,11 @@ export const PanelSideBarLayout = (props: PanelSideBarLayoutProps) => {
         <div className="navbar-brand">{brand ?? contextBrand}</div>
 
         {/* <NavbarUser /> */}
-        <Nav className="navbar-user">
+        <Nav className="navbar-user" vertical>
+          {/*Other Custom Menu*/}
+          {topBarCustomItems?.map((item) => (
+            <NavItem>{item}</NavItem>
+          ))}
           <NavItem>
             <UncontrolledDropdown direction="start">
               <DropdownToggle nav className="user-dropdown">

styles/Layout/PanelSideBarLayout.scss

@@ -109,8 +109,9 @@ $topnav-light-toggler-color: $gray-900;
     align-items: center;
     justify-content: center;
     align-self: flex-end;
-    margin: 0 1rem;
+    margin: 0 3rem;
     margin-left: auto;
+    margin-right: 3rem;
 
     .user-dropdown {
       font-weight: bold;
@@ -240,6 +241,7 @@ section.content:first-of-type {
 
 @include media-breakpoint-up(md) {
   $toggled-width: #{$tile-size + $slim-scrollbar-base-width};
+
   section.toggled {
     > #side-nav {
       transition: $sidebar-transition;