35 lines
1.0 KiB
JavaScript
35 lines
1.0 KiB
JavaScript
import React, {useState } from 'react';
|
|
import { Navbar, Text, Group, ThemeIcon, Button } from '@mantine/core';
|
|
import { BsMap } from 'react-icons/bs'
|
|
import {BrowserRouter as Router, Routes, Route, Link} from 'react-router-dom'
|
|
|
|
|
|
|
|
function SideBar(props) {
|
|
|
|
|
|
return (
|
|
<Navbar
|
|
padding="md"
|
|
// Breakpoint at which navbar will be hidden if hidden prop is true
|
|
hiddenBreakpoint="sm"
|
|
// Hides navbar when viewport size is less than value specified in hiddenBreakpoint
|
|
hidden={!props.opened}
|
|
width={{ base: 200, breakpoints: { sm: '100%', lg: 300 } }}
|
|
>
|
|
<Router>
|
|
<Routes>
|
|
<Route path="/" element={<Home />} />
|
|
</Routes>
|
|
<Button component={Link} to="/locations" leftIcon={<ThemeIcon><BsMap /></ThemeIcon>}>
|
|
<Text>Locations</Text>
|
|
</Button>
|
|
</Router>
|
|
|
|
</Navbar>
|
|
)
|
|
}
|
|
|
|
|
|
|
|
export default SideBar |