Replace sidebar toggler with a new right aligned button

src/onegov/feriennet/templates/layout.pt

@@ -55,19 +55,7 @@
         </div>
     </div>
 
-    <div class="sidebar-toggler show-for-small-only" data-toggle="offCanvasSidebar">
-        <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 >
-        <!-- Gets filled by sidebar_mobile.js -->
-    </div>
+    <tal:b metal:use-macro="layout.macros['sidebar_mobile']" />
 
     <div class="off-canvas position-right"  tal:condition="not:hide_search_header|nothing" data-transition="overlap" id="offCanvasSearch" data-auto-focus="false" data-off-canvas>
         <button class="off-canvas-close-button" aria-label="Close menu" type="button" data-close>

src/onegov/landsgemeinde/templates/assembly.pt

@@ -15,7 +15,7 @@
                 <div class="assembly-overview" tal:content="assembly.overview"></div>
             </div>
 
-            <div class="medium-5 cell medium-offset-1 sidebar" id="right-sidebar" data-sidebar-mobile-title="Downloads, Audio & Assembly items" i18n:attributes="data-sidebar-mobile-title">
+            <div class="medium-5 cell medium-offset-1 sidebar" data-sidebar-mobile-title="Downloads, Audio & Assembly items" i18n:attributes="data-sidebar-mobile-title">
                 <div class="sidebar-wrapper">
                     <div class="side-panel content-panel" style="display: none;" data-toc-level="${layout.org.level_table_of_contents}">
                         <h3 i18n:translate>Content</h3>

src/onegov/landsgemeinde/templates/layout.pt

@@ -65,19 +65,7 @@
         </div>
     </div>
 
-    <div class="sidebar-toggler show-for-small-only" data-toggle="offCanvasSidebar">
-            <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 >
-        <!-- Gets filled by sidebar_mobile.js -->
-    </div>
+    <tal:b metal:use-macro="layout.macros['sidebar_mobile']" />
 
     <div class="off-canvas position-right"  tal:condition="not:hide_search_header|nothing" data-transition="overlap" id="offCanvasSearch" data-auto-focus="false" data-off-canvas>
         <button class="off-canvas-close-button" aria-label="Close menu" type="button" data-close>

src/onegov/town6/assets/js/common.js

@@ -411,7 +411,11 @@ if (level !== 'none' && $('.sidebar-wrapper').length) {
         });
         sidePanel.append(list);
         sidePanel.show();
+    } else {
+        $('.side-panel.content-panel').remove();
     }
