another hamburger in the center for mobile

KeenMate · Feb 12, 2025 · 496b976 · 496b976
1 parent 990a779
commit 496b976
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 9 deletions.
diff --git a/poc/public/styles.css b/poc/public/styles.css
@@ -41,11 +41,25 @@ body {
     border: none;
     font-size: 1.5rem;
     cursor: pointer;
-    /* padding: 0.5rem; */
     padding: 0 0.5rem 0 0.5rem;
     margin-right: 0;
 }
 
+.sticky-hamburger {
+    position: fixed;
+    top: 50%;
+    left: 0;
+    transform: translateY(-50%);
+    background: rgba(255, 255, 255, 0.9);
+    border-radius: 0.25rem;
+    padding: 0.8rem;
+    margin: 0;
+    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
+    z-index: 1000;
+
+    display: none;
+}
+
 .header-left {
     display: flex;
     align-items: center;
@@ -486,6 +500,9 @@ table th {
         max-width: 100%;
     }
 
+    .sticky-hamburger{
+        display: block;
+    }
 }
 
 /* .sidebar.collapsed .pure-menu-link {

diff --git a/poc/src/App.svelte b/poc/src/App.svelte
@@ -128,18 +128,18 @@
     <div class="pure-g">
       <div class="pure-u-1-2 header-left">
         <!-- <div class="header-left"> -->
-          <button class="hamburger-btn" on:click={toggleSidebar}>
-            <i class="fas fa-bars"></i>
-          </button>
-          <a href="#" class="pure-menu-heading">
-            <!-- <img class="pure-image" src="" alt="" /> -->
-            <span>Dokumenty</span>
-          </a>
+        <button class="hamburger-btn" on:click={toggleSidebar}>
+          <i class="fas fa-bars"></i>
+        </button>
+        <a href="#" class="pure-menu-heading">
+          <!-- <img class="pure-image" src="" alt="" /> -->
+          <span>Dokumenty</span>
+        </a>
         <!-- </div> -->
       </div>
       <div class="pure-u-1-2 header-right">
         <!-- <div class="header-right"> -->
-          <a href="#" class="pure-menu-link">[email protected]</a>
+        <a href="#" class="pure-menu-link">[email protected]</a>
         <!-- </div> -->
       </div>
     </div>
@@ -210,6 +210,10 @@
         </div>
       </div>
 
+      <button class="hamburger-btn sticky-hamburger" on:click={toggleSidebar}>
+        <i class="fas fa-bars"></i>
+      </button>
+
       <div class="main" id="main">
         <div class="main-content">
           <div