diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 71e322a..81e58fe 100755 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,23 +1,25 @@ import { ThemeProvider } from '@emotion/react' -import { - ChevronLeft, - Dashboard, - FormatListBulleted, - Menu, - SettingsEthernet, - Settings as SettingsIcon, - Storage -} from '@mui/icons-material' -import { - Box, - CircularProgress, - CssBaseline, - Divider, - IconButton, List, - ListItemIcon, ListItemText, Toolbar, - Typography, - createTheme -} from '@mui/material' + +import ChevronLeft from '@mui/icons-material/ChevronLeft' +import Dashboard from '@mui/icons-material/Dashboard' +import FormatListBulleted from '@mui/icons-material/FormatListBulleted' +import Menu from '@mui/icons-material/Menu' +import SettingsIcon from '@mui/icons-material/Settings' +import SettingsEthernet from '@mui/icons-material/SettingsEthernet' +import Storage from '@mui/icons-material/Storage' + +import { Box, createTheme } from '@mui/material' + +import CircularProgress from '@mui/material/CircularProgress' +import CssBaseline from '@mui/material/CssBaseline' +import Divider from '@mui/material/Divider' +import IconButton from '@mui/material/IconButton' +import List from '@mui/material/List' +import ListItemIcon from '@mui/material/ListItemIcon' +import ListItemText from '@mui/material/ListItemText' +import Toolbar from '@mui/material/Toolbar' +import Typography from '@mui/material/Typography' + import ListItemButton from '@mui/material/ListItemButton' import { grey } from '@mui/material/colors' import { Suspense, lazy, useMemo, useState } from 'react' @@ -27,9 +29,8 @@ import { BrowserRouter as Router, Routes } from 'react-router-dom' -import Home from './Home' -import { AppBar } from './components/AppBar' -import { Drawer } from './components/Drawer' +import AppBar from './components/AppBar' +import Drawer from './components/Drawer' import { toggleListView } from './features/settings/settingsSlice' import { RootState, store } from './stores/store' import { formatGiB } from './utils' @@ -57,6 +58,7 @@ function AppContent() { setOpen(!open) } + const Home = lazy(() => import('./Home')) const Settings = lazy(() => import('./Settings')) return ( @@ -168,7 +170,11 @@ function AppContent() { > - } /> + }> + + + } /> }> diff --git a/frontend/src/components/AppBar.tsx b/frontend/src/components/AppBar.tsx index 7510de3..eea617d 100644 --- a/frontend/src/components/AppBar.tsx +++ b/frontend/src/components/AppBar.tsx @@ -7,7 +7,7 @@ interface AppBarProps extends MuiAppBarProps { const drawerWidth = 240; -export const AppBar = styled(MuiAppBar, { +const AppBar = styled(MuiAppBar, { shouldForwardProp: (prop) => prop !== 'open', })(({ theme, open }) => ({ zIndex: theme.zIndex.drawer + 1, @@ -23,4 +23,6 @@ export const AppBar = styled(MuiAppBar, { duration: theme.transitions.duration.enteringScreen, }), }), -})); \ No newline at end of file +})); + +export default AppBar \ No newline at end of file diff --git a/frontend/src/components/Drawer.tsx b/frontend/src/components/Drawer.tsx index 32bfa8a..b571483 100644 --- a/frontend/src/components/Drawer.tsx +++ b/frontend/src/components/Drawer.tsx @@ -1,9 +1,9 @@ -import { styled } from '@mui/material'; -import MuiDrawer from '@mui/material/Drawer'; +import { styled } from '@mui/material' +import MuiDrawer from '@mui/material/Drawer' -const drawerWidth = 240; +const drawerWidth = 240 -export const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open' })( +const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open' })( ({ theme, open }) => ({ '& .MuiDrawer-paper': { position: 'relative', @@ -27,4 +27,6 @@ export const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== }), }, }), -); +) + +export default Drawer \ No newline at end of file