OZG-1820 detailview for small displays

goofy-client/apps/goofy/src/app/app.component.scss

@@ -29,6 +29,9 @@ main {
 		max-width: calc(100vw - (20px + 72px));
 		transition-delay: 0.2s;
 	}
+	@include media('<desktop') {
+		max-width: calc(100vw - (20px + 72px));
+	}
 }
 
 .left-nav {

goofy-client/libs/navigation/src/lib/build-info/build-info.component.scss

@@ -9,11 +9,6 @@
 	padding: 4px 8px;
 	transform: rotate(-90deg) translate(100%, 0);
 	transform-origin: right bottom;
-
-	@media (min-width: 1240px) {
-		//transform: initial;
-		//padding: 4px 8px;
-	}
 }
 
 p {

goofy-client/libs/navigation/src/lib/navigation/navigation.component.scss

 @use 'sass:map';
 @use '~@angular/material' as mat;
 @import "variables";
+@import "breakpoints";
+@import "~include-media/dist/include-media";
 
 :host {
 	position: sticky;
@@ -17,6 +19,11 @@ nav {
 		width: 72px;
 		transition-delay: 0.2s;
 	}
+
+	@include media('<desktop') {
+		width: 72px;
+		transition-delay: 0.2s;
+	}
 }
 
 ul {
@@ -83,3 +90,24 @@ ul {
 		}
 	}
 }
+
+@include media('<desktop') {
+	ul {
+		a {
+			border-radius: 16px;
+			margin-left: 20px;
+			padding-left: 4px;
+			transition-delay: 0s;
+			width: 32px;
+
+			&.active {
+				background-color: mat.get-color-from-palette($primaryPalette, 50);
+			}
+		}
+
+		span {
+			opacity: 0;
+			transition-delay: 0s;
+		}
+	}
+}