Town6: Sidebar-toggler bottom

Restyle the sidebar-toggler so it is fixed to the bottom and more visible. TYPE: Feature LINK: OGC-1985
OneGov · Jan 23, 2025 · d2c4c7d · d2c4c7d
1 parent 1a3e116
commit d2c4c7d
Show file tree

Hide file tree

Showing 5 changed files with 113 additions and 13 deletions.
diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
@@ -65,4 +65,4 @@ repos:
         entry: ./stubtest.sh
         language: system
         files:  '^stubs/.*\.pyi$'
-        pass_filenames: false
+        pass_filenames: false
diff --git a/src/onegov/landsgemeinde/templates/layout.pt b/src/onegov/landsgemeinde/templates/layout.pt
@@ -67,7 +67,13 @@
         </div>
 
         <div class="sidebar-toggler show-for-small-only" data-toggle="offCanvasSidebar">
-            <i class="fa fa-chevron-left rotate"></i>
+                <div class="animated-hamburger">
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                </div>
+                <span class="text"> Sidebar</span>
         </div>
 
         <div class="off-canvas position-right show-for-small-only" id="offCanvasSidebar" data-auto-focus="false" data-off-canvas >

diff --git a/src/onegov/landsgemeinde/theme/styles/landsgemeinde.scss b/src/onegov/landsgemeinde/theme/styles/landsgemeinde.scss
@@ -347,8 +347,12 @@ h1.main-title small {
     }
 }
 
-
 /* Side panel*/
+
+.sidebar-toggler .text{
+    margin-bottom: -2px;
+}
+
 .agenda-item-list.with-current {
     height: 25rem;
     overflow-y: scroll;
@@ -635,5 +639,4 @@ h1.main-title small {
             }
         }
     }
-
 }
diff --git a/src/onegov/town6/templates/layout.pt b/src/onegov/town6/templates/layout.pt
@@ -58,7 +58,13 @@
         </div>
 
         <div class="sidebar-toggler show-for-small-only" data-toggle="offCanvasSidebar">
-            <i class="fa fa-chevron-left rotate"></i>
+            <div class="animated-hamburger">
+                <span></span>
+                <span></span>
+                <span></span>
+                <span></span>
+            </div>
+            <span class="text"> Sidebar</span>
         </div>
 
         <div class="off-canvas position-right show-for-small-only" id="offCanvasSidebar" data-auto-focus="false" data-off-canvas >

diff --git a/src/onegov/town6/theme/styles/town6.scss b/src/onegov/town6/theme/styles/town6.scss
@@ -1027,18 +1027,103 @@ ul.recipients {
 }
 
 .sidebar-toggler {
-    background: $black;
-    border-radius: 200px 0 0 200px;
+    background: $primary-color;
     display: block;
-    opacity: .5;
-    padding: .9rem .4rem .7rem 1rem;
+    padding-top: .3rem;
+    padding-bottom: .3rem;
     position: fixed;
-    right: 0;
-    top: calc(50vh - 23px);
+    bottom: 0;
+    color: $white;
     z-index: 1001;
+    width: 100%;
+    border-top: 1px solid rgba(255, 255, 255, 0.3);
+    align-items: center;
+    display: flex;
+    justify-content: center;
 
-    i {
-        color: $white;
+    .text {
+        font-weight: bold;
+    }
+
+
+    /* Animated Hamburger */
+
+    $bar-height: 3px;
+
+    .animated-hamburger {
+        width: 5 * $bar-height + .5 * $bar-height;
+        height: 5 * $bar-height;
+        margin-right: .5rem;
+        -webkit-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+        -webkit-transition: .5s ease-in-out;
+        -moz-transition: .5s ease-in-out;
+        -o-transition: .5s ease-in-out;
+        transition: .5s ease-in-out;
+        cursor: pointer;
+
+        span {
+            display: block;
+            position: absolute;
+            height: $bar-height;
+            width: 100%;
+            background: $white;
+            border-radius: 9px;
+            opacity: 1;
+            left: 0;
+            -webkit-transform: rotate(0deg);
+            -moz-transform: rotate(0deg);
+            -o-transform: rotate(0deg);
+            transform: rotate(0deg);
+            -webkit-transition: .25s ease-in-out;
+            -moz-transition: .25s ease-in-out;
+            -o-transition: .25s ease-in-out;
+            transition: .25s ease-in-out;
+        }
+    }
+
+
+    .animated-hamburger span:nth-child(1) {
+        top: 0px;
+    }
+
+    .animated-hamburger span:nth-child(2),.animated-hamburger span:nth-child(3) {
+        top: 2 * $bar-height;
+    }
+
+    .animated-hamburger span:nth-child(4) {
+        top: 4 * $bar-height;
+    }
+
+
+    &[aria-expanded="true"] {
+        .animated-hamburger span:nth-child(1) {
+            top: 2 * $bar-height;
+            width: 0%;
+            left: 50%;
+        }
+
+        .animated-hamburger span:nth-child(2) {
+            -webkit-transform: rotate(45deg);
+            -moz-transform: rotate(45deg);
+            -o-transform: rotate(45deg);
+            transform: rotate(45deg);
+        }
+
+        .animated-hamburger span:nth-child(3) {
+            -webkit-transform: rotate(-45deg);
+            -moz-transform: rotate(-45deg);
+            -o-transform: rotate(-45deg);
+            transform: rotate(-45deg);
+        }
+
+        .animated-hamburger span:nth-child(4) {
+            top: 2 * $bar-height;
+            width: 0%;
+            left: 50%;
+        }
     }
 }