commit e9103a47eda79a3ec004d847dc4704b3a71a0388
Author: Vaclav Honzik <vaclavhonzik98@gmail.com>
Date:   Sat May 7 16:17:49 2022 +0200

    Persist navigation state
    
    re #9630

diff --git a/frontend/src/features/Catalog/AddNewLocationDialog.tsx b/frontend/src/features/Catalog/AddNewLocationDialog.tsx
new file mode 100644
index 0000000..8377160
--- /dev/null
+++ b/frontend/src/features/Catalog/AddNewLocationDialog.tsx
@@ -0,0 +1,14 @@
+import { Button } from "@mui/material"
+import { Fragment } from "react"
+import AddIcon from '@mui/icons-material/Add'
+
+const AddNewLocationDialog = () => {
+
+    return (
+        <Fragment>
+            <Button startIcon={<AddIcon />} variant="outlined">Add Location</Button>
+        </Fragment>
+    )
+}
+
+export default AddNewLocationDialog
\ No newline at end of file
diff --git a/frontend/src/features/Catalog/Catalog.tsx b/frontend/src/features/Catalog/Catalog.tsx
index 2de5a9d..b01f2b9 100644
--- a/frontend/src/features/Catalog/Catalog.tsx
+++ b/frontend/src/features/Catalog/Catalog.tsx
@@ -1,4 +1,4 @@
-import { Container, Paper, Typography } from '@mui/material'
+import { Container, Paper, Stack, Typography } from '@mui/material'
 import CatalogTable from './CatalogTable'
 import { Fragment } from 'react'
 import CatalogFilter from './CatalogFilter'
@@ -15,10 +15,12 @@ const Catalog = () => (
             // variant="outlined"
             style={{ minHeight: '50vh' }}
         >
-            <Container sx={{ mt: 4 }}>
-                <CatalogFilter />
+            <Stack sx={{ mx: 12, my: 2 }}>
+                <Stack alignItems="start">
+                    <CatalogFilter />
+                </Stack>
                 <CatalogTable />
-            </Container>
+            </Stack>
         </Paper>
     </Fragment>
 )
diff --git a/frontend/src/features/Catalog/CatalogFilter.tsx b/frontend/src/features/Catalog/CatalogFilter.tsx
index 60b8516..e8d386a 100644
--- a/frontend/src/features/Catalog/CatalogFilter.tsx
+++ b/frontend/src/features/Catalog/CatalogFilter.tsx
@@ -14,6 +14,7 @@ import FilterListIcon from '@mui/icons-material/FilterList'
 import FilterListOffIcon from '@mui/icons-material/FilterListOff'
 import ManageSearchIcon from '@mui/icons-material/ManageSearch'
 import { RootState } from '../redux/store'
