Ensembia/nextcloud-side_menu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add option to show hovered label only on top menu

Browse Source
This commit is contained in:
Simon Vieille
2023-05-23 14:09:55 +02:00
parent 135f27cc32
commit 93fef37033
11 changed files with 32 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/AppMenu.vue
+22 -7
View File
@@ -24,14 +24,14 @@
<nav class="app-menu show">
<ul
class="app-menu-main"
:class="{ 'app-menu-main__hidden-label': hiddenLabels }"
:class="{ 'app-menu-main__hidden-label': hiddenLabels === 1, 'app-menu-main__show-hovered': hiddenLabels === 2 }"
v-if="apps !== null"
>
<li v-for="app in mainAppList()"
:key="app.id"
:data-app-id="app.id"
class="app-menu-entry"
:class="{ 'app-menu-entry__active': app.active, 'app-menu-entry__hidden-label': hiddenLabels }"
:class="{ 'app-menu-entry__active': app.active, 'app-menu-entry__hidden-label': hiddenLabels === 1, 'app-menu-main__show-hovered': hiddenLabels === 2 }"
:style="makeStyle(app)"
>
<a :href="app.href"
@@ -233,8 +233,8 @@ $header-icon-size: 20px;
overflow: hidden;
}
&:not(.app-menu-entry__hidden-label):hover,
&:not(.app-menu-entry__hidden-label):focus-within {
&:not(.app-menu-entry__hidden-label):not(.app-menu-entry__show-hovered):hover,
&:not(.app-menu-entry__hidden-label):not(.app-menu-entry__show-hovered):focus-within {
opacity: 1;
.app-menu-entry--label {
opacity: 1;
@@ -245,7 +245,6 @@ $header-icon-size: 20px;
overflow: visible;
}
}
}
// Show labels
@@ -256,8 +255,8 @@ $header-icon-size: 20px;
opacity: 1;
}
&:not(.app-menu-main__hidden-label):hover,
&:not(.app-menu-main__hidden-label):focus-within,
&:not(.app-menu-main__hidden-label):not(.app-menu-main__show-hovered):hover,
&:not(.app-menu-main__hidden-label):not(.app-menu-main__show-hovered):focus-within,
.app-menu-entry:not(.app-menu-entry__hidden-label):hover,
.app-menu-entry:not(.app-menu-entry__hidden-label):focus {
img {
@@ -273,6 +272,22 @@ $header-icon-size: 20px;
opacity: 0;
}
}
&.app-menu-main__show-hovered .app-menu-entry:hover,
&.app-menu-main__show-hovered .app-menu-entry:focus {
img {
margin-top: -6px;
}
.app-menu-entry--label {
opacity: 1;
bottom: 0;
}
&::before, .app-menu-entry::before {
opacity: 0;
}
}
}
::v-deep .app-menu-more .button-vue--vue-tertiary {