Add Tailwind CSS and update layout and page styles

src/lib/assets/exportFile.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="17.75" viewBox="0 0 576 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#ffffff" d="M0 64C0 28.7 28.7 0 64 0H224V128c0 17.7 14.3 32 32 32H384V288H216c-13.3 0-24 10.7-24 24s10.7 24 24 24H384V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V64zM384 336V288H494.1l-39-39c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l80 80c9.4 9.4 9.4 24.6 0 33.9l-80 80c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l39-39H384zm0-208H256V0L384 128z"/></svg>

src/lib/components/Navbar.svelte

@@ -1,44 +1,26 @@
-<style>
-    .navbar {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        flex-direction: row;
-    }
-
-    button {
-        margin-left: 1rem;
-        padding: 0.5rem 1rem;
-        border: none;
-        border-radius: 4px;
-        background-color: #076836;
-        color: white;
-        cursor: pointer;
-        transition: background-color 0.3s ease;
-        box-shadow: 0px 2px 5px rgba(0,0,0,0.1);
-    }
-
-    button:hover {
-        background-color: #074b28;
-    }
-</style>
-
 <script lang="ts">
-    function navHome() {
-        window.location.href = '/';
-    
-    }
-    function navLog() {
-        window.location.href = '/log';
-    }
+  import { getNumberOfAdventures } from "../../services/adventureService";
 </script>
-
-
-<div class="navbar">
-
-    <h2>AdventureLog 🗺️</h2>
-    <button on:click={navHome}>Home</button>
-    <button on:click={navLog}>Log</button>
-    <hr>
-    <br>
-</div>
+<div class="navbar bg-base-100">
+    <div class="navbar-start">
+        <button class="btn btn-primary mr-4 ml-2" on:click={() => window.location.href = '/'}>Home</button>
+        <button class="btn btn-primary" on:click={() => window.location.href = '/log'}>My Log</button>
+    </div>
+    <div class="navbar-center">
+      <a class="btn btn-ghost text-xl" href="/">AdventureLog 🗺️</a>
+    </div>
+    <div class="navbar-end">
+      <p>Adventures: {getNumberOfAdventures()} </p>
+      <button class="btn btn-ghost btn-circle">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
+      </button>
+      
+      <button class="btn btn-ghost btn-circle">
+        <div class="indicator">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" /></svg>
+          <span class="badge badge-xs badge-primary indicator-item"></span>
+          
+        </div>
+      </button>
+    </div>
+  </div>