local-it/vikunja-frontend
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Add option to hide the menu on desktop

Browse source
This commit is contained in:
kolaente 2020-06-25 23:56:41 +02:00
parent efc047ced7
commit d586e15c56
No known key found for this signature in database
GPG key ID: F40E70337AB24C9B
3 changed files with 74 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
src/App.vue
View file

@ -14,8 +14,18 @@
<img src="/images/logo-full-pride.svg" alt="Vikunja" v-if="(new Date()).getMonth() === 5"/>
<img src="/images/logo-full.svg" alt="Vikunja" v-else/>
</router-link>
<a
@click="menuActive = true"
class="menu-show-button"
:class="{'is-visible': !menuActive}"
>
<icon icon="bars"></icon>
</a>
</div>
<a @click="mobileMenuActive = true" class="mobilemenu-show-button" v-if="!mobileMenuActive">
<a
@click="menuActive = true"
class="menu-show-button"
>
<icon icon="bars"></icon>
</a>
<div class="list-title" v-if="currentList.id">
@ -61,7 +71,7 @@
</div>
</nav>
<div v-if="userAuthenticated && (userInfo && userInfo.type === authTypes.USER)">
<a @click="mobileMenuActive = false" class="mobilemenu-hide-button" v-if="mobileMenuActive">
<a @click="menuActive = false" class="menu-hide-button" v-if="menuActive">
<icon icon="times"></icon>
</a>
<div
@ -69,7 +79,7 @@
:class="{'has-background': background}"
:style="{'background-image': `url(${background})`}"
>
<div class="namespace-container" :class="{'is-active': mobileMenuActive}">
<div class="namespace-container" :class="{'is-active': menuActive}">
<div class="menu top-menu">
<router-link :to="{name: 'home'}" class="logo">
<img src="/images/logo-full.svg" alt="Vikunja"/>
@ -125,6 +135,7 @@
</li>
</ul>
</div>
<a @click="menuActive = false" class="collapse-menu-button">Collapse Menu</a>
<aside class="menu namespaces-lists">
<div class="spinner" :class="{ 'is-loading': namespaceService.loading}"></div>
<template v-for="n in namespaces">
@ -193,8 +204,14 @@
</aside>
<a class="menu-bottom-link" target="_blank" href="https://vikunja.io">Powered by Vikunja</a>
</div>
<div class="app-content" :class="{'fullpage-overlay': fullpage}">
<a class="mobile-overlay" v-if="mobileMenuActive" @click="mobileMenuActive = false"></a>
<div
class="app-content"
:class="{
'fullpage-overlay': fullpage,
'is-menu-enabled': menuActive,
}"
>
<a class="mobile-overlay" v-if="menuActive" @click="menuActive = false"></a>
<transition name="fade">
<router-view/>
</transition>
@ -273,7 +290,7 @@
data() {
return {
namespaceService: NamespaceService,
mobileMenuActive: false,
menuActive: true,
currentDate: new Date(),
userMenuActive: false,
authTypes: authTypes,
@ -339,6 +356,11 @@
)
}
// Hide the menu by default on mobile
if (window.innerWidth < 770) {
this.menuActive = false
}
// Try renewing the token every time vikunja is loaded initially
// (When opening the browser the focus event is not fired)
this.$store.dispatch('auth/renewToken')
@ -402,9 +424,13 @@
}
this.loadNamespacesIfNeeded(e)
this.mobileMenuActive = false
this.userMenuActive = false
// If the menu is active on desktop, don't hide it because that would confuse the user
if (window.innerWidth < 770) {
this.menuActive = false
}
// Reset the current list highlight in menu if the current list is not list related.
if (
this.$route.name === 'home' ||

5
src/styles/theme/content.scss
View file

@ -7,7 +7,10 @@
.app-content {
padding: $navbar-height + 1.5rem 1.5em 0 1.5em;
z-index: 2;
margin-left: 17vw;
&.is-menu-enabled {
margin-left: 17vw;
}
@media screen and (max-width: $tablet) {
margin-left: 0;

50
src/styles/theme/navigation.scss
View file

@ -14,6 +14,11 @@
box-shadow: $navbar-dropdown-boxed-shadow;
top: 101%;
}
.navbar-brand {
display: flex;
align-items: center;
}
}
.navbar.main-theme {
@ -113,15 +118,30 @@
overflow-x: auto;
width: 17vw;
@media screen and (max-width: $tablet) {
padding: 0 0 1em;
left: -147vw;
top: 0;
bottom: 0;
width: 70vw;
padding: 0 0 1em;
left: -147vw;
bottom: 0;
&.is-active {
left: 0;
@media screen and (max-width: $tablet) {
top: 0;
width: 70vw;
}
&.is-active {
left: 0;
}
.collapse-menu-button {
font-size: .75rem;
color: $grey;
text-align: center;
display: block;
width: 100%;
margin: $navbar-padding / 2 0 $navbar-padding;
cursor: pointer;
@media screen and (max-width: $tablet) {
display: none;
}
}
@ -270,7 +290,7 @@
}
.top-menu {
margin: $navbar-padding / 2 0 $navbar-padding;
margin-top: $navbar-padding / 2;
.menu-list {
li {
@ -326,7 +346,7 @@
}
}
.mobilemenu-hide-button, .mobilemenu-show-button {
.menu-hide-button, .menu-show-button {
display: none;
z-index: 31;
font-weight: bold;
@ -339,7 +359,7 @@
}
}
.mobilemenu-hide-button {
.menu-hide-button {
position: fixed;
&:hover, &:focus {
@ -361,13 +381,13 @@
}
@media screen and (max-width: $tablet) {
.mobilemenu-hide-button {
.menu-hide-button {
display: block;
top: $hamburger-menu-icon-spacing;
right: $hamburger-menu-icon-spacing;
}
.mobilemenu-show-button {
.menu-show-button {
display: block;
margin-left: $hamburger-menu-icon-spacing;
}
@ -382,6 +402,10 @@
}
}
.menu-show-button.is-visible {
display: block;
}
.logout-icon {
margin-right: 0.85em !important;
}