docs: remove useless locales, credits, serviceworker, layout2 and layout3 files
This commit is contained in:
16
CREDITS
16
CREDITS
@@ -1,16 +0,0 @@
|
|||||||
// -----------------------------------------------------------------------------------------------------
|
|
||||||
// @ Image/Vector/Icon Credits
|
|
||||||
// -----------------------------------------------------------------------------------------------------
|
|
||||||
Avatars - https://uifaces.co/
|
|
||||||
Flag icons - http://www.famfamfam.com/lab/icons/flags/
|
|
||||||
Frame vector created by Freepik - https://www.freepik.com/free-photos-vectors/frame
|
|
||||||
A Walk Amongst Friends - Photo by Kristin Ellis on Unsplash - https://unsplash.com/photos/CbZOGbazDWQ
|
|
||||||
Sunrise at Moraine Lake - Photo by Marlon Martinez on Unsplash - https://unsplash.com/photos/woNYcfrnp9M
|
|
||||||
Braies Lake - Photo by Luca Nicoletti on Unsplash - https://unsplash.com/photos/dH-L5zPcv3E
|
|
||||||
Lago di Sorapis - Photo by eberhard grossgasteiger on Unsplash - https://unsplash.com/photos/6uDg_zb20EM
|
|
||||||
Lago di Braies - Photo by Salmen Bejaoui on Unsplash - https://unsplash.com/photos/uXTozY3CcQg
|
|
||||||
Reaching - Photo by Justin Novello on Unsplash - https://unsplash.com/photos/Y14TNvIDllM
|
|
||||||
Yosemite - Photo by Tim Mossholder on Unsplash - https://unsplash.com/photos/ZCrtRSSUpGI
|
|
||||||
Never Stop Changing - Photo by John Westrock on Unsplash - https://unsplash.com/photos/_GY56uSG70U
|
|
||||||
Fall glow - Photo by Casey Horner on Unsplash - https://unsplash.com/photos/gz19zOdgN7w
|
|
||||||
First snow - Photo by eberhard grossgasteiger on Unsplash - https://unsplash.com/photos/LRrGf6dBjA4
|
|
||||||
@@ -1,6 +0,0 @@
|
|||||||
const locale = {
|
|
||||||
APPLICATIONS: 'تطبيقات',
|
|
||||||
EXAMPLE: 'مثال',
|
|
||||||
};
|
|
||||||
|
|
||||||
export default locale;
|
|
||||||
@@ -1,6 +0,0 @@
|
|||||||
const locale = {
|
|
||||||
APPLICATIONS: 'Programlar',
|
|
||||||
EXAMPLE: 'Örnek Sayfa',
|
|
||||||
};
|
|
||||||
|
|
||||||
export default locale;
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
const locale = {
|
|
||||||
TITLE: 'مثال على الصفحة',
|
|
||||||
};
|
|
||||||
|
|
||||||
export default locale;
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
const locale = {
|
|
||||||
TITLE: 'Örnek Sayfa',
|
|
||||||
};
|
|
||||||
|
|
||||||
export default locale;
|
|
||||||
@@ -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);
|
|
||||||
@@ -1,131 +0,0 @@
|
|||||||
// This optional code is used to register a service worker.
|
|
||||||
// register() is not called by default.
|
|
||||||
|
|
||||||
// This lets the app load faster on subsequent visits in production, and gives
|
|
||||||
// it offline capabilities. However, it also means that developers (and users)
|
|
||||||
// will only see deployed updates on subsequent visits to a page, after all the
|
|
||||||
// existing tabs open on the page have been closed, since previously cached
|
|
||||||
// resources are updated in the background.
|
|
||||||
|
|
||||||
// To learn more about the benefits of this model and instructions on how to
|
|
||||||
// opt-in, read https://bit.ly/CRA-PWA
|
|
||||||
|
|
||||||
const isLocalhost = Boolean(
|
|
||||||
window.location.hostname === 'localhost' ||
|
|
||||||
// [::1] is the IPv6 localhost address.
|
|
||||||
window.location.hostname === '[::1]' ||
|
|
||||||
// 127.0.0.1/8 is considered localhost for IPv4.
|
|
||||||
window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/)
|
|
||||||
);
|
|
||||||
|
|
||||||
export function register(config) {
|
|
||||||
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
|
|
||||||
// The URL constructor is available in all browsers that support SW.
|
|
||||||
const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
|
|
||||||
if (publicUrl.origin !== window.location.origin) {
|
|
||||||
// Our service worker won't work if PUBLIC_URL is on a different origin
|
|
||||||
// from what our page is served on. This might happen if a CDN is used to
|
|
||||||
// serve assets; see https://github.com/facebook/create-react-app/issues/2374
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
window.addEventListener('load', () => {
|
|
||||||
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
|
|
||||||
|
|
||||||
if (isLocalhost) {
|
|
||||||
// This is running on localhost. Let's check if a service worker still exists or not.
|
|
||||||
checkValidServiceWorker(swUrl, config);
|
|
||||||
|
|
||||||
// Add some additional logging to localhost, pointing developers to the
|
|
||||||
// service worker/PWA documentation.
|
|
||||||
navigator.serviceWorker.ready.then(() => {
|
|
||||||
console.log(
|
|
||||||
'This web app is being served cache-first by a service ' +
|
|
||||||
'worker. To learn more, visit https://bit.ly/CRA-PWA'
|
|
||||||
);
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
// Is not localhost. Just register service worker
|
|
||||||
registerValidSW(swUrl, config);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function registerValidSW(swUrl, config) {
|
|
||||||
navigator.serviceWorker
|
|
||||||
.register(swUrl)
|
|
||||||
.then((registration) => {
|
|
||||||
registration.onupdatefound = () => {
|
|
||||||
const installingWorker = registration.installing;
|
|
||||||
if (installingWorker == null) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
installingWorker.onstatechange = () => {
|
|
||||||
if (installingWorker.state === 'installed') {
|
|
||||||
if (navigator.serviceWorker.controller) {
|
|
||||||
// At this point, the updated precached content has been fetched,
|
|
||||||
// but the previous service worker will still serve the older
|
|
||||||
// content until all client tabs are closed.
|
|
||||||
console.log(
|
|
||||||
'New content is available and will be used when all ' +
|
|
||||||
'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
|
|
||||||
);
|
|
||||||
|
|
||||||
// Execute callback
|
|
||||||
if (config && config.onUpdate) {
|
|
||||||
config.onUpdate(registration);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// At this point, everything has been precached.
|
|
||||||
// It's the perfect time to display a
|
|
||||||
// "Content is cached for offline use." message.
|
|
||||||
console.log('Content is cached for offline use.');
|
|
||||||
|
|
||||||
// Execute callback
|
|
||||||
if (config && config.onSuccess) {
|
|
||||||
config.onSuccess(registration);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
};
|
|
||||||
})
|
|
||||||
.catch((error) => {
|
|
||||||
console.error('Error during service worker registration:', error);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function checkValidServiceWorker(swUrl, config) {
|
|
||||||
// Check if the service worker can be found. If it can't reload the page.
|
|
||||||
fetch(swUrl)
|
|
||||||
.then((response) => {
|
|
||||||
// Ensure service worker exists, and that we really are getting a JS file.
|
|
||||||
const contentType = response.headers.get('content-type');
|
|
||||||
if (
|
|
||||||
response.status === 404 ||
|
|
||||||
(contentType != null && contentType.indexOf('javascript') === -1)
|
|
||||||
) {
|
|
||||||
// No service worker found. Probably a different app. Reload the page.
|
|
||||||
navigator.serviceWorker.ready.then((registration) => {
|
|
||||||
registration.unregister().then(() => {
|
|
||||||
window.location.reload();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
// Service worker found. Proceed as normal.
|
|
||||||
registerValidSW(swUrl, config);
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
console.log('No internet connection found. App is running in offline mode.');
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function unregister() {
|
|
||||||
if ('serviceWorker' in navigator) {
|
|
||||||
navigator.serviceWorker.ready.then((registration) => {
|
|
||||||
registration.unregister();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user