Merge pull request #190 from Dias999/feature/Routes-Add_drawer_and_na…

…v_props feat: add drawerProps and navProps to Router
conceptadev · Aug 23, 2024 · 39b6c56 · 39b6c56
2 parents db11d65 + c6ac7a7
commit 39b6c56
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 10 deletions.
diff --git a/packages/react-material-ui/src/components/Drawer/Drawer.tsx b/packages/react-material-ui/src/components/Drawer/Drawer.tsx
@@ -16,7 +16,7 @@ import { SxProps, Theme } from '@mui/material/styles';
  */
 export type DrawerProps = {
   /** Array of items to display in the drawer */
-  items: DrawerItemProps[];
+  items?: DrawerItemProps[];
   /** ID of the currently active item, changing the menu item to active when the page selected corresponds to the path name. */
   currentId?: string;
   /** Custom node that can be rendered on the bottom of the Drawer, serving as toggle for expanded/collapsed state. */
@@ -137,7 +137,7 @@ export const Drawer = (props: DrawerProps) => {
           {renderLogo()}
         </Toolbar>
 
-        {items.map((item, i) => {
+        {items?.map((item, i) => {
           const isActive = !!currentId && currentId.startsWith(item.id);
           if (item.component)
             return (

diff --git a/packages/react-navigation/src/components/AppBarContainer.tsx b/packages/react-navigation/src/components/AppBarContainer.tsx
@@ -3,16 +3,25 @@ import { useAuth } from '@concepta/react-auth-provider';
 import Container from '@mui/material/Container';
 import MenuItem from '@mui/material/MenuItem';
 import { useNavigate, useLocation } from 'react-router-dom';
-import { AppBar, DrawerItemProps } from '@concepta/react-material-ui';
+import {
+  AppBar,
+  DrawerItemProps,
+  DrawerProps,
+  NavbarProps,
+} from '@concepta/react-material-ui';
 
 type AppBarContainer = {
   children: ReactNode;
   menuItems: DrawerItemProps[];
+  drawerProps?: DrawerProps;
+  navbarProps?: NavbarProps;
 };
 
 export default function AppBarContainer({
   children,
   menuItems,
+  drawerProps,
+  navbarProps,
 }: AppBarContainer) {
   const navigate = useNavigate();
   const location = useLocation();
@@ -24,24 +33,29 @@ export default function AppBarContainer({
     startTransition(() => navigate('/sign-in'));
   };
 
+  const drawerItems = drawerProps?.items
+    ? [...menuItems, ...drawerProps.items]
+    : menuItems;
+
   return (
     <AppBar.Root key={location.pathname}>
       <AppBar.Drawer
         currentId={location.pathname}
         logo="/logo.svg"
         collapsible
-        items={menuItems}
         expandedWidth={120}
+        {...drawerProps}
+        items={drawerItems}
       />
       <AppBar.Main>
         <AppBar.Nav
           text={(user as any)?.username || ''}
-          avatar="https://source.unsplash.com/random"
           headerMenuOptions={(handleClose) => (
             <MenuItem onClick={() => onLogoutClick(handleClose)}>
               Sign Out
             </MenuItem>
           )}
+          {...navbarProps}
         />
         <Container>{children}</Container>
       </AppBar.Main>

diff --git a/packages/react-navigation/src/components/DefaultRoute.tsx b/packages/react-navigation/src/components/DefaultRoute.tsx
@@ -2,7 +2,12 @@ import React, { ReactNode } from 'react';
 import { useNavigate } from 'react-router-dom';
 import ProtectedRoute from './ProtectedRoute';
 import AppBarContainer from './AppBarContainer';
-import { CrudModule, DrawerItemProps } from '@concepta/react-material-ui/';
+import {
+  CrudModule,
+  DrawerItemProps,
+  DrawerProps,
+  NavbarProps,
+} from '@concepta/react-material-ui/';
 import { ModuleProps } from '@concepta/react-material-ui/dist/modules/crud';
 
 type DefaultRouteProps = {
@@ -11,6 +16,8 @@ type DefaultRouteProps = {
   module?: ModuleProps;
   page?: ReactNode;
   items: DrawerItemProps[];
+  drawerProps?: DrawerProps;
+  navbarProps?: NavbarProps;
   renderAppBar?: (
     menuItems: DrawerItemProps[],
     children: ReactNode,
@@ -23,6 +30,8 @@ const DefaultRoute = ({
   module,
   page,
   items,
+  drawerProps,
+  navbarProps,
   renderAppBar,
 }: DefaultRouteProps) => {
   const navigate = useNavigate();
@@ -64,7 +73,11 @@ const DefaultRoute = ({
 
   return (
     <ProtectedRoute>
-      <AppBarContainer menuItems={menuItems}>
+      <AppBarContainer
+        menuItems={menuItems}
+        drawerProps={drawerProps}
+        navbarProps={navbarProps}
+      >
         {renderedChildren}
       </AppBarContainer>
     </ProtectedRoute>

diff --git a/packages/react-navigation/src/components/Router.tsx b/packages/react-navigation/src/components/Router.tsx
@@ -12,7 +12,12 @@ import {
   RouterProvider,
   Route,
 } from 'react-router-dom';
-import { DrawerItemProps, AuthModuleProps } from '@concepta/react-material-ui/';
+import {
+  DrawerItemProps,
+  AuthModuleProps,
+  DrawerProps,
+  NavbarProps,
+} from '@concepta/react-material-ui/';
 import RoutesRoot from './RoutesRoot';
 
 export type AuthModule = {
@@ -27,6 +32,8 @@ const router = (
   routes: ReactElement[],
   items: DrawerItemProps[],
   authModuleProps?: AuthModule,
+  drawerProps?: DrawerProps,
+  navbarProps?: NavbarProps,
   useMemoryRouter?: boolean,
   renderAppBar?: (
     menuItems: DrawerItemProps[],
@@ -53,6 +60,8 @@ const router = (
               routes={routes}
               items={items}
               authModuleProps={authModuleProps}
+              drawerProps={drawerProps}
+              navbarProps={navbarProps}
               renderAppBar={renderAppBar}
               renderSignIn={renderSignIn}
               renderSignUp={renderSignUp}
@@ -71,6 +80,8 @@ type RouterProps = {
   AdminProvider: ComponentType<PropsWithChildren<{ home: string }>>;
   useMemoryRouter?: boolean;
   authModuleProps?: AuthModule;
+  drawerProps?: DrawerProps;
+  navbarProps?: NavbarProps;
   renderAppBar?: (
     menuItems: DrawerItemProps[],
     children: ReactNode,
@@ -86,6 +97,8 @@ const Router = ({
   AdminProvider,
   useMemoryRouter = false,
   authModuleProps,
+  drawerProps,
+  navbarProps,
   renderAppBar,
   renderSignIn,
   renderSignUp,
@@ -107,6 +120,8 @@ const Router = ({
         children,
         items,
         authModuleProps,
+        drawerProps,
+        navbarProps,
         useMemoryRouter,
         renderAppBar,
         renderSignIn,

diff --git a/packages/react-navigation/src/components/RoutesRoot.tsx b/packages/react-navigation/src/components/RoutesRoot.tsx
@@ -1,7 +1,11 @@
 import React, { Children, ReactElement, ReactNode } from 'react';
 import { Route, Routes, Navigate } from 'react-router-dom';
 import LoginRoute from './LoginRoute';
-import { DrawerItemProps } from '@concepta/react-material-ui';
+import {
+  DrawerItemProps,
+  DrawerProps,
+  NavbarProps,
+} from '@concepta/react-material-ui';
 import DefaultRoute from './DefaultRoute';
 import SignUpRoute from './SignUpRoute';
 import ResetPasswordRoute from './ResetPasswordRoute';
@@ -12,6 +16,8 @@ type RoutesRootProps = {
   items: DrawerItemProps[];
   routes: ReactElement[];
   authModuleProps?: AuthModule;
+  drawerProps?: DrawerProps;
+  navbarProps?: NavbarProps;
   renderAppBar?: (
     menuItems: DrawerItemProps[],
     children: ReactNode,
@@ -26,6 +32,8 @@ const RoutesRoot = ({
   routes,
   items,
   authModuleProps,
+  drawerProps,
+  navbarProps,
   renderAppBar,
   renderSignIn,
   renderSignUp,
@@ -93,9 +101,11 @@ const RoutesRoot = ({
                 renderAppBar={renderAppBar}
                 resource={child.props.id}
                 name={child.props.name}
-                items={items}
                 module={child.props.module}
                 page={child.props.page}
+                items={items}
+                drawerProps={drawerProps}
+                navbarProps={navbarProps}
               />
             }
           />