style: adjust publik menu look & feel on small screens (#18479)

gadjo/static/css/gadjo.scss

@@ -1,6 +1,8 @@
 @import 'opensans';
 @import 'utils';
 
+$mobile-limit: 760px;
+
 /* generalities */
 
 html, body {
@@ -622,7 +624,7 @@ input[type=submit]:hover {
 	width: 36px;
 	height: 2em;
 	text-align: left;
-	@include vendor-prefix('transition', 'all 0ms ease-in');
+	@include vendor-prefix('transition', 'width 0ms ease-in');
 	height: 100%;
 	overflow: initial;
 	background: #23282d url(texture.png);
@@ -765,6 +767,55 @@ ul#sidepage-menu li a {
 	@include vendor-prefix('transform', 'scale(0.2, 0.2) rotate(45deg)');
 }
 
+@media screen and (max-width: $mobile-limit) {
+	body #main {
+		margin-top: 41px;
+	}
+	ul.user-info {
+		z-index: 100;
+	}
+	#sidepage {
+		@include vendor-prefix('transition', 'height 400ms ease-in');
+		height: 40px;
+		width: 100%;
+		overflow: hidden;
+		span#applabel::before {
+			content: "\f0c9"; /* fa-bars */
+			width: 1em;
+			display: inline-block;
+		}
+		&.enable-transitions {
+			@include vendor-prefix('transition-duration', '100ms');
+		}
+	}
+	#sidepage.sidepage-expanded {
+		height: 100%;
+		width: 100%;
+		span#applabel::before {
+			content: "\f00d"; /* fa-times */
+		}
+	}
+	body[data-has-sidebar] #main,
+	body #main.sidepage-expanded {
+		margin-left: 0;
+	}
+	#sidepage ul#sidepage-menu li {
+		float: left;
+		width: 50%;
+		a {
+			padding: 4ex 1ex 1ex 1ex;
+			text-align: center;
+			background-position: 50% 1ex;
+		}
+		&::after {
+			@include vendor-prefix('transition', 'none');
+		}
+		&.active::after {
+			content: none;
+		}
+	}
+}
+
 #gadjo-ajax-error {
 	position: fixed;
 	right: 1em;

gadjo/static/js/gadjo.js

@@ -317,8 +317,10 @@ var gadjo_js = gadjo_js || {};
              set_sidepage_status('collasped');
           }
         });
-        if (get_sidepage_status() == 'expanded') {
-          $('#sidepage, #main').toggleClass('sidepage-expanded');
+        if ($(window).width() > 760) {
+          if (get_sidepage_status() == 'expanded') {
+            $('#sidepage, #main').toggleClass('sidepage-expanded');
+          }
         }
       }
     });