component: set responsive Logo component

src/components/Logo/Logo.css

@@ -1,7 +1,7 @@
 .Logo {
     background-color: white;
     padding: 8px;
-    height: 80%;
+    height: 100%;
     box-sizing: border-box;
     border-radius: 5px;
 }

src/components/Navigation/SideDrawer/SideDrawer.css

@@ -25,3 +25,7 @@
 .Close {
     transform: translateX(-100%);
 }
+
+.Logo{
+    height: 11%;
+}

src/components/Navigation/SideDrawer/SideDrawer.js

@@ -7,7 +7,9 @@ import NavigationItems from '../NavigationItems/NavigationItems';
 const sideDrawer = () => {
     return (
         <div className={classes.SideDrawer}>
-            <Logo />
+            <div className={classes.Logo}>
+                <Logo />
+            </div>
             <nav>
                 <NavigationItems />
             </nav>

src/components/Navigation/Toolbar/Toolbar.css

@@ -16,3 +16,7 @@
 .Toolbar nav{
     height: 100%;
 }
+
+.Logo{
+    height: 80%;
+}

src/components/Navigation/Toolbar/Toolbar.js

@@ -8,7 +8,9 @@ const toolbar = () => {
     return (
         <header className={classes.Toolbar}>
             <div>MENU</div>
-            <Logo />
+            <div className={classes.Logo}>
+                <Logo />
+            </div>
             <nav>
                 <NavigationItems />
             </nav>