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