feat: collapse SidebarComponent and make it more compact at 1440px screen width

src/app/components/main-layout/main-layout.component.scss

@@ -8,7 +8,6 @@ app-header {
   left: 232px;
   right: 0;
   height: 96px;
-  width: 100%;
   background-color: var(--white);
   z-index: 1;
 }
@@ -46,6 +45,16 @@ app-sidebar-mobile {
   display: none;
 }
 
+/* Media queries */
+
+@media (max-width: 1440px) {
+  app-header,
+  app-sidebar,
+  .main-content {
+    left: 60px;
+  }
+}
+
 @media screen and (max-width: 910px) {
   .main-content {
     padding: 32px;

src/app/shared/components/header/header.component.scss

@@ -2,7 +2,6 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  width: calc(100% - 232px);
   height: 93px;
   box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1);
 }

src/app/shared/components/sidebar/sidebar.component.html

@@ -59,7 +59,8 @@
         'active-link': currentPath === 'privacy-policy'
       }"
     >
-      {{ "sidebar.privacyPolicy" | translate }}
+      <img src="./assets/img/sidebar/privacy-policy.svg" alt="privacy-policy" />
+      <span>{{ "sidebar.privacyPolicy" | translate }}</span>
     </a>
     <a
       routerLink="imprint"
@@ -67,8 +68,13 @@
         'active-link': currentPath === 'imprint'
       }"
     >
-      {{ "sidebar.legalNotice" | translate }}
+      <img src="./assets/img/sidebar/legal-notice.svg" alt="legal-notice" />
+      <span>{{ "sidebar.legalNotice" | translate }}</span>
     </a>
-    <a (click)="logout()">{{ "sidebar.logout" | translate }}</a>
+    <a (click)="logout()"
+      ><img src="./assets/img/sidebar/logout.svg" alt="logout" /><span>{{
+        "sidebar.logout" | translate
+      }}</span></a
+    >
   </div>
 </section>

src/app/shared/components/sidebar/sidebar.component.scss

@@ -27,19 +27,23 @@ nav {
   padding-left: 56px;
   height: 46px;
   cursor: pointer;
+
   img {
     width: 30px;
     height: 30px;
     padding-right: 8px;
   }
+
   span {
     text-align: center;
     font-size: 16px;
     color: var(--light-gray);
   }
+
   &:hover {
     background-color: var(--very-dark-blue);
   }
+
   &:active {
     background-color: var(--very-dark-blue);
   }
@@ -54,6 +58,7 @@ nav {
   align-items: center;
   flex-direction: column;
   margin-bottom: 30px;
+
   a {
     justify-content: center;
     width: fit-content;
@@ -64,6 +69,19 @@ nav {
     text-decoration: none;
     color: var(--light-gray);
     cursor: pointer;
+
+    img {
+      display: none;
+      width: 30px;
+      height: 30px;
+      cursor: pointer;
+
+      &:hover {
+        filter: brightness(0) saturate(100%) invert(75%) sepia(51%)
+          saturate(5547%) hue-rotate(164deg) brightness(97%) contrast(82%);
+      }
+    }
+
     &:hover {
       color: var(--light-blue);
     }
@@ -75,5 +93,48 @@ nav {
 }
 
 .active-link {
-  color: var(--light-blue) !important;
+  cursor: auto !important;
+  filter: brightness(0) saturate(100%) invert(75%) sepia(51%) saturate(5547%)
+    hue-rotate(164deg) brightness(97%) contrast(82%) !important;
+}
+
+/* Media queries */
+
+@media (max-width: 1440px) {
+  section,
+  nav {
+    width: 60px;
+  }
+
+  .logo {
+    width: 40px;
+    height: 73px;
+    margin: 10px;
+  }
+
+  .nav-links-inner {
+    justify-content: center;
+    width: 100%;
+    padding: 6px 0;
+
+    img {
+      padding-right: 0;
+    }
+
+    span {
+      display: none;
+    }
+  }
+
+  .reference {
+    a {
+      img {
+        display: block;
+      }
+
+      span {
+        display: none;
+      }
+    }
+  }
 }

src/assets/img/sidebar/legal-notice.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#CDCDCD"><path d="M320-240h320v-80H320v80Zm0-160h320v-80H320v80ZM240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v480q0 33-23.5 56.5T720-80H240Zm280-520v-200H240v640h480v-440H520ZM240-800v200-200 640-640Z"/></svg>

src/assets/img/sidebar/logout.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#CDCDCD"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h280v80H200Zm440-160-55-58 102-102H360v-80h327L585-622l55-58 200 200-200 200Z"/></svg>

src/assets/img/sidebar/privacy-policy.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#CDCDCD"><path d="M480-80q-139-35-229.5-159.5T160-516v-244l320-120 320 120v244q0 85-29 163.5T688-214L560-342q-18 11-38.5 16.5T480-320q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 22-5.5 42.5T618-398l60 60q20-41 31-86t11-92v-189l-240-90-240 90v189q0 121 68 220t172 132q26-8 49.5-20.5T576-214l56 56q-33 27-71.5 47T480-80Zm0-320q33 0 56.5-23.5T560-480q0-33-23.5-56.5T480-560q-33 0-56.5 23.5T400-480q0 33 23.5 56.5T480-400Zm8-77Z"/></svg>