Root navigation bar

Roger-random · Feb 25, 2023 · 6715114 · 6715114
1 parent 420b7c0
commit 6715114
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/src/app/app.component.css b/src/app/app.component.css
@@ -1,11 +1,17 @@
 /* AppComponent's private CSS styles */
+nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #f4f4f4;
+}
+
 h1 {
-  margin-bottom: 0;
+  margin: 0;
 }
 nav a {
   padding: 1rem;
   text-decoration: none;
-  margin-top: 10px;
   display: inline-block;
   background-color: #e8e8e8;
   color: #3d3d3d;

diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,7 +1,9 @@
-<h1>{{title}}</h1>
 <nav>
-  <a routerLink="/dashboard">Dashboard</a>
-  <a routerLink="/heroes">Heroes</a>
+  <h1>{{title}}</h1>
+  <div class="links">
+    <a routerLink="/dashboard">Dashboard</a>
+    <a routerLink="/heroes">Heroes</a>
+  </div>
 </nav>
 <router-outlet></router-outlet>
 <app-messages></app-messages>