From 81bbfab569de4a5cfbc239a329e4e307ed56e4b9 Mon Sep 17 00:00:00 2001
From: Manuel Thalmann <m@nuth.ch>
Date: Fri, 15 Mar 2024 10:52:34 +0100
Subject: [PATCH] Solve navigation bar task

---
 Tasks/Task 01/navibar/navibar.html | 16 ++++++++++++++++
 Tasks/Task 01/navibar/navibar.js   |  7 +++++--
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/Tasks/Task 01/navibar/navibar.html b/Tasks/Task 01/navibar/navibar.html
index f29f38c..5bf1e9e 100644
--- a/Tasks/Task 01/navibar/navibar.html	
+++ b/Tasks/Task 01/navibar/navibar.html	
@@ -6,6 +6,21 @@
   <title>Navibar Demo</title>
   
   <script src="navibar.js"></script>
+
+  <navigation-bar>
+    <a href="#home">
+      <img src="./imgs/home.png" />
+    </a>
+    <a href="#sitemap">
+      <img src="./imgs/map.png" />
+    </a>
+    <a href="#buy-coffee">
+      <img src="./imgs/coffee.png" />
+    </a>
+    <a href="#settings">
+      <img src="./imgs/settings.png" />
+    </a>
+  </navigation-bar>
   
   <style>
     
@@ -23,6 +38,7 @@
 
     navigation-bar a img {
       opacity: 0.3;
+      height: 100%;
       /* ... */
     }
 
diff --git a/Tasks/Task 01/navibar/navibar.js b/Tasks/Task 01/navibar/navibar.js
index 4095376..02b44c3 100644
--- a/Tasks/Task 01/navibar/navibar.js	
+++ b/Tasks/Task 01/navibar/navibar.js	
@@ -6,14 +6,17 @@ class CustomNavigationBar extends HTMLElement {
         <style>   
           div.navibar {
             align-items: center;
+            display: flex;
+            flex-wrap: nowrap;
+            justify-content: space-around;
             background-color: #ccc;
             margin: 0;
             width: 100%;
-            height: 100%;
           }
           ::slotted(a) {
-            display: block;
             text-align: center;
+            margin: 10px;
+            height: 10vh;
          }
         </style>
         <div class="navibar">