docs: remove useless locales, credits, serviceworker, layout2 and layout3 files
This commit is contained in:
@@ -1,84 +0,0 @@
|
||||
import FuseDialog from '@fuse/core/FuseDialog';
|
||||
import { styled } from '@mui/material/styles';
|
||||
import FuseMessage from '@fuse/core/FuseMessage';
|
||||
import FuseSuspense from '@fuse/core/FuseSuspense';
|
||||
import AppContext from 'app/AppContext';
|
||||
import clsx from 'clsx';
|
||||
import { memo, useContext } from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { useRoutes } from 'react-router-dom';
|
||||
import { selectFuseCurrentLayoutConfig } from 'app/store/fuse/settingsSlice';
|
||||
import FooterLayout2 from './components/FooterLayout2';
|
||||
import LeftSideLayout2 from './components/LeftSideLayout2';
|
||||
import NavbarWrapperLayout2 from './components/NavbarWrapperLayout2';
|
||||
import RightSideLayout2 from './components/RightSideLayout2';
|
||||
import ToolbarLayout2 from './components/ToolbarLayout2';
|
||||
import SettingsPanel from '../shared-components/SettingsPanel';
|
||||
|
||||
const Root = styled('div')(({ theme, config }) => ({
|
||||
...(config.mode === 'boxed' && {
|
||||
clipPath: 'inset(0)',
|
||||
maxWidth: `${config.containerWidth}px`,
|
||||
margin: '0 auto',
|
||||
boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
|
||||
}),
|
||||
...(config.mode === 'container' && {
|
||||
'& .container': {
|
||||
maxWidth: `${config.containerWidth}px`,
|
||||
width: '100%',
|
||||
margin: '0 auto',
|
||||
},
|
||||
}),
|
||||
}));
|
||||
|
||||
function Layout2(props) {
|
||||
const config = useSelector(selectFuseCurrentLayoutConfig);
|
||||
const appContext = useContext(AppContext);
|
||||
const { routes } = appContext;
|
||||
|
||||
return (
|
||||
<Root id="fuse-layout" className="w-full flex" config={config}>
|
||||
{config.leftSidePanel.display && <LeftSideLayout2 />}
|
||||
|
||||
<div className="flex flex-col flex-auto min-w-0">
|
||||
<main id="fuse-main" className="flex flex-col flex-auto min-h-full min-w-0 relative">
|
||||
{config.navbar.display && (
|
||||
<NavbarWrapperLayout2
|
||||
className={clsx(config.navbar.style === 'fixed' && 'sticky top-0 z-50')}
|
||||
/>
|
||||
)}
|
||||
|
||||
{config.toolbar.display && (
|
||||
<ToolbarLayout2
|
||||
className={clsx(
|
||||
config.toolbar.style === 'fixed' && 'sticky top-0',
|
||||
config.toolbar.position === 'above' && 'order-first z-40'
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className="sticky top-0 z-99">
|
||||
<SettingsPanel />
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col flex-auto min-h-0 relative z-10">
|
||||
<FuseDialog />
|
||||
|
||||
<FuseSuspense>{useRoutes(routes)}</FuseSuspense>
|
||||
|
||||
{props.children}
|
||||
</div>
|
||||
|
||||
{config.footer.display && (
|
||||
<FooterLayout2 className={config.footer.style === 'fixed' && 'sticky bottom-0'} />
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
|
||||
{config.rightSidePanel.display && <RightSideLayout2 />}
|
||||
<FuseMessage />
|
||||
</Root>
|
||||
);
|
||||
}
|
||||
|
||||
export default memo(Layout2);
|
||||
@@ -1,138 +0,0 @@
|
||||
const config = {
|
||||
title: 'Layout 2 - Horizontal',
|
||||
defaults: {
|
||||
mode: 'container',
|
||||
containerWidth: 1120,
|
||||
navbar: {
|
||||
display: true,
|
||||
style: 'fixed',
|
||||
},
|
||||
toolbar: {
|
||||
display: true,
|
||||
style: 'static',
|
||||
position: 'below',
|
||||
},
|
||||
footer: {
|
||||
display: true,
|
||||
style: 'fixed',
|
||||
},
|
||||
leftSidePanel: {
|
||||
display: true,
|
||||
},
|
||||
rightSidePanel: {
|
||||
display: true,
|
||||
},
|
||||
},
|
||||
form: {
|
||||
mode: {
|
||||
title: 'Mode',
|
||||
type: 'radio',
|
||||
options: [
|
||||
{
|
||||
name: 'Boxed',
|
||||
value: 'boxed',
|
||||
},
|
||||
{
|
||||
name: 'Full Width',
|
||||
value: 'fullwidth',
|
||||
},
|
||||
{
|
||||
name: 'Container',
|
||||
value: 'container',
|
||||
},
|
||||
],
|
||||
},
|
||||
containerWidth: {
|
||||
title: 'Container Width (px)',
|
||||
type: 'number',
|
||||
},
|
||||
navbar: {
|
||||
type: 'group',
|
||||
title: 'Navbar',
|
||||
children: {
|
||||
display: {
|
||||
title: 'Display',
|
||||
type: 'switch',
|
||||
},
|
||||
style: {
|
||||
title: 'Style',
|
||||
type: 'radio',
|
||||
options: [
|
||||
{
|
||||
name: 'Fixed',
|
||||
value: 'fixed',
|
||||
},
|
||||
{
|
||||
name: 'Static',
|
||||
value: 'static',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
toolbar: {
|
||||
type: 'group',
|
||||
title: 'Toolbar',
|
||||
children: {
|
||||
display: {
|
||||
title: 'Display',
|
||||
type: 'switch',
|
||||
},
|
||||
position: {
|
||||
title: 'Position',
|
||||
type: 'radio',
|
||||
options: [
|
||||
{
|
||||
name: 'Above',
|
||||
value: 'above',
|
||||
},
|
||||
{
|
||||
name: 'Below',
|
||||
value: 'below',
|
||||
},
|
||||
],
|
||||
},
|
||||
style: {
|
||||
title: 'Style',
|
||||
type: 'radio',
|
||||
options: [
|
||||
{
|
||||
name: 'Fixed',
|
||||
value: 'fixed',
|
||||
},
|
||||
{
|
||||
name: 'Static',
|
||||
value: 'static',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
footer: {
|
||||
type: 'group',
|
||||
title: 'Footer',
|
||||
children: {
|
||||
display: {
|
||||
title: 'Display',
|
||||
type: 'switch',
|
||||
},
|
||||
style: {
|
||||
title: 'Style',
|
||||
type: 'radio',
|
||||
options: [
|
||||
{
|
||||
name: 'Fixed',
|
||||
value: 'fixed',
|
||||
},
|
||||
{
|
||||
name: 'Static',
|
||||
value: 'static',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default config;
|
||||
@@ -1,28 +0,0 @@
|
||||
import AppBar from '@mui/material/AppBar';
|
||||
import { ThemeProvider } from '@mui/material/styles';
|
||||
import Toolbar from '@mui/material/Toolbar';
|
||||
import clsx from 'clsx';
|
||||
import { memo } from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { selectFooterTheme } from 'app/store/fuse/settingsSlice';
|
||||
|
||||
function FooterLayout2(props) {
|
||||
const footerTheme = useSelector(selectFooterTheme);
|
||||
|
||||
return (
|
||||
<ThemeProvider theme={footerTheme}>
|
||||
<AppBar
|
||||
id="fuse-footer"
|
||||
className={clsx('relative z-20 shadow-md', props.className)}
|
||||
color="default"
|
||||
sx={{ backgroundColor: footerTheme.palette.background.paper }}
|
||||
>
|
||||
<Toolbar className="container min-h-48 md:min-h-64 px-8 sm:px-12 py-0 flex items-center overflow-x-auto">
|
||||
Footer
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
export default memo(FooterLayout2);
|
||||
@@ -1,7 +0,0 @@
|
||||
import { memo } from 'react';
|
||||
|
||||
function LeftSideLayout2() {
|
||||
return <></>;
|
||||
}
|
||||
|
||||
export default memo(LeftSideLayout2);
|
||||
@@ -1,29 +0,0 @@
|
||||
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 Navigation from '../../shared-components/Navigation';
|
||||
|
||||
const Root = styled('div')(({ theme }) => ({
|
||||
backgroundColor: theme.palette.background.default,
|
||||
color: theme.palette.text.primary,
|
||||
}));
|
||||
|
||||
function NavbarLayout2(props) {
|
||||
return (
|
||||
<Root className={clsx('w-full h-64 min-h-64 max-h-64 shadow-md', props.className)}>
|
||||
<div className="flex flex-auto justify-between items-center w-full h-full container p-0 lg:px-24 z-20">
|
||||
<div className="flex shrink-0 items-center px-8">
|
||||
<Logo />
|
||||
</div>
|
||||
|
||||
<FuseScrollbars className="flex h-full items-center">
|
||||
<Navigation className="w-full" layout="horizontal" />
|
||||
</FuseScrollbars>
|
||||
</div>
|
||||
</Root>
|
||||
);
|
||||
}
|
||||
|
||||
export default memo(NavbarLayout2);
|
||||
@@ -1,63 +0,0 @@
|
||||
import FuseScrollbars from '@fuse/core/FuseScrollbars';
|
||||
import { styled } from '@mui/material/styles';
|
||||
import clsx from 'clsx';
|
||||
import { memo } from 'react';
|
||||
import UserNavbarHeader from '../../shared-components/UserNavbarHeader';
|
||||
import NavbarToggleButton from '../../shared-components/NavbarToggleButton';
|
||||
import Logo from '../../shared-components/Logo';
|
||||
import Navigation from '../../shared-components/Navigation';
|
||||
|
||||
const Root = styled('div')(({ theme }) => ({
|
||||
backgroundColor: theme.palette.background.default,
|
||||
color: theme.palette.text.primary,
|
||||
|
||||
'& ::-webkit-scrollbar-thumb': {
|
||||
boxShadow: `inset 0 0 0 20px ${
|
||||
theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.24)' : 'rgba(255, 255, 255, 0.24)'
|
||||
}`,
|
||||
},
|
||||
'& ::-webkit-scrollbar-thumb:active': {
|
||||
boxShadow: `inset 0 0 0 20px ${
|
||||
theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.37)' : 'rgba(255, 255, 255, 0.37)'
|
||||
}`,
|
||||
},
|
||||
}));
|
||||
|
||||
const StyledContent = styled(FuseScrollbars)(({ theme }) => ({
|
||||
overscrollBehavior: 'contain',
|
||||
overflowX: 'hidden',
|
||||
overflowY: 'auto',
|
||||
WebkitOverflowScrolling: 'touch',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundSize: '100% 40px, 100% 10px',
|
||||
backgroundAttachment: 'local, scroll',
|
||||
}));
|
||||
|
||||
function NavbarMobileLayout2(props) {
|
||||
return (
|
||||
<Root className={clsx('flex flex-col h-full overflow-hidden', props.className)}>
|
||||
<div className="flex flex-row items-center shrink-0 h-48 md:h-72 px-20">
|
||||
<div className="flex flex-1 mx-4">
|
||||
<Logo />
|
||||
</div>
|
||||
|
||||
<NavbarToggleButton className="w-40 h-40 p-0" />
|
||||
</div>
|
||||
|
||||
<StyledContent
|
||||
className="flex flex-1 flex-col min-h-0"
|
||||
option={{ suppressScrollX: true, wheelPropagation: false }}
|
||||
>
|
||||
<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(NavbarMobileLayout2);
|
||||
@@ -1,64 +0,0 @@
|
||||
import Hidden from '@mui/material/Hidden';
|
||||
import { styled, ThemeProvider } from '@mui/material/styles';
|
||||
import SwipeableDrawer from '@mui/material/SwipeableDrawer';
|
||||
import { navbarCloseMobile, selectFuseNavbar } from 'app/store/fuse/navbarSlice';
|
||||
import { memo } from 'react';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { selectFuseCurrentLayoutConfig, selectNavbarTheme } from 'app/store/fuse/settingsSlice';
|
||||
import NavbarLayout2 from './NavbarLayout2';
|
||||
import NavbarMobileLayout2 from './NavbarMobileLayout2';
|
||||
import NavbarToggleFab from '../../shared-components/NavbarToggleFab';
|
||||
|
||||
const StyledSwipeableDrawer = styled(SwipeableDrawer)(({ theme }) => ({
|
||||
'& > .MuiDrawer-paper': {
|
||||
height: '100%',
|
||||
flexDirection: 'column',
|
||||
flex: '1 1 auto',
|
||||
width: 280,
|
||||
minWidth: 280,
|
||||
transition: theme.transitions.create(['width', 'min-width'], {
|
||||
easing: theme.transitions.easing.sharp,
|
||||
duration: theme.transitions.duration.shorter,
|
||||
}),
|
||||
},
|
||||
}));
|
||||
|
||||
function NavbarWrapperLayout2(props) {
|
||||
const dispatch = useDispatch();
|
||||
const config = useSelector(selectFuseCurrentLayoutConfig);
|
||||
const navbarTheme = useSelector(selectNavbarTheme);
|
||||
const navbar = useSelector(selectFuseNavbar);
|
||||
|
||||
return (
|
||||
<>
|
||||
<ThemeProvider theme={navbarTheme}>
|
||||
<Hidden lgDown>
|
||||
<NavbarLayout2 />
|
||||
</Hidden>
|
||||
|
||||
<Hidden lgUp>
|
||||
<StyledSwipeableDrawer
|
||||
anchor="left"
|
||||
variant="temporary"
|
||||
open={navbar.mobileOpen}
|
||||
onClose={() => dispatch(navbarCloseMobile())}
|
||||
onOpen={() => {}}
|
||||
disableSwipeToOpen
|
||||
ModalProps={{
|
||||
keepMounted: true, // Better open performance on mobile.
|
||||
}}
|
||||
>
|
||||
<NavbarMobileLayout2 />
|
||||
</StyledSwipeableDrawer>
|
||||
</Hidden>
|
||||
</ThemeProvider>
|
||||
{config.navbar.display && !config.toolbar.display && (
|
||||
<Hidden lgUp>
|
||||
<NavbarToggleFab />
|
||||
</Hidden>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default memo(NavbarWrapperLayout2);
|
||||
@@ -1,15 +0,0 @@
|
||||
import { memo } from 'react';
|
||||
import QuickPanel from '../../shared-components/quickPanel/QuickPanel';
|
||||
import NotificationPanel from '../../shared-components/notificationPanel/NotificationPanel';
|
||||
|
||||
function RightSideLayout2() {
|
||||
return (
|
||||
<>
|
||||
<QuickPanel />
|
||||
|
||||
<NotificationPanel />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default memo(RightSideLayout2);
|
||||
@@ -1,70 +0,0 @@
|
||||
import { ThemeProvider } from '@mui/material/styles';
|
||||
import AppBar from '@mui/material/AppBar';
|
||||
import Hidden from '@mui/material/Hidden';
|
||||
import Toolbar from '@mui/material/Toolbar';
|
||||
import clsx from 'clsx';
|
||||
import { memo } from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { selectFuseCurrentLayoutConfig, selectToolbarTheme } from 'app/store/fuse/settingsSlice';
|
||||
import AdjustFontSize from '../../shared-components/AdjustFontSize';
|
||||
import FullScreenToggle from '../../shared-components/FullScreenToggle';
|
||||
import LanguageSwitcher from '../../shared-components/LanguageSwitcher';
|
||||
import NotificationPanelToggleButton from '../../shared-components/notificationPanel/NotificationPanelToggleButton';
|
||||
import NavigationShortcuts from '../../shared-components/NavigationShortcuts';
|
||||
import NavigationSearch from '../../shared-components/NavigationSearch';
|
||||
import NavbarToggleButton from '../../shared-components/NavbarToggleButton';
|
||||
import UserMenu from '../../shared-components/UserMenu';
|
||||
import QuickPanelToggleButton from '../../shared-components/quickPanel/QuickPanelToggleButton';
|
||||
import ChatPanelToggleButton from '../../shared-components/chatPanel/ChatPanelToggleButton';
|
||||
|
||||
function ToolbarLayout2(props) {
|
||||
const config = useSelector(selectFuseCurrentLayoutConfig);
|
||||
const toolbarTheme = useSelector(selectToolbarTheme);
|
||||
|
||||
return (
|
||||
<ThemeProvider theme={toolbarTheme}>
|
||||
<AppBar
|
||||
id="fuse-toolbar"
|
||||
className={clsx('flex relative z-20 shadow-md', props.className)}
|
||||
color="default"
|
||||
style={{ backgroundColor: toolbarTheme.palette.background.paper }}
|
||||
>
|
||||
<Toolbar className="container p-0 lg:px-24 min-h-48 md:min-h-64">
|
||||
{config.navbar.display && (
|
||||
<Hidden lgUp>
|
||||
<NavbarToggleButton className="w-40 h-40 p-0 mx-0 sm:mx-8" />
|
||||
</Hidden>
|
||||
)}
|
||||
|
||||
<div className="flex flex-1">
|
||||
<Hidden lgDown>
|
||||
<NavigationShortcuts />
|
||||
</Hidden>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center px-8 h-full overflow-x-auto">
|
||||
<LanguageSwitcher />
|
||||
|
||||
<AdjustFontSize />
|
||||
|
||||
<FullScreenToggle />
|
||||
|
||||
<NavigationSearch />
|
||||
|
||||
<Hidden lgUp>
|
||||
<ChatPanelToggleButton />
|
||||
</Hidden>
|
||||
|
||||
<QuickPanelToggleButton />
|
||||
|
||||
<NotificationPanelToggleButton />
|
||||
|
||||
<UserMenu />
|
||||
</div>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
export default memo(ToolbarLayout2);
|
||||
@@ -1,83 +0,0 @@
|
||||
import FuseDialog from '@fuse/core/FuseDialog';
|
||||
import { styled } from '@mui/material/styles';
|
||||
import FuseMessage from '@fuse/core/FuseMessage';
|
||||
import FuseSuspense from '@fuse/core/FuseSuspense';
|
||||
import clsx from 'clsx';
|
||||
import { memo, useContext } from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { useRoutes } from 'react-router-dom';
|
||||
import AppContext from 'app/AppContext';
|
||||
import { selectFuseCurrentLayoutConfig } from 'app/store/fuse/settingsSlice';
|
||||
import FooterLayout3 from './components/FooterLayout3';
|
||||
import LeftSideLayout3 from './components/LeftSideLayout3';
|
||||
import NavbarWrapperLayout3 from './components/NavbarWrapperLayout3';
|
||||
import RightSideLayout3 from './components/RightSideLayout3';
|
||||
import ToolbarLayout3 from './components/ToolbarLayout3';
|
||||
import SettingsPanel from '../shared-components/SettingsPanel';
|
||||
|
||||
const Root = styled('div')(({ theme, config }) => ({
|
||||
...(config.mode === 'boxed' && {
|
||||
clipPath: 'inset(0)',
|
||||
maxWidth: `${config.containerWidth}px`,
|
||||
margin: '0 auto',
|
||||
boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
|
||||
}),
|
||||
...(config.mode === 'container' && {
|
||||
'& .container': {
|
||||
maxWidth: `${config.containerWidth}px`,
|
||||
width: '100%',
|
||||
margin: '0 auto',
|
||||
},
|
||||
}),
|
||||
}));
|
||||
|
||||
function Layout3(props) {
|
||||
const config = useSelector(selectFuseCurrentLayoutConfig);
|
||||
const appContext = useContext(AppContext);
|
||||
const { routes } = appContext;
|
||||
return (
|
||||
<Root id="fuse-layout" className="w-full flex" config={config}>
|
||||
{config.leftSidePanel.display && <LeftSideLayout3 />}
|
||||
|
||||
<div className="flex flex-col flex-auto min-w-0">
|
||||
<main id="fuse-main" className="flex flex-col flex-auto min-h-full min-w-0 relative">
|
||||
{config.navbar.display && (
|
||||
<NavbarWrapperLayout3
|
||||
className={clsx(config.navbar.style === 'fixed' && 'sticky top-0 z-50')}
|
||||
/>
|
||||
)}
|
||||
|
||||
{config.toolbar.display && (
|
||||
<ToolbarLayout3
|
||||
className={clsx(
|
||||
config.toolbar.style === 'fixed' && 'sticky top-0',
|
||||
config.toolbar.position === 'above' && 'order-first z-40'
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className="sticky top-0 z-99">
|
||||
<SettingsPanel />
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col flex-auto min-h-0 relative z-10">
|
||||
<FuseDialog />
|
||||
|
||||
<FuseSuspense>{useRoutes(routes)}</FuseSuspense>
|
||||
|
||||
{props.children}
|
||||
</div>
|
||||
|
||||
{config.footer.display && (
|
||||
<FooterLayout3 className={config.footer.style === 'fixed' && 'sticky bottom-0'} />
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
|
||||
{config.rightSidePanel.display && <RightSideLayout3 />}
|
||||
<FuseMessage />
|
||||
</Root>
|
||||
);
|
||||
}
|
||||
|
||||
export default memo(Layout3);
|
||||
@@ -1,139 +0,0 @@
|
||||
const config = {
|
||||
title: 'Layout 3 - Horizontal',
|
||||
defaults: {
|
||||
mode: 'container',
|
||||
containerWidth: 1120,
|
||||
scroll: 'content',
|
||||
navbar: {
|
||||
display: true,
|
||||
style: 'fixed',
|
||||
},
|
||||
toolbar: {
|
||||
display: true,
|
||||
style: 'static',
|
||||
position: 'below',
|
||||
},
|
||||
footer: {
|
||||
display: true,
|
||||
style: 'fixed',
|
||||
},
|
||||
leftSidePanel: {
|
||||
display: true,
|
||||
},
|
||||
rightSidePanel: {
|
||||
display: true,
|
||||
},
|
||||
},
|
||||
form: {
|
||||
mode: {
|
||||
title: 'Mode',
|
||||
type: 'radio',
|
||||
options: [
|
||||
{
|
||||
name: 'Boxed',
|
||||
value: 'boxed',
|
||||
},
|
||||
{
|
||||
name: 'Full Width',
|
||||
value: 'fullwidth',
|
||||
},
|
||||
{
|
||||
name: 'Container',
|
||||
value: 'container',
|
||||
},
|
||||
],
|
||||
},
|
||||
containerWidth: {
|
||||
title: 'Container Width (px)',
|
||||
type: 'number',
|
||||
},
|
||||
navbar: {
|
||||
type: 'group',
|
||||
title: 'Navbar',
|
||||
children: {
|
||||
display: {
|
||||
title: 'Display',
|
||||
type: 'switch',
|
||||
},
|
||||
style: {
|
||||
title: 'Style',
|
||||
type: 'radio',
|
||||
options: [
|
||||
{
|
||||
name: 'Fixed',
|
||||
value: 'fixed',
|
||||
},
|
||||
{
|
||||
name: 'Static',
|
||||
value: 'static',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
toolbar: {
|
||||
type: 'group',
|
||||
title: 'Toolbar',
|
||||
children: {
|
||||
display: {
|
||||
title: 'Display',
|
||||
type: 'switch',
|
||||
},
|
||||
position: {
|
||||
title: 'Position',
|
||||
type: 'radio',
|
||||
options: [
|
||||
{
|
||||
name: 'Above',
|
||||
value: 'above',
|
||||
},
|
||||
{
|
||||
name: 'Below',
|
||||
value: 'below',
|
||||
},
|
||||
],
|
||||
},
|
||||
style: {
|
||||
title: 'Style',
|
||||
type: 'radio',
|
||||
options: [
|
||||
{
|
||||
name: 'Fixed',
|
||||
value: 'fixed',
|
||||
},
|
||||
{
|
||||
name: 'Static',
|
||||
value: 'static',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
footer: {
|
||||
type: 'group',
|
||||
title: 'Footer',
|
||||
children: {
|
||||
display: {
|
||||
title: 'Display',
|
||||
type: 'switch',
|
||||
},
|
||||
style: {
|
||||
title: 'Style',
|
||||
type: 'radio',
|
||||
options: [
|
||||
{
|
||||
name: 'Fixed',
|
||||
value: 'fixed',
|
||||
},
|
||||
{
|
||||
name: 'Static',
|
||||
value: 'static',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default config;
|
||||
@@ -1,28 +0,0 @@
|
||||
import AppBar from '@mui/material/AppBar';
|
||||
import { ThemeProvider } from '@mui/material/styles';
|
||||
import Toolbar from '@mui/material/Toolbar';
|
||||
import clsx from 'clsx';
|
||||
import { memo } from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { selectFooterTheme } from 'app/store/fuse/settingsSlice';
|
||||
|
||||
function FooterLayout3(props) {
|
||||
const footerTheme = useSelector(selectFooterTheme);
|
||||
|
||||
return (
|
||||
<ThemeProvider theme={footerTheme}>
|
||||
<AppBar
|
||||
id="fuse-footer"
|
||||
className={clsx('relative z-20 shadow-md', props.className)}
|
||||
color="default"
|
||||
style={{ backgroundColor: footerTheme.palette.background.paper }}
|
||||
>
|
||||
<Toolbar className="container min-h-48 md:min-h-64 px-8 sm:px-12 lg:px-20 py-0 flex items-center overflow-x-auto">
|
||||
Footer
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
export default memo(FooterLayout3);
|
||||
@@ -1,15 +0,0 @@
|
||||
import FuseSidePanel from '@fuse/core/FuseSidePanel';
|
||||
import { memo } from 'react';
|
||||
import NavigationShortcuts from '../../shared-components/NavigationShortcuts';
|
||||
|
||||
function LeftSideLayout3() {
|
||||
return (
|
||||
<>
|
||||
<FuseSidePanel>
|
||||
<NavigationShortcuts className="py-16 px-8" variant="vertical" />
|
||||
</FuseSidePanel>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default memo(LeftSideLayout3);
|
||||
@@ -1,24 +0,0 @@
|
||||
import FuseScrollbars from '@fuse/core/FuseScrollbars';
|
||||
import { styled } from '@mui/material/styles';
|
||||
import clsx from 'clsx';
|
||||
import { memo } from 'react';
|
||||
import Navigation from '../../shared-components/Navigation';
|
||||
|
||||
const Root = styled('div')(({ theme }) => ({
|
||||
backgroundColor: theme.palette.background.default,
|
||||
color: theme.palette.text.primary,
|
||||
}));
|
||||
|
||||
function NavbarLayout3(props) {
|
||||
return (
|
||||
<Root className={clsx('w-full h-64 min-h-64 max-h-64 shadow-md', props.className)}>
|
||||
<div className="flex flex-auto items-center w-full h-full container px-16 lg:px-24">
|
||||
<FuseScrollbars className="flex h-full items-center">
|
||||
<Navigation className="w-full" layout="horizontal" dense />
|
||||
</FuseScrollbars>
|
||||
</div>
|
||||
</Root>
|
||||
);
|
||||
}
|
||||
|
||||
export default memo(NavbarLayout3);
|
||||
@@ -1,63 +0,0 @@
|
||||
import FuseScrollbars from '@fuse/core/FuseScrollbars';
|
||||
import { styled } from '@mui/material/styles';
|
||||
import clsx from 'clsx';
|
||||
import { memo } from 'react';
|
||||
import Navigation from '../../shared-components/Navigation';
|
||||
import UserNavbarHeader from '../../shared-components/UserNavbarHeader';
|
||||
import NavbarToggleButton from '../../shared-components/NavbarToggleButton';
|
||||
import Logo from '../../shared-components/Logo';
|
||||
|
||||
const Root = styled('div')(({ theme }) => ({
|
||||
backgroundColor: theme.palette.background.default,
|
||||
color: theme.palette.text.primary,
|
||||
|
||||
'& ::-webkit-scrollbar-thumb': {
|
||||
boxShadow: `inset 0 0 0 20px ${
|
||||
theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.24)' : 'rgba(255, 255, 255, 0.24)'
|
||||
}`,
|
||||
},
|
||||
'& ::-webkit-scrollbar-thumb:active': {
|
||||
boxShadow: `inset 0 0 0 20px ${
|
||||
theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.37)' : 'rgba(255, 255, 255, 0.37)'
|
||||
}`,
|
||||
},
|
||||
}));
|
||||
|
||||
const StyledContent = styled(FuseScrollbars)(({ theme }) => ({
|
||||
overscrollBehavior: 'contain',
|
||||
overflowX: 'hidden',
|
||||
overflowY: 'auto',
|
||||
WebkitOverflowScrolling: 'touch',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundSize: '100% 40px, 100% 10px',
|
||||
backgroundAttachment: 'local, scroll',
|
||||
}));
|
||||
|
||||
function NavbarMobileLayout3(props) {
|
||||
return (
|
||||
<Root className={clsx('flex flex-col h-full overflow-hidden', props.className)}>
|
||||
<div className="flex flex-row items-center shrink-0 h-48 md:h-72 px-20">
|
||||
<div className="flex flex-1 mx-4">
|
||||
<Logo />
|
||||
</div>
|
||||
|
||||
<NavbarToggleButton className="w-40 h-40 p-0" />
|
||||
</div>
|
||||
|
||||
<StyledContent
|
||||
className="flex flex-1 flex-col min-h-0"
|
||||
option={{ suppressScrollX: true, wheelPropagation: false }}
|
||||
>
|
||||
<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(NavbarMobileLayout3);
|
||||
@@ -1,65 +0,0 @@
|
||||
import Hidden from '@mui/material/Hidden';
|
||||
import { styled, ThemeProvider } from '@mui/material/styles';
|
||||
import SwipeableDrawer from '@mui/material/SwipeableDrawer';
|
||||
import { navbarCloseMobile, selectFuseNavbar } from 'app/store/fuse/navbarSlice';
|
||||
import clsx from 'clsx';
|
||||
import { memo } from 'react';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { selectFuseCurrentLayoutConfig, selectNavbarTheme } from 'app/store/fuse/settingsSlice';
|
||||
import NavbarLayout3 from './NavbarLayout3';
|
||||
import NavbarMobileLayout3 from './NavbarMobileLayout3';
|
||||
import NavbarToggleFab from '../../shared-components/NavbarToggleFab';
|
||||
|
||||
const StyledSwipeableDrawer = styled(SwipeableDrawer)(({ theme }) => ({
|
||||
'& > .MuiDrawer-paper': {
|
||||
height: '100%',
|
||||
flexDirection: 'column',
|
||||
flex: '1 1 auto',
|
||||
width: 280,
|
||||
minWidth: 280,
|
||||
transition: theme.transitions.create(['width', 'min-width'], {
|
||||
easing: theme.transitions.easing.sharp,
|
||||
duration: theme.transitions.duration.shorter,
|
||||
}),
|
||||
},
|
||||
}));
|
||||
|
||||
function NavbarWrapperLayout3(props) {
|
||||
const dispatch = useDispatch();
|
||||
const config = useSelector(selectFuseCurrentLayoutConfig);
|
||||
const navbarTheme = useSelector(selectNavbarTheme);
|
||||
const navbar = useSelector(selectFuseNavbar);
|
||||
|
||||
return (
|
||||
<>
|
||||
<ThemeProvider theme={navbarTheme}>
|
||||
<Hidden lgDown>
|
||||
<NavbarLayout3 className={clsx(props.className)} />
|
||||
</Hidden>
|
||||
|
||||
<Hidden lgUp>
|
||||
<StyledSwipeableDrawer
|
||||
anchor="left"
|
||||
variant="temporary"
|
||||
open={navbar.mobileOpen}
|
||||
onClose={() => dispatch(navbarCloseMobile())}
|
||||
onOpen={() => {}}
|
||||
disableSwipeToOpen
|
||||
ModalProps={{
|
||||
keepMounted: true, // Better open performance on mobile.
|
||||
}}
|
||||
>
|
||||
<NavbarMobileLayout3 />
|
||||
</StyledSwipeableDrawer>
|
||||
</Hidden>
|
||||
</ThemeProvider>
|
||||
{config.navbar.display && !config.toolbar.display && (
|
||||
<Hidden lgUp>
|
||||
<NavbarToggleFab />
|
||||
</Hidden>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default memo(NavbarWrapperLayout3);
|
||||
@@ -1,15 +0,0 @@
|
||||
import { memo } from 'react';
|
||||
import NotificationPanel from '../../shared-components/notificationPanel/NotificationPanel';
|
||||
import QuickPanel from '../../shared-components/quickPanel/QuickPanel';
|
||||
|
||||
function RightSideLayout3() {
|
||||
return (
|
||||
<>
|
||||
<QuickPanel />
|
||||
|
||||
<NotificationPanel />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default memo(RightSideLayout3);
|
||||
@@ -1,78 +0,0 @@
|
||||
import { ThemeProvider } from '@mui/material/styles';
|
||||
import AppBar from '@mui/material/AppBar';
|
||||
import Hidden from '@mui/material/Hidden';
|
||||
import Toolbar from '@mui/material/Toolbar';
|
||||
import clsx from 'clsx';
|
||||
import { memo } from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { selectFuseCurrentLayoutConfig, selectToolbarTheme } from 'app/store/fuse/settingsSlice';
|
||||
import AdjustFontSize from '../../shared-components/AdjustFontSize';
|
||||
import FullScreenToggle from '../../shared-components/FullScreenToggle';
|
||||
import LanguageSwitcher from '../../shared-components/LanguageSwitcher';
|
||||
import NotificationPanelToggleButton from '../../shared-components/notificationPanel/NotificationPanelToggleButton';
|
||||
import NavigationSearch from '../../shared-components/NavigationSearch';
|
||||
import UserMenu from '../../shared-components/UserMenu';
|
||||
import QuickPanelToggleButton from '../../shared-components/quickPanel/QuickPanelToggleButton';
|
||||
import ChatPanelToggleButton from '../../shared-components/chatPanel/ChatPanelToggleButton';
|
||||
import Logo from '../../shared-components/Logo';
|
||||
import NavbarToggleButton from '../../shared-components/NavbarToggleButton';
|
||||
|
||||
function ToolbarLayout3(props) {
|
||||
const config = useSelector(selectFuseCurrentLayoutConfig);
|
||||
const toolbarTheme = useSelector(selectToolbarTheme);
|
||||
|
||||
return (
|
||||
<ThemeProvider theme={toolbarTheme}>
|
||||
<AppBar
|
||||
id="fuse-toolbar"
|
||||
className={clsx('flex relative z-20 shadow-md', props.className)}
|
||||
color="default"
|
||||
style={{ backgroundColor: toolbarTheme.palette.background.paper }}
|
||||
>
|
||||
<Toolbar className="container p-0 lg:px-24 min-h-48 md:min-h-64">
|
||||
{config.navbar.display && (
|
||||
<Hidden lgUp>
|
||||
<NavbarToggleButton className="w-40 h-40 p-0 mx-0 sm:mx-8" />
|
||||
</Hidden>
|
||||
)}
|
||||
|
||||
<Hidden lgDown>
|
||||
<div className={clsx('flex shrink-0 items-center')}>
|
||||
<Logo />
|
||||
</div>
|
||||
</Hidden>
|
||||
|
||||
<div className="flex flex-1">
|
||||
<Hidden smDown>
|
||||
<NavigationSearch className="mx-16 lg:mx-24" variant="basic" />
|
||||
</Hidden>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center px-8 md:px-0 h-full overflow-x-auto">
|
||||
<Hidden smUp>
|
||||
<NavigationSearch />
|
||||
</Hidden>
|
||||
|
||||
<Hidden lgUp>
|
||||
<ChatPanelToggleButton />
|
||||
</Hidden>
|
||||
|
||||
<LanguageSwitcher />
|
||||
|
||||
<AdjustFontSize />
|
||||
|
||||
<FullScreenToggle />
|
||||
|
||||
<QuickPanelToggleButton />
|
||||
|
||||
<NotificationPanelToggleButton />
|
||||
|
||||
<UserMenu />
|
||||
</div>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
export default memo(ToolbarLayout3);
|
||||
Reference in New Issue
Block a user