[#23] synchronize sidenav & toolbar

philipphoeninger · Oct 9, 2024 · a346e21 · a346e21
1 parent 10ab8b5
commit a346e21
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 9 deletions.
diff --git a/CLIENT/CLIENT.FileSharing/src/app/app.component.html b/CLIENT/CLIENT.FileSharing/src/app/app.component.html
@@ -177,13 +177,9 @@
   }
 </style>
 
-<main class="main">
-  <div class="content">
-    <div class="left-side">
-      <h1>Hello, {{ title }}</h1>
-      <p>Congratulations! Your app is running. 🎉</p>
-    </div>
-  </div>
+<main id="main">
+  <fs-toolbar></fs-toolbar>
+  <fs-navbar></fs-navbar>
 </main>
 
 <router-outlet />
diff --git a/CLIENT/CLIENT.FileSharing/src/app/app.component.scss b/CLIENT/CLIENT.FileSharing/src/app/app.component.scss
@@ -0,0 +1,15 @@
+#main {
+  fs-navbar {
+    display: none;
+  }
+}
+
+/* -- MEDIA -- */
+
+@media (min-width: 48em) {
+  #main {
+    fs-navbar {
+      display: block;
+    }
+  }
+}
diff --git a/CLIENT/CLIENT.FileSharing/src/app/app.component.ts b/CLIENT/CLIENT.FileSharing/src/app/app.component.ts
@@ -1,12 +1,14 @@
 import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
+import { NavbarComponent } from './navigation/navbar/navbar.component';
+import { ToolbarComponent } from './navigation/toolbar/toolbar.component';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet],
+  imports: [RouterOutlet, NavbarComponent, ToolbarComponent],
   templateUrl: './app.component.html',
-  styleUrl: './app.component.scss'
+  styleUrl: './app.component.scss',
 })
 export class AppComponent {
   title = 'CLIENT.FileSharing';