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

@@ -24,4 +24,8 @@
 
 .Close {
     transform: translateX(-100%);
+}
+
+.Logo{
+    height: 11%;
 }

src/components/Navigation/SideDrawer/SideDrawer.js

@@ -1,13 +1,15 @@
 import React from 'react';
 
-import classes from './SideDrawer.css'; 
+import classes from './SideDrawer.css';
 import Logo from '../../Logo/Logo';
 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>