+import AddNewLocationDialog from './AddNewLocationDialog'
 
 const CatalogFilter = () => {
     const dispatch = useDispatch()
@@ -33,17 +34,19 @@ const CatalogFilter = () => {
 
     return (
         <Fragment>
-            <Button
-                startIcon={
-                    filterOpen ? <FilterListOffIcon /> : <FilterListIcon />
-                }
-                variant="outlined"
-                color="primary"
-                onClick={toggleFilter}
-                sx={{ mb: 2 }}
-            >
-                Filter
-            </Button>
+            <Stack direction="row" spacing={2} sx={{ mb: 2 }}>
+                <Button
+                    startIcon={
+                        filterOpen ? <FilterListOffIcon /> : <FilterListIcon />
+                    }
+                    variant="outlined"
+                    color="primary"
+                    onClick={toggleFilter}
+                >
+                    Filter
+                </Button>
+                <AddNewLocationDialog />
+            </Stack>
             <Collapse in={filterOpen} timeout="auto" unmountOnExit>
                 <Stack direction="row" spacing={2} sx={{ mt: 2 }}>
                     <TextField
diff --git a/frontend/src/features/Navigation/Navigation.tsx b/frontend/src/features/Navigation/Navigation.tsx
index 438447b..f0226e9 100644
--- a/frontend/src/features/Navigation/Navigation.tsx
+++ b/frontend/src/features/Navigation/Navigation.tsx
@@ -17,6 +17,7 @@ import { RootState } from '../redux/store'
 
 import DarkModeIcon from '@mui/icons-material/DarkMode'
 import LightModeIcon from '@mui/icons-material/LightMode'
+import { setOpen } from './navigationSlice'
 
 const drawerWidth = 240
 
@@ -74,10 +75,10 @@ export interface DrawerProps {
 }
 
 const PersistentDrawerLeft: FunctionComponent<DrawerProps> = ({ children }) => {
-    const [open, setOpen] = React.useState(false)
+    const open = useSelector((state: RootState) => state.navigation.open)
 
     const onOpenDrawer = () => {
-        setOpen(true)
+        dispatch(setOpen(true))
     }
 
     const colorThemeMode = useSelector(
@@ -92,7 +93,7 @@ const PersistentDrawerLeft: FunctionComponent<DrawerProps> = ({ children }) => {
 
     return (
         <Fragment>
-            <Paper style={{ minHeight: '100vh', borderRadius: 0 }}>
+            <Paper style={{ minHeight: '100vh', borderRadius: 0}}>
                 <Box sx={{ display: 'flex' }}>
                     {/* <CssBaseline /> */}
                     <AppBar position="fixed" open={open}>
@@ -125,7 +126,7 @@ const PersistentDrawerLeft: FunctionComponent<DrawerProps> = ({ children }) => {
                     <NavigationMenu
                         open={open}
                         drawerWidth={drawerWidth}
-                        setOpen={setOpen}
+                        setOpen={(open: boolean) => dispatch(setOpen(open))}
                     />
                     <Main open={open} sx={{ mt: 2 }}>
                         <DrawerHeader />
diff --git a/frontend/src/features/Navigation/navigationSlice.tsx b/frontend/src/features/Navigation/navigationSlice.tsx
new file mode 100644
index 0000000..33a46b0
--- /dev/null
+++ b/frontend/src/features/Navigation/navigationSlice.tsx
@@ -0,0 +1,33 @@
+import { createSlice } from '@reduxjs/toolkit'
+import persistReducer from 'redux-persist/es/persistReducer'
+import storage from 'redux-persist/lib/storage'
+
+export interface NavigationState {
+    selectedMenuItem?: string,
+    open: boolean,
+}
+
+const persistConfig = {
+    key: 'navigation',
+    storage
+}
+
+const initialState = {
+    selectedMenuItem: '',
+    open: false
+}
+
+export const navigationSlice = createSlice({
+    name: 'navigation',
+    initialState,
+    reducers: {
+        setSelectedMenuItem: (state, action) => ({...state, selectedMenuItem: action.payload}),
+        setOpen: (state, action) => ({...state, open: action.payload}),
+    }
+})
+
+const navigationReducer = persistReducer(persistConfig, navigationSlice.reducer)
+
+export const { setSelectedMenuItem, setOpen } = navigationSlice.actions
+
+export default navigationReducer
diff --git a/frontend/src/features/Reusables/ButtonOpenableDialog.tsx b/frontend/src/features/Reusables/ButtonOpenableDialog.tsx
index 366d10c..010c58a 100644
--- a/frontend/src/features/Reusables/ButtonOpenableDialog.tsx
+++ b/frontend/src/features/Reusables/ButtonOpenableDialog.tsx
@@ -12,6 +12,7 @@ export interface ButtonOpenableDialogProps {
     maxWidth?: 'xs' | 'sm' | 'md' | 'lg' // the max width of the dialog
 }
 
+
 // Generic dialog that can be opened by a button and closed by clicking on the backdrop.
 const ButtonOpenableDialog: FunctionComponent<ButtonOpenableDialogProps> = ({
     onOpenCallback,
@@ -52,7 +53,7 @@ const ButtonOpenableDialog: FunctionComponent<ButtonOpenableDialogProps> = ({
                 {buttonText}
             </Button>
             <Dialog
-                fullWidth={true}
+                fullWidth
                 open={open}
                 onClose={onClose}
                 maxWidth={maxWidth}
diff --git a/frontend/src/features/redux/store.ts b/frontend/src/features/redux/store.ts
index ea11fb7..e9f1be1 100644
--- a/frontend/src/features/redux/store.ts
+++ b/frontend/src/features/redux/store.ts
@@ -8,6 +8,7 @@ import { composeWithDevTools } from 'redux-devtools-extension'
 import notificationReducer from '../Notification/notificationSlice'
 import trackingToolReducer from '../TrackingTool/trackingToolSlice'
 import { enableMapSet } from 'immer'
+import navigationReducer from '../Navigation/navigationSlice'
 
 enableMapSet()
 
@@ -20,10 +21,12 @@ const store = createStore(
         theme: themeReducer,
         catalog: catalogReducer,
         notification: notificationReducer,
-        trackingTool: trackingToolReducer
+        trackingTool: trackingToolReducer,
+        navigation: navigationReducer,
     }),
     process.env.REACT_APP_DEV_ENV === 'true'
-        ? composeEnhancers( // ComposeEnhancers will inject redux-devtools-extension
+        ? composeEnhancers(
+              // ComposeEnhancers will inject redux-devtools-extension
               applyMiddleware(thunk) // Thunk middleware so we can async fetch data from the api
           )
         : applyMiddleware(thunk)
