memory page header, floating button

src/lib/components/Button.svelte

@@ -51,4 +51,16 @@
         background-color: var(--gray-100);
         color: var(--gray-600);
     }
+
+    .memory {
+        background-color: var(--memory-500);
+        color: var(--white);
+        font-weight: 600;
+    }
+
+    .memory:hover {
+        background-color: var(--memory-400);
+        color: var(--white);
+        font-weight: 600;
+    }
   </style>  

src/lib/components/Nav.svelte

@@ -4,6 +4,7 @@
 
     let title = "Travel App";
     export let activeTab = "Home";
+    export let darkMode = false;
 
     /**
      * 
@@ -15,13 +16,15 @@
             goto('/');
         } else if (tab === 'Planner') {
             goto('/trips');
+        } else if (tab === 'Memory') {
+            goto('/memories');
         } else {
             console.log("will be implemented later");
         }
     }
 </script>
 
-<nav>
+<nav class:dark-mode={darkMode}>
     <div class="logo">{title}</div>
     <div class="right-nav">
         <div class="menu">
@@ -43,7 +46,7 @@
         </div>
         <div class="profile">
             <button class="profile-btn" aria-label="Open profile">
-                <i class="fa-regular fa-user fa-xl" style="color: {Colors.black}"></i>
+                <i class="fa-regular fa-user fa-xl"></i>
             </button>
         </div>
     </div>
@@ -55,7 +58,7 @@
         justify-content: space-between;
         align-items: center;
         padding: 1rem 2rem;
-        border-bottom: 1px solid var(--gray-100);
+        border-bottom: 1px solid var(--gray-200);
         background-color: var(--white);
     }
 
@@ -111,4 +114,38 @@
         background-color: var(--gray-100);
         opacity: 1;
     }
+
+    nav.dark-mode {
+        background-color: var(--black);
+        border-bottom: 1px solid var(--gray-200);
+    }
+
+    nav.dark-mode .menu button {
+        color: var(--gray-400);
+    }
+
+    nav.dark-mode .menu button:hover {
+        color: var(--white);
+    }
+
+    nav.dark-mode .menu button.active {
+        color: var(--white);
+        font-weight: 600;
+    }
+
+    nav.dark-mode .profile-btn {
+        background-color: var(--black);
+    }
+
+    nav.dark-mode .profile-btn:hover {
+        background-color: var(--gray-700);
+    }
+
+    nav .profile-btn i {
+        color: var(--black);
+    }
+
+    nav.dark-mode .profile-btn i {
+        color: var(--white);
+    }
 </style>