+} else {
+    $('.side-panel.content-panel').remove();
 }
 
 $('.is-accordion-submenu-parent a span').on('click', function(e) {

src/onegov/town6/assets/js/sidebar_mobile.js

@@ -6,7 +6,8 @@ if (!$('.sidebar-wrapper').length) {
     $('.sidebar-toggler').css('display', 'none');
 }
 
-newSidebarTitle = $('#right-sidebar').data("sidebarMobileTitle");
+newSidebarTitle = $('.sidebar').data("sidebarMobileTitle");
+
 // Take the text of the first two h3 elements in the sidebar and use them as the title
 if (!newSidebarTitle) {
     newSidebarTitle = $('.sidebar-wrapper h3').first().text();
@@ -22,4 +23,4 @@ if (newSidebarTitle) {
     $('.sidebar-toggler span.text').text(newSidebarTitle);
 }
 
-$(".sidebar-wrapper").clone().appendTo("#offCanvasSidebar");
+$(".sidebar-wrapper").clone().appendTo("#offCanvasSidebar .content-area");

src/onegov/town6/locale/de_CH/LC_MESSAGES/onegov.town6.po

@@ -6,7 +6,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: OneGov Cloud 1.0\n"
-"POT-Creation-Date: 2026-07-14 12:32+0200\n"
+"POT-Creation-Date: 2026-07-14 13:40+0200\n"
 "PO-Revision-Date: 2021-03-03 16:24+0100\n"
 "Last-Translator: Lukas Burkhard <lukas.burkhard@seantis.ch>\n"
 "Language-Team: German\n"
@@ -1533,8 +1533,11 @@ msgstr ""
 msgid "New customer message in Ticket ${link}"
 msgstr "Neue Kunden Nachricht in Ticket ${link}"
 
-#. Canonical text for ${link} is: "visit the request page"
+msgid "${author} wrote"
+msgstr "${author} schrieb"
+
 #. Canonical text for ${link} is: "visit the request status page"
+#. Canonical text for ${link} is: "visit the request page"
 msgid "Please ${link} to reply."
 msgstr "Bitte ${link} um zu antworten"
 
@@ -2159,6 +2162,9 @@ msgstr "Dies ist eine importierte Veranstaltung"
 msgid "General information about the event calendar"
 msgstr "Allgemeine Informationen zum Veranstaltungskalender"
 
+msgid "Filters & Actions"
+msgstr "Filter & Aktionen"
+
 msgid "Export these events"
 msgstr "Diese Termine exportieren"
 

src/onegov/town6/locale/fr_CH/LC_MESSAGES/onegov.town6.po

@@ -5,7 +5,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: OneGov Cloud 1.0\n"
-"POT-Creation-Date: 2026-07-14 12:32+0200\n"
+"POT-Creation-Date: 2026-07-14 13:40+0200\n"
 "PO-Revision-Date: 2021-03-03 14:04+0100\n"
 "Last-Translator: Lukas Burkhard <lukas.burkhard@seantis.ch>\n"
 "Language-Team: French\n"
@@ -1533,8 +1533,11 @@ msgstr ""
 msgid "New customer message in Ticket ${link}"
 msgstr "Nouveau message du client dans le ticket ${link}"
 
-#. Canonical text for ${link} is: "visit the request page"
+msgid "${author} wrote"
+msgstr "${author} a écrit"
+
 #. Canonical text for ${link} is: "visit the request status page"
+#. Canonical text for ${link} is: "visit the request page"
 msgid "Please ${link} to reply."
 msgstr "Veuillez vous rendre sur ${link} pour répondre."
 
@@ -2161,6 +2164,9 @@ msgstr "Il s'agit d'un événement importé"
 msgid "General information about the event calendar"
 msgstr "Informations générales sur le calendrier des événements"
 
+msgid "Filters & Actions"
+msgstr "Filtres et actions"
+
 msgid "Export these events"
 msgstr "Exporter ces événements"
 

src/onegov/town6/locale/it_CH/LC_MESSAGES/onegov.town6.po

@@ -1,7 +1,7 @@
 # This file was generated from translations.town6.xlsx
 msgid ""
 msgstr ""
-"POT-Creation-Date: 2026-07-14 12:32+0200\n"
+"POT-Creation-Date: 2026-07-14 13:40+0200\n"
 "PO-Revision-Date: 2021-09-27 16:02+0200\n"
 "Language: it_CH\n"
 "Content-Type: text/plain; charset=UTF-8\n"
@@ -1530,8 +1530,11 @@ msgstr ""
 msgid "New customer message in Ticket ${link}"
 msgstr "Nuovo messaggio del cliente nel ticket ${link}"
 
-#. Canonical text for ${link} is: "visit the request page"
+msgid "${author} wrote"
+msgstr "${author} ha scritto"
+
 #. Canonical text for ${link} is: "visit the request status page"
+#. Canonical text for ${link} is: "visit the request page"
 msgid "Please ${link} to reply."
 msgstr "Per favore ${link} per rispondere."
 
@@ -2154,6 +2157,9 @@ msgstr "Questo è un evento importato"
 msgid "General information about the event calendar"
 msgstr "Informazioni generali sul calendario degli eventi"
 
+msgid "Filters & Actions"
+msgstr "Filtri e azioni"
+
 msgid "Export these events"
 msgstr "Esporta questi eventi"
 

src/onegov/town6/templates/layout.pt

@@ -55,19 +55,7 @@
         </div>
     </div>
 
-    <div class="sidebar-toggler show-for-small-only" data-toggle="offCanvasSidebar">
-        <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 >
-        <!-- Gets filled by sidebar_mobile.js -->
-    </div>
+    <tal:b metal:use-macro="layout.macros['sidebar_mobile']" />
 
     <div class="off-canvas position-right"  tal:condition="not:hide_search_header|nothing" data-transition="overlap" id="offCanvasSearch" data-auto-focus="false" data-off-canvas>
         <button class="off-canvas-close-button" aria-label="Close menu" type="button" data-close>

src/onegov/town6/templates/macros.pt

@@ -3504,3 +3504,21 @@
         </li>
     </ul>
 </metal:globals-left>
+
+<metal:sidebar-mobile define-macro="sidebar-mobile">
+    <div class="sidebar-toggler show-for-small-only" data-toggle="offCanvasSidebar">
+        <i class="fa fa-angle-double-left"></i>
+        <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 >
+        <div class="button-area">
+            <button class="off-canvas-close-button" aria-label="Close menu" type="button" data-close>
+                <i class="fa fa-times"></i>
+            </button>
+        </div>
+        <div class="content-area">
+            <!-- Gets filled by sidebar_mobile.js -->
+        </div>
+    </div>
+</metal:sidebar-mobile>

src/onegov/town6/templates/occurrences.pt

@@ -45,7 +45,7 @@
                 </div>
             </div>
 
-            <div class="large-4 medium-4 cell large-offset-1 sidebar occurrence-sidebar">
+            <div class="large-4 medium-4 cell large-offset-1 sidebar occurrence-sidebar" data-sidebar-mobile-title="Filters & Actions" i18n:attributes="data-sidebar-mobile-title">
                 <div class="sidebar-wrapper">
                     <div class="side-panel" tal:condition="filters">
                         <div tal:repeat="filter filters" class="filter-periods">

src/onegov/town6/templates/usermanagement.pt

@@ -66,7 +66,7 @@
                     </tal:b>
                 </table>
             </div>
-            <div class="medium-4 cell medium-offset-1 sidebar filter-panel small-order-1 medium-order-2 large-order-2" id="right-sidebar">
+            <div class="medium-4 cell medium-offset-1 sidebar filter-panel small-order-1 medium-order-2 large-order-2">
                 <div class="sidebar-wrapper">
                     <div tal:condition="filters['active']|nothing" class="side-panel filter-active">
                         <h2 class="filter-title h3" i18n:translate>State</h2>

src/onegov/town6/theme/styles/header.scss

@@ -631,14 +631,19 @@ $editbar-fg-color-active: $white;
 }
 
 #offCanvas,
-#offCanvasFilters {
+#offCanvasFilters,
+#offCanvasSidebar {
     z-index: 1000;
 
     .button-area {
         display: flex;
         justify-content: end;
     }
 
+    .content-area {
+        padding: 2rem;
+    }
+
     .navigation-area {
         display: flex;
         justify-content: center;
@@ -824,7 +829,6 @@ $editbar-fg-color-active: $white;
 
 #offCanvasSidebar {
     background: $white;
-    padding: 2rem;
     z-index: 1000;
 }
 

src/onegov/town6/theme/styles/town6.scss

@@ -1195,103 +1195,22 @@ ul.recipients {
 }
 
 .sidebar-toggler {
-    align-items: center;
     background: $primary-color;
-    border-top: 1px solid rgba(255, 255, 255, .3);
-    bottom: 0;
-    color: $white;
-    display: flex;
-    justify-content: center;
-    padding-bottom: .3rem;
-    padding-top: .3rem;
+    border-radius: .7rem 0 0 .7rem;
+    border: 1px solid white;
+    border-right: 0;
+    bottom: 10rem;
+    color: white;
+    font-weight: bold;
+    padding: .9rem .2rem .9rem .1rem;
     position: fixed;
-    width: 100%;
-    z-index: 1001;
-
-    .text {
-        font-weight: bold;
-    }
-
-
-    /* Animated Hamburger */
-
-    $bar-height: 3px;
-
-    .animated-hamburger {
-        cursor: pointer;
-        height: 5 * $bar-height;
-        margin-right: .5rem;
-        -moz-transform: rotate(0deg);
-        -o-transform: rotate(0deg);
-        -webkit-transform: rotate(0deg);
-        transform: rotate(0deg);
-        -moz-transition: .5s ease-in-out;
-        -o-transition: .5s ease-in-out;
-        -webkit-transition: .5s ease-in-out;
-        transition: .5s ease-in-out;
-        width: 5 * $bar-height + .5 * $bar-height;
-
-
-        span:nth-child(1) {
-            top: 0;
-        }
-
-        span:nth-child(2),
-        span:nth-child(3) {
-            top: 2 * $bar-height;
-        }
-
-        span:nth-child(4) {
-            top: 4 * $bar-height;
-        }
-
-        span {
-            background: $white;
-            border-radius: 9px;
-            display: block;
-            height: $bar-height;
-            left: 0;
-            opacity: 1;
-            position: absolute;
-            -moz-transform: rotate(0deg);
-            -o-transform: rotate(0deg);
-            -webkit-transform: rotate(0deg);
-            transform: rotate(0deg);
-            -moz-transition: .25s ease-in-out;
-            -o-transition: .25s ease-in-out;
-            -webkit-transition: .25s ease-in-out;
-            transition: .25s ease-in-out;
-            width: 100%;
-        }
-    }
-
-
-    &[aria-expanded="true"] {
-        .animated-hamburger span:nth-child(1) {
-            left: 50%;
-            top: 2 * $bar-height;
-            width: 0%;
-        }
-
-        .animated-hamburger span:nth-child(2) {
-            -moz-transform: rotate(45deg);
-            -o-transform: rotate(45deg);
-            -webkit-transform: rotate(45deg);
-            transform: rotate(45deg);
-        }
-
-        .animated-hamburger span:nth-child(3) {
-            -moz-transform: rotate(-45deg);
-            -o-transform: rotate(-45deg);
-            -webkit-transform: rotate(-45deg);
-            transform: rotate(-45deg);
-        }
+    right: 0;
+    white-space: nowrap;
+    writing-mode: vertical-lr;
+    z-index: 99;
 
-        .animated-hamburger span:nth-child(4) {
-            left: 50%;
-            top: 2 * $bar-height;
-            width: 0%;
-        }
+    .fa {
+        margin-bottom: .5rem;
     }
 }