[Bow-commits] 04/07: Modifications d'affichage du menu principal

11 Aug 2020

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 3db9d8c72e02ec2757484c436f1bf5435477d843
Author: kaufmann <kaufmann@codelutin.com>
Date:   Tue Aug 11 10:30:47 2020 +0200

    Modifications d'affichage du menu principal
---
 web/src/components/layout/Sidebar.vue     |  9 ++----
 web/src/components/layout/SidebarLink.vue | 46 +++++++++++++++++++++++++------
 2 files changed, 40 insertions(+), 15 deletions(-)

diff --git a/web/src/components/layout/Sidebar.vue b/web/src/components/layout/Sidebar.vue
index ab2d503..e02a279 100644
--- a/web/src/components/layout/Sidebar.vue
+++ b/web/src/components/layout/Sidebar.vue
@@ -86,7 +86,7 @@ export default Sidebar
   top: 0;
   left: 0;
   width: 100%;
-  z-index: 1;
+  z-index: 10;
 }
 
 #sidebar-logo {
@@ -116,13 +116,13 @@ export default Sidebar
   justify-content: space-between;
   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;
+    display: flex;
+    justify-content: space-between;
   }
 }
 
@@ -130,8 +130,6 @@ export default Sidebar
   #sidebar {
     width: var(--sidebar-width);
     height: 100%;
-    /* FIXME LK : TMP */
-    overflow: hidden;
   }
 
   #sidebar-logo {
@@ -145,7 +143,6 @@ export default Sidebar
     position: relative;
 
     display: flex;
-    padding-top: 0;
   }
 
   #toggle-mobile-menu {
diff --git a/web/src/components/layout/SidebarLink.vue b/web/src/components/layout/SidebarLink.vue
index a8911a2..b76aa56 100644
--- a/web/src/components/layout/SidebarLink.vue
+++ b/web/src/components/layout/SidebarLink.vue
@@ -45,23 +45,22 @@ export default SidebarLink
     color: white;
     font-size: 30px;
   }
-  a,
-  span {
-    width: 100%;
 
-    z-index: 10;
-  }
   a {
+    z-index: 10;
+
     display: flex;
     align-items: center;
     justify-content: center;
 
     height: 100%;
   }
+
   &:hover .icon {
     color: white;
   }
-  &:before {
+
+  &::before {
     content: '';
     position: absolute;
     top: 0;
@@ -75,23 +74,52 @@ export default SidebarLink
 
     transition: opacity 0.4s ease-in-out;
   }
-  &:hover:before {
+
+  &:hover::before {
     opacity: 1;
     transition: opacity 0.2s ease-in-out;
   }
 
   a::after {
-    content: attr(title);
     color: white;
     font-size: 30px;
-    margin-left: 20px;
+    margin-left: var(--margin--medium);
+
+    content: attr(title);
   }
 }
 
 
 @media screen and (min-width: @screen-desktop-low) {
+  .sidebar-menu-link a {
+    width: 100%;
+
+    &::after {
+      display: none;
+    }
+  }
+
   .sidebar-menu-link a::after {
+    position: absolute;
+    left: 100%;
+
     display: none;
+    margin-left: 0;
+    padding: 20px;
+
+    font-size: 20px;
+    white-space: nowrap;
+
+    background-color: var(--color-hover);
+
+    content: attr(title);
+    opacity: 0;
+    transition: all 0.4s ease;
+  }
+
+  .sidebar-menu-link a:hover::after {
+    display: block;
+    opacity: 1;
   }
 }
 </style>

-- 
To stop receiving notification emails like this one, please contact
chorem.org SCM administrator <admin+scm@chorem.org>.

    

[Bow-commits] 04/07: Modifications d'affichage du menu principal

chorem.org scm