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