RC-11: update components according to ui kit

src/app/theme-layouts/layout1/Layout1Config.js

@@ -5,7 +5,6 @@ const config = {
     containerWidth: 1570,
     navbar: {
       display: true,
-      style: 'style-1',
       folded: true,
       position: 'left',
     },
@@ -55,32 +54,6 @@ const config = {
             },
           ],
         },
-        style: {
-          title: 'Style',
-          type: 'radio',
-          options: [
-            {
-              name: 'Slide (style-1)',
-              value: 'style-1',
-            },
-            {
-              name: 'Folded (style-2)',
-              value: 'style-2',
-            },
-            {
-              name: 'Tabbed (style-3)',
-              value: 'style-3',
-            },
-            {
-              name: 'Tabbed Dense (style-3-dense)',
-              value: 'style-3-dense',
-            },
-          ],
-        },
-        folded: {
-          title: 'Folded (style-2, style-3)',
-          type: 'switch',
-        },
       },
     },
   },

src/app/theme-layouts/layout1/components/NavbarWrapperLayout1.js

@@ -3,9 +3,7 @@ import { memo } from 'react';
 import { useSelector } from 'react-redux';
 import { selectFuseCurrentLayoutConfig, selectNavbarTheme } from 'app/store/fuse/settingsSlice';
 import { selectFuseNavbar } from 'app/store/fuse/navbarSlice';
-import NavbarStyle1 from './navbar/style-1/NavbarStyle1';
-import NavbarStyle2 from './navbar/style-2/NavbarStyle2';
-import NavbarStyle3 from './navbar/style-3/NavbarStyle3';
+import NavbarLayout1 from './navbar/NavbarLayout1';
 import NavbarToggleFab from '../../shared-components/NavbarToggleFab';
 
 function NavbarWrapperLayout1(props) {
@@ -17,12 +15,7 @@ function NavbarWrapperLayout1(props) {
   return (
     <>
       <ThemeProvider theme={navbarTheme}>
-        <>
-          {config.navbar.style === 'style-1' && <NavbarStyle1 />}
-          {config.navbar.style === 'style-2' && <NavbarStyle2 />}
-          {config.navbar.style === 'style-3' && <NavbarStyle3 />}
-          {config.navbar.style === 'style-3-dense' && <NavbarStyle3 dense />}
-        </>
+        <NavbarLayout1 />
       </ThemeProvider>
 
       {config.navbar.display && !navbar.open && <NavbarToggleFab />}

src/app/theme-layouts/layout1/components/navbar/NavbarLayout1.js

@@ -4,7 +4,7 @@ import SwipeableDrawer from '@mui/material/SwipeableDrawer';
 import { useDispatch, useSelector } from 'react-redux';
 import { navbarCloseMobile, selectFuseNavbar } from 'app/store/fuse/navbarSlice';
 import { selectFuseCurrentLayoutConfig } from 'app/store/fuse/settingsSlice';
-import NavbarStyle1Content from './NavbarStyle1Content';
+import NavbarLayout1Content from './NavbarLayout1Content';
 
 const navbarWidth = 280;
 
@@ -40,7 +40,7 @@ const StyledNavBarMobile = styled(SwipeableDrawer)(({ theme }) => ({
   },
 }));
 
-function NavbarStyle1(props) {
+function NavbarLayout1(props) {
   const dispatch = useDispatch();
   const config = useSelector(selectFuseCurrentLayoutConfig);
   const navbar = useSelector(selectFuseNavbar);
@@ -53,7 +53,7 @@ function NavbarStyle1(props) {
           open={navbar.open}
           position={config.navbar.position}
         >
-          <NavbarStyle1Content />
+          <NavbarLayout1Content />
         </StyledNavBar>
       </Hidden>
 
@@ -72,11 +72,11 @@ function NavbarStyle1(props) {
             keepMounted: true, // Better open performance on mobile.
           }}
         >
-          <NavbarStyle1Content />
+          <NavbarLayout1Content />
         </StyledNavBarMobile>
       </Hidden>
     </>
   );
 }
 
-export default NavbarStyle1;
+export default NavbarLayout1;

src/app/theme-layouts/layout1/components/navbar/NavbarLayout1Content.js

@@ -2,10 +2,10 @@ import FuseScrollbars from '@fuse/core/FuseScrollbars';
 import { styled } from '@mui/material/styles';
 import clsx from 'clsx';
 import { memo } from 'react';
-import Logo from '../../../../shared-components/Logo';
-import NavbarToggleButton from '../../../../shared-components/NavbarToggleButton';
-import UserNavbarHeader from '../../../../shared-components/UserNavbarHeader';
-import Navigation from '../../../../shared-components/Navigation';
+import Logo from '../../../shared-components/Logo';
+import NavbarToggleButton from '../../../shared-components/NavbarToggleButton';
+import UserNavbarHeader from '../../../shared-components/UserNavbarHeader';
+import Navigation from '../../../shared-components/Navigation';
 
 const Root = styled('div')(({ theme }) => ({
   backgroundColor: theme.palette.background.default,
@@ -32,7 +32,7 @@ const StyledContent = styled(FuseScrollbars)(({ theme }) => ({
   backgroundAttachment: 'local, scroll',
 }));
 
-function NavbarStyle1Content(props) {
+function NavbarLayout1Content(props) {
   return (
     <Root className={clsx('flex flex-auto flex-col overflow-hidden h-full', props.className)}>
       <div className="flex flex-row items-center shrink-0 h-48 md:h-72 px-20">
@@ -50,13 +50,9 @@ function NavbarStyle1Content(props) {
         <UserNavbarHeader />
 
         <Navigation layout="vertical" />
-
-        <div className="flex flex-0 items-center justify-center py-48 opacity-10">
-          <img className="w-full max-w-64" src="assets/images/logo/logo.svg" alt="footer logo" />
-        </div>
       </StyledContent>
     </Root>
   );
 }
 
-export default memo(NavbarStyle1Content);
+export default memo(NavbarLayout1Content);