Index: sources/client/src/components/Sidedrawer/index.js
===================================================================
--- sources/client/src/components/Sidedrawer/index.js	(revision bc20307a9fafa202ad52835e03582454a2a4242d)
+++ sources/client/src/components/Sidedrawer/index.js	(revision bc20307a9fafa202ad52835e03582454a2a4242d)
@@ -0,0 +1,265 @@
+import { useContext } from 'react';
+import { useHistory } from 'react-router';
+import {
+    DrawerContainer,
+    CloseIcon,
+    DividerUnderListItem,
+    DividerUnderList,
+    DashboardIcon,
+    SupervisorAccountIcon,
+    LogoutIcon,
+    UserIcon,
+    MapIcon,
+    CarIcon,
+    TimerIcon,
+    ProfileIcon,
+    LoginIcon,
+    RegistrationIcon,
+} from './styles';
+
+import SwipeableDrawer from '@mui/material/SwipeableDrawer';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import { IconButton } from '@mui/material';
+
+import onClickRouting from '../../utils/onClickRouting';
+import { roles } from '../../config/enums';
+import { UserContext } from '../../context/UserContext';
+import useLogoutUser from '../../hooks/useLogoutUser';
+
+const AdminAndEmployeeContent = ({ user, setIsOpen, history, logoutUser }) => {
+    return (
+        <>
+            <List>
+                <ListItem
+                    onClick={() => {
+                        setIsOpen(false);
+                        onClickRouting('/', history);
+                    }}
+                >
+                    <ListItemIcon>
+                        <DashboardIcon style={{ margin: 0 }} />
+                    </ListItemIcon>
+                    <ListItemText primary='Зони' />
+                </ListItem>
+                <DividerUnderListItem />
+                {user.role === roles.admin ? (
+                    <>
+                        <ListItem
+                            onClick={() => {
+                                setIsOpen(false);
+                                onClickRouting('/employees', history);
+                            }}
+                        >
+                            <ListItemIcon>
+                                <SupervisorAccountIcon style={{ margin: 0 }} />
+                            </ListItemIcon>
+                            <ListItemText primary='Вработени' />
+                        </ListItem>
+                        <DividerUnderListItem />
+                    </>
+                ) : null}
+            </List>
+            <List>
+                <DividerUnderList />
+                <ListItem>
+                    <ListItemIcon>
+                        <UserIcon style={{ margin: 0 }} />
+                    </ListItemIcon>
+                    <ListItemText
+                        primary={`${user.firstName} ${user.lastName}`}
+                    />
+                </ListItem>
+                <DividerUnderListItem />
+                <ListItem
+                    onClick={() => {
+                        setIsOpen(false);
+                        logoutUser();
+                    }}
+                >
+                    <ListItemIcon>
+                        <LogoutIcon style={{ margin: 0 }} />
+                    </ListItemIcon>
+                    <ListItemText primary='Одјави Се' id='err-color' />
+                </ListItem>
+            </List>
+        </>
+    );
+};
+
+const NotAuthContent = ({ setIsOpen, history }) => {
+    return (
+        <>
+            <List>
+                <ListItem
+                    onClick={() => {
+                        setIsOpen(false);
+                        onClickRouting('/', history);
+                    }}
+                >
+                    <ListItemIcon>
+                        <MapIcon style={{ margin: 0 }} />
+                    </ListItemIcon>
+                    <ListItemText primary='Мапа' />
+                </ListItem>
+                <DividerUnderListItem />
+            </List>
+            <List>
+                <DividerUnderList />
+                <ListItem
+                    onClick={() => {
+                        setIsOpen(false);
+                        onClickRouting('/login', history);
+                    }}
+                >
+                    <ListItemIcon>
+                        <LoginIcon style={{ margin: 0 }} />
+                    </ListItemIcon>
+                    <ListItemText primary='Најави Се' />
+                </ListItem>
+                <DividerUnderListItem />
+                <ListItem
+                    onClick={() => {
+                        setIsOpen(false);
+                        onClickRouting('/register', history);
+                    }}
+                >
+                    <ListItemIcon>
+                        <RegistrationIcon style={{ margin: 0 }} />
+                    </ListItemIcon>
+                    <ListItemText primary='Регистрирај Се' />
+                </ListItem>
+            </List>
+        </>
+    );
+};
+
+const UserAndGuestContent = ({ user, logoutUser, setIsOpen, history }) => {
+    const isGuest = user.role === roles.guest;
+    const mapUrl = isGuest ? '/' : '/maps';
+    return (
+        <>
+            <List>
+                {isGuest ? null : (
+                    <>
+                        <ListItem
+                            onClick={() => {
+                                setIsOpen(false);
+                                onClickRouting('/', history);
+                            }}
+                        >
+                            <ListItemIcon>
+                                <CarIcon style={{ margin: 0 }} />
+                            </ListItemIcon>
+                            <ListItemText primary='Почетна' />
+                        </ListItem>
+                        <DividerUnderListItem />
+                    </>
+                )}
+                <ListItem
+                    onClick={() => {
+                        setIsOpen(false);
+                        onClickRouting(mapUrl, history);
+                    }}
+                >
+                    <ListItemIcon>
+                        <MapIcon style={{ margin: 0 }} />
+                    </ListItemIcon>
+                    <ListItemText primary='Мапа' />
+                </ListItem>
+                <DividerUnderListItem />
+                <ListItem
+                    onClick={() => {
+                        setIsOpen(false);
+                        onClickRouting('/session', history);
+                    }}
+                >
+                    <ListItemIcon>
+                        <TimerIcon style={{ margin: 0 }} />
+                    </ListItemIcon>
+                    <ListItemText primary='Сесија' />
+                </ListItem>
+                <DividerUnderListItem />
+            </List>
+            <List>
+                <DividerUnderList />
+                <ListItem
+                    onClick={() => {
+                        if (isGuest) return;
+                        setIsOpen(false);
+                        onClickRouting('/my-profile', history);
+                    }}
+                >
+                    <ListItemIcon>
+                        <UserIcon style={{ margin: 0 }} />
+                    </ListItemIcon>
+                    <ListItemText
+                        primary={
+                            isGuest
+                                ? 'Гостин'
+                                : `${user.firstName} ${user.lastName}`
+                        }
+                    />
+                </ListItem>
+                <DividerUnderListItem />
+                <ListItem
+                    onClick={() => {
+                        setIsOpen(false);
+                        logoutUser();
+                    }}
+                >
+                    <ListItemIcon>
+                        <LogoutIcon style={{ margin: 0 }} />
+                    </ListItemIcon>
+                    <ListItemText primary='Одјави Се' id='err-color' />
+                </ListItem>
+            </List>
+        </>
+    );
+};
+
+const Sidedrawer = ({ isOpen, setIsOpen, isMobile }) => {
+    const { user } = useContext(UserContext);
+    const { logoutUser } = useLogoutUser();
+    const history = useHistory();
+
+    let content;
+
+    if (user) {
+        const props = {
+            user,
+            logoutUser,
+            setIsOpen,
+            history,
+        };
+        if (user.role === roles.admin || user.role === roles.employee) {
+            content = <AdminAndEmployeeContent {...props} />;
+        } else {
+            content = <UserAndGuestContent {...props} />;
+        }
+    } else {
+        content = <NotAuthContent setIsOpen={setIsOpen} history={history} />;
+    }
+
+    return !isMobile ? null : (
+        <SwipeableDrawer
+            open={isOpen}
+            onClose={() => setIsOpen(false)}
+            onOpen={() => setIsOpen(true)}
+        >
+            <DrawerContainer>
+                <IconButton
+                    onClick={() => setIsOpen(false)}
+                    style={{ marginLeft: '190px' }}
+                >
+                    <CloseIcon />
+                </IconButton>
+                {content}
+            </DrawerContainer>
+        </SwipeableDrawer>
+    );
+};
+
+export default Sidedrawer;
Index: sources/client/src/components/Sidedrawer/styles.js
===================================================================
--- sources/client/src/components/Sidedrawer/styles.js	(revision bc20307a9fafa202ad52835e03582454a2a4242d)
+++ sources/client/src/components/Sidedrawer/styles.js	(revision bc20307a9fafa202ad52835e03582454a2a4242d)
@@ -0,0 +1,154 @@
+import styled from 'styled-components';
+import { Divider } from '@mui/material';
+import CloseI from '@mui/icons-material/Close';
+import backgroundImage from '../../resources/login_background.jpg';
+import Box from '@mui/material/Box';
+import AccountCircleIcon from '@mui/icons-material/AccountCircle';
+import Dashboard from '@mui/icons-material/Dashboard';
+import Logout from '@mui/icons-material/Logout';
+import SupervisorAccount from '@mui/icons-material/SupervisorAccount';
+import MapOutlinedIcon from '@mui/icons-material/MapOutlined';
+import DirectionsCarIcon from '@mui/icons-material/DirectionsCarFilledOutlined';
+import TimerOutlinedIcon from '@mui/icons-material/TimerOutlined';
+import PersonOutlinedIcon from '@mui/icons-material/PersonOutlineOutlined';
+import LoginOutlinedIcon from '@mui/icons-material/LoginOutlined';
+import AppRegistrationIcon from '@mui/icons-material/AppRegistration';
+
+export const DrawerContainer = styled(Box).attrs((props) => ({
+  sx: {
+    width: '250px',
+    height: '100%',
+    backgroundImage: `url(${backgroundImage})`,
+  },
+}))`
+  ul:first-of-type {
+    padding-top: 35px;
+    span {
+      font-size: 1.5rem;
+      color: whiteSmoke;
+      font-weight: 600;
+      margin-left: 10px;
+    }
+
+    svg {
+      margin: 0;
+      color: whiteSmoke;
+      width: 40px;
+      height: 40px;
+    }
+  }
+
+  ul:last-of-type {
+    position: absolute;
+    bottom: 15px;
+    width: 100%;
+
+    span {
+      font-size: 1rem;
+      color: whiteSmoke;
+      font-weight: 600;
+    }
+    li:first-of-type svg {
+      color: whiteSmoke;
+    }
+  }
+  #err-color {
+    span {
+      color: ${(props) => props.theme.palette.error.main};
+    }
+  }
+`;
+
+export const DividerUnderListItem = styled(Divider).attrs({
+  variant: 'middle',
+  sx: {
+    margin: '5px 5%',
+    borderWidth: '2px',
+    borderBottomWidth: 'thin',
+    borderColor: 'whiteSmoke',
+  },
+})``;
+
+export const DividerUnderList = styled(Divider).attrs({
+  variant: 'fullWidth',
+  sx: {
+    marginTop: '15px',
+    marginBottom: '25px',
+    borderWidth: '2px',
+    borderBottomWidth: 'thin',
+    borderColor: 'whiteSmoke',
+  },
+})``;
+
+export const CloseIcon = styled(CloseI).attrs((props) => ({
+  sx: {
+    fontSize: 50,
+    color: `${props.theme.palette.error.main}`,
+  },
+}))``;
+
+export const DashboardIcon = styled(Dashboard).attrs((props) => ({
+  sx: {
+    fontSize: 35,
+  },
+}))`
+  margin-bottom: 15px;
+`;
+
+export const CarIcon = styled(DirectionsCarIcon).attrs((props) => ({
+  sx: {
+    fontSize: 35,
+  },
+}))``;
+
+export const ProfileIcon = styled(PersonOutlinedIcon).attrs((props) => ({
+  sx: {
+    fontSize: 35,
+  },
+}))``;
+
+export const TimerIcon = styled(TimerOutlinedIcon).attrs((props) => ({
+  sx: {
+    fontSize: 35,
+  },
+}))``;
+
+export const MapIcon = styled(MapOutlinedIcon).attrs((props) => ({
+  sx: {
+    fontSize: 35,
+  },
+}))``;
+
+export const SupervisorAccountIcon = styled(SupervisorAccount).attrs(
+  (props) => ({
+    sx: {
+      fontSize: 35,
+    },
+  })
+)``;
+
+export const UserIcon = styled(AccountCircleIcon).attrs((props) => ({
+  sx: {
+    fontSize: 30,
+  },
+}))``;
+
+export const LoginIcon = styled(LoginOutlinedIcon).attrs((props) => ({
+  sx: {
+    fontSize: 30,
+  },
+}))``;
+
+export const RegistrationIcon = styled(AppRegistrationIcon).attrs((props) => ({
+  sx: {
+    fontSize: 30,
+    color: props.theme.palette.background.whiteSmoke,
+  },
+}))``;
+
+export const LogoutIcon = styled(Logout).attrs((props) => ({
+  sx: {
+    fontSize: 30,
+    color: `${props.theme.palette.error.main}`,
+  },
+}))``;
