component: set responsive Logo component

master
oscarzhou 2020-12-13 16:17:02 +13:00
parent 4b0878dd16
commit bdcb128433
5 changed files with 16 additions and 4 deletions

View File

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

View File

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

View File

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

View File

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

View File

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