Show menu on first visit, and remember last state

Author: vbakke

src/app/app.component.css

@@ -2,21 +2,34 @@
 .main-container {
   width: 100%;
   height: 100%;
-  /*border: 10px solid yellow;*/
 }
 
 .sidenav-content {
   display: flex;
   padding: 10px;
-  align-items: left;
-  justify-content: left;
-  /*background-color: red;*/
+  justify-content: space-between;
 }
 
-.example-sidenav {
+.sidenav-menu {
   padding: 20px;
 }
 
+.menu-close {
+  position: absolute;
+  right: 0;
+  top: 2px;
+  background: transparent;
+  border: 0;
+  color: #ddd;
+}
+
 .github-fork-ribbon:before {
   background-color: #333;
 }
+
+@media only screen and (max-width: 750px) {
+    .github-fork-ribbon {
+        display: none;
+      }
+    
+}

src/app/app.component.html

@@ -1,11 +1,18 @@
 <mat-drawer-container class="main-container" autosize>
-  <mat-drawer #drawer class="example-sidenav" mode="side">
+  <mat-drawer
+    #drawer
+    class="sidenav-menu"
+    mode="side"
+    opened="{{ menuIsOpen }}">
+    <button class="menu-close" (click)="toggleMenu()">
+      <mat-icon class="white-icon">close</mat-icon>
+    </button>
     <a routerLink="/"><app-logo></app-logo></a>
     <app-sidenav-buttons></app-sidenav-buttons>
   </mat-drawer>
 
   <div class="sidenav-content">
-    <button type="button" mat-button (click)="drawer.toggle()" color="primary">
+    <button type="button" mat-button (click)="toggleMenu()" color="primary">
       <mat-icon>menu</mat-icon>
     </button>
     <a

src/app/app.component.ts

@@ -1,10 +1,25 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
   title = 'DSOMM';
+  menuIsOpen: boolean = true;
+
+  ngOnInit(): void {
+    let menuState: string | null = localStorage.getItem('state.menuIsOpen');
+    if (menuState === 'false') {
+      setTimeout(() => {
+        this.menuIsOpen = false;
+      }, 600);
+    }
+  }
+
+  toggleMenu(): void {
+    this.menuIsOpen = !this.menuIsOpen;
+    localStorage.setItem('state.menuIsOpen', this.menuIsOpen.toString());
+  }
 }