Refactor sidebar to be always open on screens bigger than md

blueprints.yaml

@@ -1,5 +1,5 @@
 name: Reitanlage Oranienburg
-version: 1.4.8
+version: 1.5.0
 description: Design der Reitanlage Oranienburg
 icon: rebel
 author:

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "reitanlage-oranienburg",
-	"version": "1.4.8",
+	"version": "1.5.0",
 	"description": "The Reitanlage Oranienburg Theme for Grav CMS.",
 	"main": "index.js",
 	"scripts": {

src/css/sidebar.css

@@ -4,7 +4,11 @@
  * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-simple-sidebar/blob/master/LICENSE)
  */
 
-#wrapper, #sidebar-wrapper, #menu-toggle-icon {
+#wrapper,
+#sidebar-wrapper,
+#menu-toggle-icon,
+#menu-toggle,
+.sidebar-nav {
     -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
     -o-transition: all 0.5s ease;
@@ -57,10 +61,6 @@
     padding: 0.5em;
     text-align: center;
     color: #fff;
-    -webkit-transition: all 0.5s ease;
-    -moz-transition: all 0.5s ease;
-    -o-transition: all 0.5s ease;
-     transition: all 0.5s ease;
 }
 
 .content-wrapper {
@@ -82,10 +82,6 @@
     padding: 0;
     padding-bottom: 3em;
     list-style: none;
-    -webkit-transition: all 0.5s ease;
-    -moz-transition: all 0.5s ease;
-    -o-transition: all 0.5s ease;
-     transition: all 0.5s ease;
 }
 
 #wrapper.toggled #sidebar-wrapper .sidebar-nav {
@@ -157,14 +153,11 @@
     height: 3em;
 }
 
-@media (min-width: 576px) {
+@media (min-width: 768px) {
-    .sidebar-nav {
-        width: 0;
-    }
 
     #sidebar-wrapper {
         left: 250px;
-        width: 3em;
+        width: 250px;
         height: 100%;
         margin-left: -250px;
 
@@ -173,7 +166,7 @@
 
     #wrapper {
         padding-top: 0em;
-        padding-left: 3em;
+        padding-left: 250px !important;
     }
 
     .content-wrapper {
@@ -181,28 +174,15 @@
         position: relative;
     }
 
-    #wrapper.toggled #menu-toggle-icon {
+    #wrapper #sidebar-wrapper .sidebar-nav {
-        -moz-transform: scale(-1, 1);
-        -webkit-transform: scale(-1, 1);
-        -o-transform: scale(-1, 1);
-        -ms-transform: scale(-1, 1);
-        transform: scale(-1, 1);
-    }
-
-    #wrapper.toggled #sidebar-wrapper {
-        width: 250px;
-    }
-
-    #wrapper.toggled {
-        padding-left: 250px;
-    }
-
-    #wrapper.toggled #sidebar-wrapper .sidebar-nav {
         width: 100%;
     }
 
     #menu-toggle {
-        width: auto;
+        visibility: hidden;
-        text-align: right;
+    }
+
+    .sidebar-nav>.sidebar-spacer {
+        height: 0;
     }
 }

src/js/app.js

@@ -10,3 +10,17 @@ document.querySelector("#menu-toggle").onclick = function(e) {
     e.preventDefault();
 	document.querySelector("#wrapper").classList.toggle("toggled");
 };
+
+let min_width_query = window.matchMedia("(min-width: 768px)");
+
+function check_and_open_navbar(mwq) {
+    if (mwq.matches) {
+        document.querySelector("#wrapper").classList.add("toggled");
+    }
+}
+
+min_width_query.addEventListener("change", function(e) {
+    check_and_open_navbar(e);
+});
+
+check_and_open_navbar(min_width_query);

templates/partials/osm.html.twig

@@ -4,8 +4,8 @@
 			<a target="_blank" rel="noopener" href="https://www.openstreetmap.org/way/203340031" data-umami-event="OSM button">
 				<img class="w-100" alt="Diese Karte zeigt unseren Hof" src="{{ url('theme://images/map.webp') }}">
 			</a>
-			<small class="d-block position-absolute bottom-0 start-0">
+			<small class="d-block position-absolute bottom-0 start-0 mb-3">
-				<a class="bg-white text-black p-1" target="_blank" rel="noopener" href="https://goo.gl/maps/WFYcPCQVA5u2vegy8" data-umami-event="Google-Maps button">
+				<a class="bg-white text-black p-3 border border-white" target="_blank" rel="noopener" href="https://goo.gl/maps/WFYcPCQVA5u2vegy8" data-umami-event="Google-Maps button">
 					Auf Google Maps öffnen
 				</a>
 			</small>