Add navigation bar and logout

src/app/src/App.js

@@ -1,5 +1,11 @@
 import { Box, Flex } from '@chakra-ui/react';
-import { BrowserRouter, Navigate, Routes, Route } from 'react-router-dom';
+import {
+    BrowserRouter,
+    Outlet,
+    Navigate,
+    Routes,
+    Route,
+} from 'react-router-dom';
 
 import './App.css';
 import Login from './pages/Login';
@@ -9,11 +15,16 @@ import Welcome from './pages/Welcome';
 import Draw from './pages/Draw';
 import Submissions from './pages/Submissions';
 import Sidebar from './components/Sidebar';
+import NavBar from './components/NavBar';
 
 import PrivateRoute from './components/PrivateRoute';
 
 const privateRoutes = (
     <PrivateRoute>
+        <Routes>
+            <Route path='/welcome' element={<Outlet />} />
+            <Route path='*' element={<NavBar />} />
+        </Routes>
         <Flex>
             <Routes>
                 <Route path='/draw' element={<Sidebar />} />

src/app/src/components/Map.js

@@ -1,15 +1,23 @@
 import { MapContainer } from 'react-leaflet';
+import { useLocation } from 'react-router-dom';
 
-import { MAP_CENTER, MAP_INITIAL_ZOOM } from '../constants';
+import { MAP_CENTER, MAP_INITIAL_ZOOM, NAVBAR_HEIGHT } from '../constants';
 import MapPanes from './MapPanes';
 
 export default function Map({ children }) {
+    const location = useLocation();
+
+    // Anywhere but welcome activity, deduct height of nav bar
+    const heightExpression = location.pathname.startsWith('/welcome')
+        ? '100vh'
+        : `calc(100vh - ${NAVBAR_HEIGHT}px)`;
+
     return (
         <MapContainer
             center={MAP_CENTER}
             zoom={MAP_INITIAL_ZOOM}
             zoomControl={false}
-            style={{ height: '100vh' }}
+            style={{ height: heightExpression }}
         >
             <MapPanes>{children}</MapPanes>
         </MapContainer>

src/app/src/components/NavBar.js

@@ -0,0 +1,132 @@
+import {
+    Button,
+    Flex,
+    SimpleGrid,
+    Heading,
+    Icon,
+    IconButton,
+    Select,
+    Spacer,
+    Text,
+} from '@chakra-ui/react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { ArrowLeftIcon, CogIcon, LogoutIcon } from '@heroicons/react/outline';
+import apiClient from '../api/client';
+import { API_URLS, NAVBAR_HEIGHT } from '../constants';
+import { logout, setSelectedUtility } from '../store/authSlice';
+
+const NAVBAR_VARIANTS = {
+    DRAW: 'draw',
+    SUBMISSION: 'submission',
+};
+
+export default function NavBar() {
+    const location = useLocation();
+
+    let variant = NAVBAR_VARIANTS.SUBMISSION;
+    if (location.pathname.startsWith('/draw')) {
+        variant = NAVBAR_VARIANTS.DRAW;
+    }
+
+    return (
+        <SimpleGrid
+            columns={3}
+            paddingLeft={10}
+            paddingRight={10}
+            w='100%'
+            h={NAVBAR_HEIGHT}
+            bg='gray.700'
+        >
+            <Flex align='center'>
+                <UtilityControl variant={variant} />
+            </Flex>
+
+            <Flex align='center' justify='center'>
+                <Heading size='md' color='white' ml={6}>
+                    Boundary Sync
+                </Heading>
+            </Flex>
+
+            <Flex align='center' gap={4}>
+                <Spacer />
+                <SettingsButton variant={variant} />
+                <ExitButton variant={variant} />
+            </Flex>
+        </SimpleGrid>
+    );
+}
+
+function SettingsButton({ variant }) {
+    const navigate = useNavigate();
+
+    return variant === NAVBAR_VARIANTS.SUBMISSION ? (
+        <IconButton
+            icon={<Icon as={CogIcon} />}
+            aria-label='Settings'
+            onClick={() => {
+                navigate('/settings');
+            }}
+        />
+    ) : null;
+}
+
+function ExitButton({ variant }) {
+    const navigate = useNavigate();
+    const dispatch = useDispatch();
+
+    return variant === NAVBAR_VARIANTS.SUBMISSION ? (
+        <Button
+            onClick={() => {
+                apiClient.post(API_URLS.LOGOUT, {}).then(() => {
+                    dispatch(logout());
+                    navigate('/login');
+                });
+            }}
+            rightIcon={<Icon as={LogoutIcon} />}
+        >
+            Log out
+        </Button>
+    ) : (
+        <Button
+            onClick={() => {
+                navigate('/submissions');
+            }}
+            rightIcon={<Icon as={ArrowLeftIcon} />}
+        >
+            Save and back
+        </Button>
+    );
+}
+
+function UtilityControl({ variant }) {
+    const dispatch = useDispatch();
+
+    // placeholders
+    const utilities = ['Raleigh City of', 'Azavea Test Utility'];
+    const selectedUtility =
+        useSelector(state => state.auth.selectedUtility) || utilities[0];
+
+    return variant === NAVBAR_VARIANTS.SUBMISSION && utilities.length > 1 ? (
+        <Select
+            variant='filled'
+            h='40px'
+            w='250px'
+            value={selectedUtility}
+            onChange={e => {
+                dispatch(setSelectedUtility(e.target.value));
+            }}
+            _focus={{ background: 'white' }}
+        >
+            {utilities.map(u => {
+                return (
+                    <option key={u} value={u}>
+                        {u}
+                    </option>
+                );
+            })}
+        </Select>
+    ) : (
+        <Text textStyle='selectedUtility'>{selectedUtility}</Text>
+    );
+}

src/app/src/components/Sidebar.js

@@ -12,7 +12,6 @@ import {
     Tooltip,
 } from '@chakra-ui/react';
 import {
-    MenuIcon,
     QuestionMarkCircleIcon as HelpIcon,
     PlusIcon,
     EyeIcon,
@@ -37,7 +36,6 @@ export default function Sidebar() {
     return (
         <Container pl={paddingLeft} maxW='xs' bg='gray.700' p={0}>
             <Flex direction='column'>
-                <TitleBar />
                 <Divider />
                 <ReferenceLayers />
                 <Divider />
@@ -47,17 +45,6 @@ export default function Sidebar() {
     );
 }
 
-function TitleBar() {
-    return (
-        <Flex align='center' p={4} mb={2}>
-            <Icon color='white' fontSize='2xl' strokeWidth={1} as={MenuIcon} />
-            <Heading size='md' color='white' ml={6}>
-                Boundary Sync
-            </Heading>
-        </Flex>
-    );
-}
-
 function ReferenceLayers() {
     const dispatch = useDispatch();
     const addReferenceImage = useAddReferenceImage();

src/app/src/constants.js

@@ -30,6 +30,8 @@ export const SIDEBAR_TEXT_TOOLTIP_THRESHOLD = 30;
 
 export const MUNICIPAL_BOUNDARY_LABELS_MIN_ZOOM_LEVEL = 9;
 
+export const NAVBAR_HEIGHT = 68;
+
 // https://leafletjs.com/reference.html#map-mappane
 export const PANES = {
     BASEMAP: { label: 'basemap', zIndex: 200 },

src/app/src/store/authSlice.js

@@ -3,6 +3,8 @@ import { createSlice } from '@reduxjs/toolkit';
 const initialState = {
     signedIn: false,
     locationBeforeAuth: '/welcome',
+    utilities: [],
+    selectedUtility: null,
 };
 
 export const authSlice = createSlice({
@@ -20,9 +22,21 @@ export const authSlice = createSlice({
                 state.locationBeforeAuth = location;
             }
         },
+        setUtilities: (state, { payload: utilities }) => {
+            state.utilities = utilities;
+        },
+        setSelectedUtility: (state, { payload: selectedUtility }) => {
+            state.selectedUtility = selectedUtility;
+        },
     },
 });
 
-export const { login, logout, setLocationBeforeAuth } = authSlice.actions;
+export const {
+    login,
+    logout,
+    setLocationBeforeAuth,
+    setUtilities,
+    setSelectedUtility,
+} = authSlice.actions;
 
 export default authSlice.reducer;

src/app/src/theme.js

@@ -209,6 +209,12 @@ const theme = extendTheme({
             fontSize: '16px',
             color: 'gray.700',
         },
+        selectedUtility: {
+            fontFamily: `'Inter', sans-serif`,
+            fontWeight: 400,
+            fontSize: '20px',
+            color: 'white',
+        },
     },
     styles: {
         global: {