From be60fcef9dc6d053f65a709298fb4ba4056243b1 Mon Sep 17 00:00:00 2001
From: Niklas Meinzer <mail@niklas-meinzer.de>
Date: Sat, 14 Feb 2026 14:52:42 +0100
Subject: [PATCH] Some ui adjustments for mobile

---
 .../templates/base.html.jinja                 | 23 +++++++++++++------
 1 file changed, 16 insertions(+), 7 deletions(-)
diff --git a/src/allmende_payment_system/templates/base.html.jinja b/src/allmende_payment_system/templates/base.html.jinja
index 93b41cd..dae79d0 100644
--- a/src/allmende_payment_system/templates/base.html.jinja
+++ b/src/allmende_payment_system/templates/base.html.jinja
@@ -11,14 +11,22 @@
 <body>
     <div class="container-fluid">
         <div class="row">
-            <!-- Left Sidebar (always visible, stacks on mobile) -->
+            <!-- Left Sidebar (collapsible on mobile) -->
             <div class="col-md-3 col-lg-2 p-0 sidebar">
                 <div class="d-flex flex-column p-3">
-                    <a href="/" class="navbar-brand d-flex align-items-center mb-4">
-                        <img src="/static/img/Logo.png" alt="Logo" class="me-2">
-                        <span class="fs-4">APS</span>
-                    </a>
-                    <ul class="nav nav-pills flex-column mb-auto">
+                    <div class="d-flex justify-content-between align-items-center mb-4">
+                        <a href="/" class="navbar-brand d-flex align-items-center">
+                            <img src="/static/img/Logo.png" alt="Logo" class="me-2">
+                            <span class="fs-4">APS</span>
+                        </a>
+                        <button class="btn btn-sm btn-outline-primary d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarNav" aria-controls="sidebarNav" aria-expanded="false" aria-label="Toggle navigation">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
+                                <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
+                            </svg>
+                        </button>
+                    </div>
+                    <div class="collapse d-md-block" id="sidebarNav">
+                        <ul class="nav nav-pills d-flex flex-column mb-auto">
                         <li class="nav-item">
                             <a href="/" class="nav-link{% if request.url.path == "/"%} active{% endif %}">
                                 Übersicht
@@ -56,6 +64,7 @@
                         </li>
                         {% endif %}
                     </ul>
+                    </div>
 
                     <!-- Shopping Cart at Bottom -->
                     <div class="mt-auto pt-3 border-top">
@@ -77,7 +86,7 @@
             <!-- Main Content -->
             <main class="col-md-9 ms-sm-auto col-lg-10 p-md-4 main-content">
                 {% if not production_mode %}
-                <div class="alert alert-primary" role="alert">
+                <div class="alert alert-primary mt-2" role="alert">
                     <h2> Testmodus 🚧</h2>
                     <p>Die hier dargestellten Produkte, Konten und Transaktionen entsprechen keinen echten. Bitte noch keine wirklichen Abrechnungen vornehmen!</p>
                     <p>Schaltflächen mit dem 🚧-Symbol stellen Demo-Funktionen dar, die es im Echtbetrieb nicht mehr geben wird.</p>
