This is an automated email from the git hooks/post-receive script. New commit to branch bow-v2-go in repository bow. See https://gitlab.nuiton.org/chorem/bow.git commit 4bbf3580db3fedb4ca07484e139f0a702c34fbab Author: kaufmann <kaufmann@codelutin.com> Date: Fri Jul 31 18:11:03 2020 +0200 Mise en place du menu pour mobile/tablette --- web/src/components/layout/Header.vue | 3 ++- web/src/components/layout/Sidebar.vue | 44 +++++++++++++++++++++++++------ web/src/components/layout/SidebarLink.vue | 14 ++++++++++ 3 files changed, 52 insertions(+), 9 deletions(-) diff --git a/web/src/components/layout/Header.vue b/web/src/components/layout/Header.vue index 27c7e88..b5355d8 100644 --- a/web/src/components/layout/Header.vue +++ b/web/src/components/layout/Header.vue @@ -18,6 +18,7 @@ <router-link to="/login">Login</router-link> </span> </div> + </header> </template> @@ -67,7 +68,7 @@ header { #header-logo, #header-search, #header-user-infos { - height: 100%; + height: var(--header-height); padding: 30px; } diff --git a/web/src/components/layout/Sidebar.vue b/web/src/components/layout/Sidebar.vue index e6bfadd..e1bd41f 100644 --- a/web/src/components/layout/Sidebar.vue +++ b/web/src/components/layout/Sidebar.vue @@ -2,8 +2,10 @@ <div id="sidebar"> <div id="sidebar-logo"> <a href="/"><img src="../../assets/img/logos/bow.svg" alt="Bow Logo"/></a> + <Button id="toggle-mobile-menu" @click="toggleMobileMenu">Menu</Button> </div> - <div id="sidebar-menu"> + + <div id="sidebar-menu" :class="{'opened' : mobileMenuOpened}"> <SidebarLink title="Add" linkTo="/edit/new" @@ -25,14 +27,19 @@ <script> import { Component, Vue } from 'vue-property-decorator' +import Button from '@/components/common/Button' import SidebarLink from '@/components/layout/SidebarLink' @Component({ name: 'Sidebar', - components: { SidebarLink } + components: { + Button, + SidebarLink + } }) class Sidebar extends Vue { statsUrl = '' + mobileMenuOpened = false; add() { this.$router.push({ name: 'Edit', params: { id: 'new' } }) @@ -41,6 +48,10 @@ class Sidebar extends Vue { beforeMount() { this.statsUrl = this.$fetch.createUrl('/system/stats') } + + toggleMobileMenu() { + this.mobileMenuOpened = !this.mobileMenuOpened; + } } export default Sidebar @@ -59,29 +70,36 @@ export default Sidebar #sidebar-logo { display: flex; - justify-content: center; + justify-content: space-between; - width: var(--sidebar-width); + width: 100%; height: var(--header-height); padding: 20px; text-align: center; - background-color: #fff; border-right: 1px solid #eee; font-size: 36px; } #sidebar-menu { - display: none; /* TMP FIXME */ + position: absolute; + top: var(--header-height); + + display: none; flex-direction: column; justify-content: space-between; - - height: 100%; + width: 100%; + height: calc(100vh - var(--header-height)); padding-top: var(--header-height); background-color: var(--color-bg-sidebar); + z-index: 10; + + &.opened { + display: block; + } } .sidebar-menu-link { @@ -148,10 +166,20 @@ export default Sidebar #sidebar-logo { position: fixed; + justify-content: center; + width: var(--sidebar-width); + background-color: white; } #sidebar-menu { + position: relative; + display: flex; + padding-top: 0; + } + + #toggle-mobile-menu { + display: none; } } </style> diff --git a/web/src/components/layout/SidebarLink.vue b/web/src/components/layout/SidebarLink.vue index f973e72..9a7537a 100644 --- a/web/src/components/layout/SidebarLink.vue +++ b/web/src/components/layout/SidebarLink.vue @@ -82,5 +82,19 @@ export default SidebarLink opacity: 1; transition: transform 0.4s ease-in-out, opacity 0.2s ease-in-out; } + + a::after { + content: attr(title); + color: white; + font-size: 30px; + margin-left: 20px; + } +} + + +@media screen and (min-width: @screen-desktop-low) { + .sidebar-menu-link a::after { + display: none; + } } </style> -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.