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

add hiddenLabels variables to show or hide of top menu items on mouse over

Browse source
This commit is contained in:
Simon Vieille 2022-12-26 00:56:27 +01:00
parent 66a1c1eecb
commit 690c437476
1 changed files with 14 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/AppMenu.vue
View file

@ -22,12 +22,16 @@
<template> <template>
<nav class="app-menu show"> <nav class="app-menu show">
<ul class="app-menu-main" v-if="apps !== null"> <ul
class="app-menu-main"
:class="{ 'app-menu-main__hidden-label': hiddenLabels }"
v-if="apps !== null"
>
<li v-for="app in mainAppList()" <li v-for="app in mainAppList()"
:key="app.id" :key="app.id"
:data-app-id="app.id" :data-app-id="app.id"
class="app-menu-entry" class="app-menu-entry"
:class="{ 'app-menu-entry__active': app.active }" :class="{ 'app-menu-entry__active': app.active, 'app-menu-entry__hidden-label': hiddenLabels }"
:style="makeStyle(app)" :style="makeStyle(app)"
> >
<a :href="app.href" <a :href="app.href"
@ -77,6 +81,7 @@ export default {
appLimit: 0, appLimit: 0,
observer: null, observer: null,
targetBlankApps: [], targetBlankApps: [],
hiddenLabels: true
} }
}, },
mounted() { mounted() {
@ -220,8 +225,8 @@ $header-icon-size: 20px;
overflow: hidden; overflow: hidden;
} }
&:hover, &:not(.app-menu-entry__hidden-label):hover,
&:focus-within { &:not(.app-menu-entry__hidden-label):focus-within {
opacity: 1; opacity: 1;
.app-menu-entry--label { .app-menu-entry--label {
opacity: 1; opacity: 1;
@ -241,7 +246,12 @@ $header-icon-size: 20px;
.app-menu-entry:hover, .app-menu-entry:hover,
.app-menu-entry:focus { .app-menu-entry:focus {
opacity: 1; opacity: 1;
}
&:not(.app-menu-main__hidden-label):hover,
&:not(.app-menu-main__hidden-label):focus-within,
.app-menu-entry:not(.app-menu-entry__hidden-label):hover,
.app-menu-entry:not(.app-menu-entry__hidden-label):focus {
img { img {
margin-top: -6px; margin-top: -6px;
} }