Implement responsivness

src/App.css

+@media only screen and (min-width: 1921px) {
+    html {
+        font-size: 24px;
+    }
+}
+
+@media only screen and (max-width: 1920px) {
+    html {
+        font-size: 16px;
+    }
+}
+
+@media only screen and (max-width: 1370px) {
+    html {
+        font-size: 14px;
+    }
+}
+
+@media only screen and (max-width: 1200px) {
+    html {
+        font-size: 12px;
+    }
+}
+
+@media only screen and (max-width: 1020px) {
+    html {
+        font-size: 10px;
+    }
+}
+
+@media only screen and (max-width: 800px) {
+    html {
+        font-size: 14px;
+    }
+}
\ No newline at end of file

src/App.tsx

@@ -5,18 +5,30 @@ import { EntryPage } from './components/entry-page/EntryPage';
 import { RegisterForm } from './components/register/RegisterForm';
 import { LoginForm } from './components/LoginForm';
 import { Application } from './components/Application';
+import { createTheme, ThemeProvider } from '@mui/material';
+
+const theme = createTheme({
+	typography: {
+		body1: {
+			fontSize: '1em',
+		}
+	},
+});
+
 
 function App() {
 	return (
-		<Router>
-			<Routes>
-				<Route path='register/:buildingId' element={<EntryPage children={<RegisterForm />} />} />
-				<Route path='register/error' element={<EntryPage children={<div>Invalid invitational link - screen to be implemented</div>} />} />
-				<Route path='login' element={<EntryPage children={<LoginForm />} />} />
-				<Route path='tenant' element={<Application />} />
-				<Route path='*' element={<Navigate replace to="login" />} />
-			</Routes>
-		</Router>
+		<ThemeProvider theme={theme}>
+			<Router>
+				<Routes>
+					<Route path='register/:buildingId' element={<EntryPage children={<RegisterForm />} />} />
+					<Route path='register/error' element={<EntryPage children={<div>Invalid invitational link - screen to be implemented</div>} />} />
+					<Route path='login' element={<EntryPage children={<LoginForm />} />} />
+					<Route path='tenant' element={<Application />} />
+					<Route path='*' element={<Navigate replace to="login" />} />
+				</Routes>
+			</Router>
+		</ThemeProvider>
 	);
 }
 

src/components/Application.tsx

@@ -3,18 +3,18 @@ import { useEffect, useState } from "react"
 import { useNavigate } from "react-router-dom"
 import { JWT_TENANT } from "../actions/network-manager"
 import { ApplicationTab } from "./ApplicationTab";
-import { NavBar } from "./NavBar";
-import { SideMenu } from "./SideMenu";
+import { NavBar } from "./NavBar/NavBar";
+import { SideMenu } from "./SideMenu/SideMenu";
 
 const classes = {
     mainWrapper: {
         display: 'flex',
-        flexDirection: 'row'
+        flexDirection: 'row',
     },
     rightSideWrapper: {
         display: 'flex',
         flexDirection: 'column',
-        width: '85%'
+        flex: 1
     }
 } as const;
 
