deblan/side_menu
deblan
/
side_menu
3
6
Fork 5
Code Issues 6 Pull Requests 11 Projects Releases 119 Wiki Activity

fix #25: Icon x for closing the big menu

This commit is contained in:
Simon Vieille 2020-08-19 11:41:10 +02:00
parent 3db0c1ccd2
commit d084cfed86
Signed by: deblan
GPG Key ID: 03383D15A1D31745
3 changed files with 25 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
css/sideMenu.css
View File

@ -45,6 +45,11 @@
border: 0;
}
.side-menu-closer {
background: url('../img/side-menu-opener-closer.svg');
display: none;
}
#side-menu.hide-opener .side-menu-opener, .side-menu-opener.hide {
display: none;
}
@ -193,3 +198,15 @@
height: 100vh;
}
}
@media screen and (min-width: 1024px) {
.side-menu-closer {
display: block;
float: right;
margin-right: 9px;
}
.side-menu-big .side-menu-header {
max-width: 100%;
}
}

6
img/side-menu-opener-closer.svg Normal file
View File

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 10.583 10.583">
<g color="#000" fill="#fff">
<rect transform="rotate(135)" ry=".545" rx=".545" y="-8.209" x="-3.608" height="1.451" width="7.216" style="marker:none" overflow="visible" paint-order="stroke markers fill"/>
<rect transform="rotate(-135)" ry=".545" rx=".545" y="-.726" x="-11.091" height="1.451" width="7.216" style="marker:none" overflow="visible" paint-order="stroke markers fill"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 498 B

3
src/SideMenuBig.vue
View File

@ -17,7 +17,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<template>
<div id="side-menu" class="side-menu-big">
<div class="side-menu-header">
<button class="side-menu-opener"></button>
<button class="side-menu-opener side-menu-closer"></button>
<button class="side-menu-opener"></button>
</div>
<div class="side-menu-categories-wrapper">