diff --git a/goofy-client/apps/goofy/src/app/app.component.scss b/goofy-client/apps/goofy/src/app/app.component.scss index f9b60b4e0e8a775bc64e9348f0c69881783c866a..6d15feb9a6e8fe1c8bf2182e78a666f32993ff18 100644 --- a/goofy-client/apps/goofy/src/app/app.component.scss +++ b/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 { diff --git a/goofy-client/libs/navigation/src/lib/build-info/build-info.component.scss b/goofy-client/libs/navigation/src/lib/build-info/build-info.component.scss index 206a83d14da65c5e50fbf7e464241a3f3549b209..0c892bfb7980959ea08bd4fff40f54b6e71a27ec 100644 --- a/goofy-client/libs/navigation/src/lib/build-info/build-info.component.scss +++ b/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 { diff --git a/goofy-client/libs/navigation/src/lib/navigation/navigation.component.scss b/goofy-client/libs/navigation/src/lib/navigation/navigation.component.scss index e99d86ce1ded08852286da191925766c5b298fd7..9eddb9b846d0238566a4ed8cc48f205487bdb358 100644 --- a/goofy-client/libs/navigation/src/lib/navigation/navigation.component.scss +++ b/goofy-client/libs/navigation/src/lib/navigation/navigation.component.scss @@ -1,6 +1,8 @@ @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; + } + } +}