@@ -22,6 +22,11 @@ export const Application = () => {
 
     const navigate = useNavigate();
     const [logedIn, setLogedIn] = useState(false);
+    const [sideMenuOpen, setSideMenuOpen] = useState(false);
+
+    const toggleSideMenu = (open: boolean) => {
+        setSideMenuOpen(open);
+    }
 
     useEffect(() => {
         if (!!localStorage.getItem(JWT_TENANT)) {
@@ -36,10 +41,10 @@ export const Application = () => {
         <>
             {logedIn &&
                 <Box sx={classes.mainWrapper}>
-                    <SideMenu />
+                    <SideMenu active={sideMenuOpen} toggleSideMenu={toggleSideMenu}/>
                     <Box sx={classes.rightSideWrapper}>
-                        <NavBar />
-                        <ApplicationTab />
+                        <NavBar toggleSideMenu={toggleSideMenu}/>
+                        <ApplicationTab/>
                     </Box>
                 </Box>
             }

src/components/ApplicationTab.tsx

@@ -3,7 +3,9 @@ import { Box } from "@mui/material"
 const classes = {
     wrapper: {
         backgroundColor: 'rgb(241, 245, 249)',
-        minHeight: '95vh', width: '100%'
+        minHeight: '95vh', 
+        width: '100%',
+        flex: 1,
     }
 } as const;
 

src/components/NavBar.tsx

-import { Box } from "@mui/material";
-
-const classes = {
-    wrapper: { 
-        height: '5vh', 
-        backgroundColor: 'white', 
-        boxSizing: 'border-box', 
-        border: '2px solid rgb(213, 225, 239)', 
-        position: 'sticky', 
-        top: '0' 
-    },
-} as const;
-
-export const NavBar = () => {
-    return (
-        <Box sx={classes.wrapper}></Box>
-    );
-}
\ No newline at end of file

src/components/NavBar/NavBar.css

+.navbar {
+    height: 5vh;
+    background-color: white;
+    box-sizing: border-box;
+    border: 2px solid rgb(213, 225, 239);
+    top: 0; 
+    padding: 0.5vh;
+}
+
+@media only screen and (max-width: 800px) {
+}
+
+@media only screen and (min-width: 801px) {
+    .hamburger-menu {
+        display: none;
+    }
+}
\ No newline at end of file

src/components/NavBar/NavBar.tsx

+import { Box } from "@mui/material";
+import { ActivityIcon } from "../icons/ActivityIcon";
+import { HamburgerIcon } from "../icons/HamburgerIcon";
+import './NavBar.css';
+
+
+const classes = {
+    wrapper: {
+        height: '5vh',
+        backgroundColor: 'white',
+        boxSizing: 'border-box',
+        border: '2px solid rgb(213, 225, 239)',
+        top: '0'
+    },
+} as const;
+
+export const NavBar = ({toggleSideMenu} : {toggleSideMenu: (open: boolean) => void}) => {
+    return (
+        <div className="navbar">
+            <HamburgerIcon toggleSideMenu={toggleSideMenu}/>
+        </div>
+    );
+}
\ No newline at end of file

src/components/SideMenu/SideMenu.css

+.side-menu {
+    height: 100vh;
+    width: 100%;
+    position: fixed;
+    top: 0;
+    left: -100%;
+    transition: 860ms;
+    display: flex;
+    flex-direction: row;
+}
+
+.side-menu.active {
+    left: 0;
+    transition: 550ms;
+}
+
+.content {
+    background-color: rgba(19, 34, 50, 1);
+    width: 70%;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    padding-inline: 5px;
+    padding-block: 15px;
+    gap: 30px;
+}
+
+.transparent {
+    height: 100%;
+    width: 30%;
+}
+
+@media only screen and (max-width: 800px) {
+    .icons-stroke {
+        width: 25px;
+    }
+    .user-icon {
+        width: 50px;
+    }
+
+}
+
+@media only screen and (min-width: 801px) {
+    .side-menu {
+        width: 15%;
+        position: sticky;
+    }
+    .transparent {
+        display: none;
+    }
+
+    .navbar {
+        display: none;
+    }
+
+
+    .content {
+        width: 100%;
+        height: 100%;
+    }
+    
+}
\ No newline at end of file

src/components/SideMenu.tsx → src/components/SideMenu/SideMenu.tsx

 import { Box, Typography } from "@mui/material";
 import { useEffect, useState } from "react";
-import { getTenantInfo } from "../actions/data-manager";
-import { SubMenu } from "../internal-types";
-import { SideMenuItem } from "./SideMenuItem";
-import { ActivityIcon } from "./icons/ActivityIcon";
-import { HomeIcon } from "./icons/HomeIcon";
-import { NotificationIcon } from "./icons/NotificationIcon";
-import { VotingIcon } from "./icons/VotingIcon";
-import { InvoicesIcon } from "./icons/InvoicesIcon";
-import { BuidlingInvoicesIcon } from "./icons/BuildingInvoicesIcon";
-import { DocumentIcon } from "./icons/DocumentIcon";
-import { SettingsIcon } from "./icons/SettingsIcon";
-import { LanguageIcon } from "./icons/LanguageIcon";
-import { LogoutIcon } from "./icons/LogoutIcon";
-import { UserIcon } from "./icons/UserIcon";
-
-
-const subMenu: SubMenu[] = [
-    {
-        title: 'Glavni meni',
-        items: [
-            { title: 'Pregled', icon: <HomeIcon /> },
-            { title: 'Obaveštenja', icon: <NotificationIcon /> },
-            { title: 'Aktivnosti', icon: <ActivityIcon /> },
-            { title: 'Glasanje', icon: <VotingIcon /> }
-        ]
-    },
-    {
-        title: 'Računi/Finansije',
-        items: [
-            { title: 'Moj Račun', icon: <InvoicesIcon /> },
-            { title: 'Finansije zgrade', icon: <BuidlingInvoicesIcon /> },
-            { title: 'Dokumenta', icon: <DocumentIcon /> }]
-    },
-    {
-        title: 'Aplikacija',
-        items: [
-            { title: 'Podešavanja', icon: <SettingsIcon /> },
-            { title: 'Language', icon: <LanguageIcon /> }]
-    }
-
-];
+import { getTenantInfo } from "../../actions/data-manager";
+import { LogoutIcon } from "../icons/LogoutIcon";
+import { UserIcon } from "../icons/UserIcon";
+import { SideMenuItem } from "../SideMenuItem";
+import { subMenu } from "./SideMenuData";
+import "./SideMenu.css";
 
 const classes = {
-    wrapper: {
-        width: '15%',
-        backgroundColor: 'rgba(19, 34, 50, 1)',
-        height: '100vh',
-        position: 'sticky',
-        top: '0px'
-    },
-    content: {
-        display: 'flex',
-        flexDirection: 'column',
-        paddingInline: '3%',
-        paddingBlock: '7.5%',
-        gap: '30px'
-    },
     logo: {
         width: '75%',
         alignSelf: 'center'
@@ -75,37 +26,36 @@ const classes = {
     boldText: {
         fontWeight: 'bolder',
     },
-    signOut: { 
-        display: 'flex', 
-        flexDirection: 'row', 
-        width: '100%', 
-        justifyContent: 'center', 
-        gap: '10px', 
-        alignItems: 'center' 
+    signOut: {
+        display: 'flex',
+        flexDirection: 'row',
+        width: '100%',
+        justifyContent: 'center',
+        gap: '10px',
+        alignItems: 'center'
     }
 } as const;
 
-export const SideMenu = () => {
+export const SideMenu = ({ active, toggleSideMenu }: { active: boolean, toggleSideMenu: (open: boolean) => void }) => {
 
     const [tenantInfo, setTenantInfo] = useState<any>();
 
     useEffect(() => {
         getTenantInfo((err: any, data: any) => {
             setTenantInfo(data);
-        })
+        });
     }, []);
 
     return (
         <>
-            {
-                tenantInfo &&
-                <Box sx={classes.wrapper}>
-                    <Box sx={classes.content}>
+            {tenantInfo &&
+                <div className={active ? 'side-menu active' : 'side-menu'}>
+                    <div className="content">
                         {/* TODO Create component for logo as well. */}
                         <img src={process.env.PUBLIC_URL + '/assets/logo-svg.svg'} alt='logo' style={classes.logo} />
                         <Box sx={classes.accountInfo}>
                             <UserIcon />
-                            <Typography variant="body1" sx={{ ...classes.menuText, ...classes.boldText }}>{tenantInfo.firstName}</Typography>
+                            <Typography sx={{ ...classes.menuText, ...classes.boldText }}>{tenantInfo.firstName}</Typography>
                             <Typography style={classes.menuText}>{tenantInfo.email}</Typography>
 
                             <Box sx={classes.signOut}>
@@ -116,8 +66,9 @@ export const SideMenu = () => {
                         {subMenu.map((menu, index) => (
                             <SideMenuItem key={index} content={menu} />
                         ))}
-                    </Box>
-                </Box>
+                    </div>
+                    <div className="transparent" onClick={() => {toggleSideMenu(false)}}></div>
+                </div>
             }
         </>
     );

src/components/SideMenu/SideMenuData.tsx

+import { SubMenu } from "../../internal-types";
+import { ActivityIcon } from "../icons/ActivityIcon";
+import { BuidlingInvoicesIcon } from "../icons/BuildingInvoicesIcon";
+import { DocumentIcon } from "../icons/DocumentIcon";
+import { HomeIcon } from "../icons/HomeIcon";
+import { InvoicesIcon } from "../icons/InvoicesIcon";
+import { LanguageIcon } from "../icons/LanguageIcon";
+import { NotificationIcon } from "../icons/NotificationIcon";
+import { SettingsIcon } from "../icons/SettingsIcon";
+import { VotingIcon } from "../icons/VotingIcon";
+
+
+export const subMenu: SubMenu[] = [
+    {
+        title: 'Glavni meni',
+        items: [
+            { title: 'Pregled', icon: <HomeIcon /> },
+            { title: 'Obaveštenja', icon: <NotificationIcon /> },
+            { title: 'Aktivnosti', icon: <ActivityIcon /> },
+            { title: 'Glasanje', icon: <VotingIcon /> }
+        ]
+    },
+    {
+        title: 'Računi/Finansije',
+        items: [
+            { title: 'Moj Račun', icon: <InvoicesIcon /> },
+            { title: 'Finansije zgrade', icon: <BuidlingInvoicesIcon /> },
+            { title: 'Dokumenta', icon: <DocumentIcon /> }]
+    },
+    {
+        title: 'Aplikacija',
+        items: [
+            { title: 'Podešavanja', icon: <SettingsIcon /> },
+            { title: 'English', icon: <LanguageIcon /> }]
+    }
+
+];
\ No newline at end of file

src/components/SideMenuItem.tsx

@@ -6,17 +6,22 @@ const classes = {
         display: 'flex', 
         flexDirection: 'column', 
         color: 'white', 
-        paddingInline: '10%', 
         gap: '10px' 
     },
     itemTitle: { 
-        color: 'rgb(24, 95, 167)'
+        color: 'rgb(24, 95, 167)',
+        paddingInline: '10%', 
     },
     itemsWrapper: { 
         display: 'flex', 
         flexDirection: 'row', 
-        gap: '10%', 
-        alignItems: 'center' 
+        gap: '15px',
+        alignItems: 'center',
+        paddingInline: '10%', 
+        // boxSizing: 'border-box',
+        // backgroundColor: 'red',
+        borderRadius: '5px'
+        
     }
 } as const;
 

src/components/icons/HamburgerIcon.tsx

+import './Icons.css';
+
+export const HamburgerIcon = ({toggleSideMenu}: {toggleSideMenu: (open: boolean) => void}) => {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" className='hamburger-menu' fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2} width={'25px'} onClick={() => {toggleSideMenu(true)}}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M4 6h16M4 12h16M4 18h16" />
+        </svg>
+    );
+}
+

src/components/icons/Icons.css

@@ -5,4 +5,12 @@
 
 .logout:hover {
     stroke: white;
+}
+
+.hamburger-menu {
+    stroke: rgba(19, 34, 50, 1);
+}
+
+.user-icon {
+    width: 25%;
 }
\ No newline at end of file

src/components/icons/UserIcon.tsx

@@ -2,7 +2,7 @@ import './Icons.css';
 
 export const UserIcon = () => {
     return (
-        <svg xmlns="http://www.w3.org/2000/svg" className="icons-stroke" viewBox="0 0 20 20" fill="rgb(86, 107, 130)" style={{width: '30%'}}>
+        <svg xmlns="http://www.w3.org/2000/svg" className="icons-stroke user-icon" viewBox="0 0 20 20" fill="rgb(86, 107, 130)">
             <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clipRule="evenodd" />
         </svg>
     );