cleaned up

Author: Lauest-Iterator

src/app/app.component.scss

@@ -2,11 +2,9 @@
 @import "src/assets/scss/setup/variables";
 
 #content {
-  transition: margin-left 0.3s ease;
-
   @media (min-width: $screen-md-min) {
     padding-left: 0;
-
+    transition: padding-left 0.3s ease-in-out;
     &.nav-visible {
       padding-left: $navWidth;
     }

src/app/app.component.ts

@@ -9,8 +9,7 @@ import { LoggedInService } from "@shared/services/loggedin.service";
 export class AppComponent {
   title = "OS2IoT-frontend";
   isLoggedIn = true;
-
-  isNavVisible = false;
+  isNavVisible = true;
 
   onNavToggle(isVisible: boolean) {
     this.isNavVisible = isVisible;

src/app/navbar/navbar.component.html

@@ -1,8 +1,7 @@
 <nav
-  class="navbar navbar-expand-md navbar-light d-md-flex align-items-md-start flex-md-column p-3"
+  class="navbar-container navbar navbar-expand-md navbar-light d-md-flex align-items-md-start flex-md-column p-3"
   aria-expanded="false"
-  *ngIf="isVisible"
-  [@navAnimation]
+  [class.nav-visible]="isVisible"
 >
   <img class="img-logo" alt="OS2IoT-logo" [src]="imagePath" />
 
@@ -140,13 +139,8 @@
       </ul>
     </div>
   </ng-template>
-  <div class="toggle-button hide-button" (click)="toggleNavbar()">
-    <mat-icon class="icon-arrow-nav" svgIcon="nav-arrow"></mat-icon>
-  </div>
 </nav>
 
-@if(!isVisible){
-<div class="toggle-button show-button" (click)="toggleNavbar()">
+<div [class.nav-visible-button]="isVisible" class="toggle-button" (click)="toggleNavbar()">
   <mat-icon class="icon-arrow-nav rotate" svgIcon="nav-arrow"></mat-icon>
 </div>
-}

src/app/navbar/navbar.component.scss

@@ -116,26 +116,19 @@ button:focus,
   }
 }
 
-.hide-button {
-  right: 0px;
-  padding-left: 2px;
-  border-radius: 5px 0 0 5px;
-}
-
-.show-button {
-  border-radius: 0 5px 5px 0;
-  padding-right: 2px;
-}
-
 .toggle-button {
   top: 50%;
   position: absolute;
   width: 18px;
   height: 40px;
+  left: 0px;
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: $color-neutral-200;
+  padding: 0 2px 0 0;
+  border-radius: 0 5px 5px 0;
+  transition: left 0.3s ease-in-out, border-radius 0.3s ease-in-out;
 
   &:hover {
     background-color: $color-link-active-bg;
@@ -144,24 +137,40 @@ button:focus,
   &:hover .icon-arrow-nav {
     color: $white;
   }
-}
 
-.rotate {
-  transform: rotate(180deg);
+  &.nav-visible-button {
+    border-radius: 5px 0 0 5px;
+    left: 248px;
+    padding: 0 0 0 2px;
+    .icon-arrow-nav {
+      transform: rotate(0deg);
+    }
+  }
 }
 
 .icon-arrow-nav {
   color: $default-color;
   height: 40px;
   width: 10px;
+  transform: rotate(180deg);
 }
 
 @media (max-width: 768px) {
   .icon-arrow-nav,
   .toggle-button,
   .show-button,
-  .hide-button,
-  .rotate {
+  .hide-button {
     display: none;
   }
 }
+
+.navbar-container {
+  transform: translateX(-100%);
+  opacity: 0;
+  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
+
+  &.nav-visible {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}

src/app/navbar/navbar.component.ts

@@ -1,4 +1,3 @@
-import { animate, state, style, transition, trigger } from "@angular/animations";
 import { Component, EventEmitter, OnInit, Output } from "@angular/core";
 import { MatIconRegistry } from "@angular/material/icon";
 import { DomSanitizer } from "@angular/platform-browser";
@@ -20,35 +19,6 @@ import { UserResponse } from "./../admin/users/user.model";
   selector: "app-navbar",
   templateUrl: "./navbar.component.html",
   styleUrls: ["./navbar.component.scss"],
-  animations: [
-    trigger("navAnimation", [
-      state(
-        "void",
-        style({
-          transform: "translateX(-100%)",
-          opacity: 0,
-        })
-      ),
-      transition(":enter", [
-        animate(
-          "0.3s ease-out",
-          style({
-            transform: "translateX(0)",
-            opacity: 1,
-          })
-        ),
-      ]),
-      transition(":leave", [
-        animate(
-          "0.3s ease-in",
-          style({
-            transform: "translateX(-100%)",
-            opacity: 0,
-          })
-        ),
-      ]),
-    ]),
-  ],
 })
 export class NavbarComponent implements OnInit {
   public organisations: Organisation[];