feat:sidebar completed

src/components/userProfile/GlobalNavigationBar.module.scss

@@ -16,14 +16,16 @@
 .iconContainer {
     width: 32px;
     height: 32px;
-    margin: 8px;
+    margin: 16px;
     display: flex;
     justify-content: center;
     align-items: center;
     border-radius: 6px;
 }
 
 .logoIconContainer{
+    width: 32px;
+    height: 32px;
     background-color: #00BD57;
     margin-bottom: 12px;
     border-radius: 6px;

src/components/userProfile/GlobalNavigationBar.tsx

@@ -1,17 +1,20 @@
-import React from 'react';
+import React, {useState,useEffect} from 'react';
 import { Link } from 'react-router-dom';
 import styles from './GlobalNavigationBar.module.scss';
 import {ReactComponent as MapuLogo} from '../../assets/MapuLogo.svg';
 import {ReactComponent as Home} from '../../assets/Home.svg';
 import {ReactComponent as Explore} from '../../assets/Explore.svg';
 import {ReactComponent as User} from '../../assets/User.svg';
 import {ReactComponent as Logout } from '../../assets/Logout.svg';
+import {ReactComponent as Login } from '../../assets/Login.svg';
 
 const SideBar = (props: { children: React.ReactNode }) => {
+    const [isLoggedIn, setIsLoggedIn] = useState(false);
+
     return (
         <div className={styles.container}>
             <div className={styles.LeftSideBar}>
-                <div className={`${styles.iconContainer} ${styles.logoIconContainer}`}>
+                <div className={styles.logoIconContainer}>
                     <MapuLogo className={styles.icon} />
                 </div>
                 <Link to="/" className={styles.link}>