basic bootstrap

src/app/app.component.html

@@ -1,9 +1,25 @@
-<h1>Home NAS Landing</h1>
-<nav>
-  <ul>
-    <li><a routerLink="/list-links" routerLinkActive="active" ariaCurrentWhenActive="page">Internal Links</a></li>
-    <!-- <li><a routerLink="/second-component" routerLinkActive="active" ariaCurrentWhenActive="page">Second Component</a></li> -->
-  </ul>
+<nav class="navbar navbar-expand-lg bg-body-tertiary" >
+  <div class="container-fluid">
+    <a class="navbar-brand" href="hallo">Navbar</a>
+    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="collapse navbar-collapse" id="navbarNavAltMarkup" data-bs-theme="dark">
+      <div class="navbar-nav">
+
+        <a class="nav-link" routerLink="/list-links" routerLinkActive="active" ariaCurrentWhenActive="page">Internal Links</a>
+
+
+      </div>
+    </div>
+  </div>
 </nav>
+<div class="container-fluid text-center">
 <!-- The routed views render in the <router-outlet>-->
-<router-outlet></router-outlet>
+  <router-outlet></router-outlet>
+</div>
+
+
+<footer class="container-fluid text-center">
+  <p>Footer Text</p>
+</footer>

src/app/list-links/list-links.component.html

@@ -1,7 +1,2 @@
-<mat-grid-list cols="2" rowHeight="2:1">
-  <mat-grid-tile>1</mat-grid-tile>
-  <mat-grid-tile>2</mat-grid-tile>
-  <mat-grid-tile>3</mat-grid-tile>
-  <mat-grid-tile>4</mat-grid-tile>
-</mat-grid-list>
+<p>works</p>
 

src/styles.css

@@ -2,3 +2,34 @@
 
 html, body { height: 100%; }
 body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
+ /* Remove the navbar's default margin-bottom and rounded borders */
+ .navbar {
+  margin-bottom: 0;
+  border-radius: 0;
+}
+
+/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
+.row.content {height: 450px}
+
+/* Set gray background color and 100% height */
+.sidenav {
+  padding-top: 20px;
+  background-color: #f1f1f1;
+  height: 100%;
+}
+
+/* Set black background color, white text and some padding */
+footer {
+  background-color: #555;
+  color: white;
+  padding: 15px;
+}
+
+/* On small screens, set height to 'auto' for sidenav and grid */
+@media screen and (max-width: 767px) {
+  .sidenav {
+    height: auto;
+    padding: 15px;
+  }
+  .row.content {height:auto;}
+}