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 e45307ecbc06a636938b92f6f813c38e225134e0 Author: kaufmann <kaufmann@codelutin.com> Date: Fri Jul 31 17:51:46 2020 +0200 Création d'un composant pour les liens du menu principal --- web/src/components/layout/Sidebar.vue | 83 ++++++++++++++++++----------- web/src/components/layout/SidebarLink.vue | 86 +++++++++++++++++++++++++++++++ 2 files changed, 138 insertions(+), 31 deletions(-) diff --git a/web/src/components/layout/Sidebar.vue b/web/src/components/layout/Sidebar.vue index 495f8d9..e6bfadd 100644 --- a/web/src/components/layout/Sidebar.vue +++ b/web/src/components/layout/Sidebar.vue @@ -1,32 +1,35 @@ <template> - <div class="sidebar"> - <div class="sidebar-logo"> + <div id="sidebar"> + <div id="sidebar-logo"> <a href="/"><img src="../../assets/img/logos/bow.svg" alt="Bow Logo"/></a> </div> - <div class="sidebar-menu"> - <div class="sidebar-menu-link"> - <router-link to="/edit/new" title="Add"> - <i class="icon-square-plus icon"></i> - </router-link> - </div> - <div v-if="user.admin"> - <a :href="statsUrl">stats</a> - </div> - <div class="sidebar-menu-link"> - <router-link to="/about" title="About"> - <i class="icon-help icon"></i> - </router-link> - </div> + <div id="sidebar-menu"> + <SidebarLink + title="Add" + linkTo="/edit/new" + iconName="icon-square-plus"/> + + <SidebarLink + v-if="user.admin" + title="Stats" + :linkTo="statsUrl" + iconName="icon-graph"/> + + <SidebarLink + title="About" + linkTo="/about" + iconName="icon-help"/> </div> </div> </template> <script> import { Component, Vue } from 'vue-property-decorator' +import SidebarLink from '@/components/layout/SidebarLink' @Component({ name: 'Sidebar', - components: {} + components: { SidebarLink } }) class Sidebar extends Vue { statsUrl = '' @@ -44,20 +47,19 @@ export default Sidebar </script> <style scoped lang="less"> -.sidebar { +@import '../../assets/less/_globals'; + +#sidebar { position: fixed; + top: 0; left: 0; - - width: var(--sidebar-width); - height: 100%; - /* FIXME LK : TMP */ - overflow: hidden; + width: 100%; + z-index: 1; } -.sidebar-logo { +#sidebar-logo { display: flex; justify-content: center; - position: fixed; width: var(--sidebar-width); height: var(--header-height); @@ -71,8 +73,8 @@ export default Sidebar font-size: 36px; } -.sidebar-menu { - display: flex; +#sidebar-menu { + display: none; /* TMP FIXME */ flex-direction: column; justify-content: space-between; @@ -120,17 +122,36 @@ export default Sidebar left: 0; height: 100%; - width: 0; + width: 100%;; background-color: var(--color-hover); opacity: 0; - transition: width 0.4s ease-in-out, opacity 0.4s ease-in-out; + transform: scaleX(0); + transform-origin: left; + transition: transform 0.4s ease-in-out, opacity 0.6s ease-in-out; } &:hover:before { - width: 100%; - + transform: scaleX(1); opacity: 1; + transition: transform 0.4s ease-in-out, opacity 0.2s ease-in-out; + } +} + +@media screen and (min-width: @screen-desktop-low) { + #sidebar { + width: var(--sidebar-width); + height: 100%; + /* FIXME LK : TMP */ + overflow: hidden; + } + + #sidebar-logo { + position: fixed; + } + + #sidebar-menu { + display: flex; } } </style> diff --git a/web/src/components/layout/SidebarLink.vue b/web/src/components/layout/SidebarLink.vue new file mode 100644 index 0000000..f973e72 --- /dev/null +++ b/web/src/components/layout/SidebarLink.vue @@ -0,0 +1,86 @@ +<template> + <div class="sidebar-menu-link"> + <router-link :to="linkTo" :title="title"> + <i class="icon" :class="iconName"></i> + </router-link> + </div> +</template> + +<script> +import { Component, Prop, Vue } from 'vue-property-decorator' + +@Component({ + name: 'SidebarLink', + props: [ + 'linkTo', + 'title', + 'iconName' + ], + components: {} +}) +class SidebarLink extends Vue { + @Prop linkTo + @Prop title + @Prop iconName +} + +export default SidebarLink +</script> + +<style scoped lang="less"> +@import '../../assets/less/_globals'; + +.sidebar-menu-link { + display: flex; + justify-content: center; + align-items: center; + + position: relative; + flex: 1; + max-height: 150px; + + text-align: center; + + .icon { + color: var(--color-white); + font-size: 30px; + } + a, + span { + width: 100%; + + z-index: 10; + } + a { + display: flex; + align-items: center; + justify-content: center; + + height: 100%; + } + &:hover .icon { + color: #fff; + } + &:before { + content: ''; + position: absolute; + top: 0; + left: 0; + + height: 100%; + width: 100%;; + + background-color: var(--color-hover); + opacity: 0; + + transform: scaleX(0); + transform-origin: left; + transition: transform 0.4s ease-in-out, opacity 0.6s ease-in-out; + } + &:hover:before { + transform: scaleX(1); + opacity: 1; + transition: transform 0.4s ease-in-out, opacity 0.2s ease-in-out; + } +} +</style> -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.