add dropdown + change pages

src/lib/components/MemoryCard.svelte

@@ -0,0 +1,70 @@
+<script>
+  export let destination = '';
+  export let startDate = '';
+  export let endDate = '';
+  export let image = '';
+</script>
+
+<div class="memory-card">
+  <div class="image" style="background-image: url({image})">
+      <!-- Image placeholder if no image provided -->
+      {#if !image}
+          <div class="placeholder">
+              <i class="fa-solid fa-image" style="color: var(--gray-800)"></i>
+          </div>
+      {/if}
+  </div>
+  <div class="info">
+      <h3>{destination}</h3>
+      <p class="date">{startDate} - {endDate}</p>
+  </div>
+</div>
+
+<style>
+  .memory-card {
+      background: var(--black);
+      border-radius: 12px;
+      overflow: hidden;
+      box-shadow: 0 2px 4px rgba(255, 255, 255, 0.1);
+      transition: transform 0.2s ease, box-shadow 0.2s ease;
+      cursor: pointer;
+      font-family: 'Inter', sans-serif;
+      color: var(--white);
+  }
+
+  .memory-card:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1);
+  }
+
+  .image {
+      height: 160px;
+      background-size: cover;
+      background-position: center;
+      background-color: var(--gray-900);
+  }
+
+  .placeholder {
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 2rem;
+  }
+
+  .info {
+      padding: 1rem;
+  }
+
+  .info h3 {
+      margin: 0;
+      font-size: 1.2rem;
+      font-weight: 600;
+  }
+
+  .date {
+      margin: 0.25rem 0 0 0;
+      font-size: 0.8rem;
+      color: var(--gray-400);
+  }
+</style> 

src/lib/components/Nav.svelte

@@ -1,37 +1,48 @@
 <script>
     import { goto } from '$app/navigation';
+    import { onMount } from 'svelte';
+
+    onMount(() => {
+        const handleClickOutside = (e) => {
+            if (!e.target.closest('.profile')) {
+                showDropdown = false;
+            }
+        };
+        document.addEventListener('click', handleClickOutside);
+        return () => document.removeEventListener('click', handleClickOutside);
+    });
 
     let title = "Travel App";
-    export let activeTab = "Home";
+    export let activeTab = "Planner";
     export let darkMode = false;
 
+    let showDropdown = false;
+
     /**
      * 
      * @param tab {string}
      */
     function handleNavigation(tab) {
         activeTab = tab;
-        if (tab === 'Home') {
+       if (tab === 'Planner') {
             goto('/');
-        } else if (tab === 'Planner') {
-            goto('/trips');
         } else if (tab === 'Memory') {
             goto('/memories');
+        } else if (tab === 'MyTrip') {
+            goto('/trips');
+        }  else if (tab === 'MyMemory') {
+            goto('/mymemory');
         } else {
             console.log("will be implemented later");
         }
     }
+
 </script>
 
 <nav class:dark-mode={darkMode}>
     <div class="logo">{title}</div>
     <div class="right-nav">
         <div class="menu">
-            <button 
-                class:active={activeTab === "Home"} 
-                onclick={() => handleNavigation("Home")}>
-                Home
-            </button>
             <button 
                 class:active={activeTab === "Planner"} 
                 onclick={() => handleNavigation("Planner")}>
@@ -43,10 +54,20 @@
                 Memory
             </button>
         </div>
-        <div class="profile">
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <div class="profile"
+            onmouseenter={() => showDropdown = true}
+            onmouseleave={() => showDropdown = false}>
             <button class="profile-btn" aria-label="Open profile">
                 <i class="fa-regular fa-user fa-xl"></i>
             </button>
+            {#if showDropdown}
+                <div class="dropdown">
+                    <button onclick={() => handleNavigation("MyTrip")}>My Trips</button>
+                    <button onclick={() => handleNavigation("MyMemory")}>My Memories</button>
+                    <button>Log out</button>
+                </div>
+            {/if}
         </div>
     </div>
 </nav>
@@ -114,11 +135,59 @@
         opacity: 1;
     }
 
+    .dropdown {
+        position: absolute;
+        top: 3.5rem;
+        right: 2rem;
+        background: var(--white);
+        border: 1px solid var(--gray-200);
+        border-radius: 0.5rem;
+        padding: 0.5rem 0;
+        z-index: 999;
+        display: flex;
+        flex-direction: column;
+        min-width: 150px;
+    }
+
+    .dropdown button {
+        background: none;
+        border: none;
+        padding: 0.75rem 1rem;
+        font-size: 0.9rem;
+        text-align: left;
+        color: var(--black);
+        cursor: pointer;
+        transition: background 0.2s ease;
+    }
+
+    .dropdown button:hover {
+        background-color: var(--gray-100);
+    }
+
+    nav.dark-mode .dropdown {
+        background: var(--gray-900);
+        border: 1px solid var(--gray-700);
+    }
+
+    nav.dark-mode .dropdown button {
+        color: var(--white);
+    }
+
+    nav.dark-mode .dropdown button:hover {
+        background-color: var(--gray-800);
+    }
+
     nav.dark-mode {
         background-color: var(--black);
         border-bottom: 1px solid var(--gray-200);
     }
 
+    nav.dark-mode .logo {
+        font-size: 1.5rem;
+        font-weight: bold;
+        color: var(--white);
+    }
+
     nav.dark-mode .menu button {
         color: var(--gray-400);
     }

src/lib/components/NewMemoryPopup.svelte

@@ -66,6 +66,10 @@
         return selectedLocation === 'custom';
     }
 
+    function removeImage(imageToRemove: File) {
+        images = images.filter(img => img !== imageToRemove);
+    }
+
     let showLocationError = false;
     let showImageError = false;
 
@@ -155,6 +159,7 @@
                             <div class="preview-list">
                                 {#each images as img}
                                     <div class="preview-item">
+                                        <button class="delete-button" on:click={() => removeImage(img)}>×</button>
                                         <img src={URL.createObjectURL(img)} alt={img.name} />
                                         <p>{img.name}</p>
                                     </div>
@@ -286,6 +291,7 @@
     }
 
     .preview-item {
+        position: relative;
         width: 80px;
         display: flex;
         flex-direction: column;
@@ -305,6 +311,22 @@
         color: var(--gray-400);
     }
 
+    .delete-button {
+        position: absolute;
+        top: 4px;
+        right: 4px;
+        background: rgba(38, 38, 38, 0.5);
+        border: none;
+        color: var(--white);
+        border-radius: 50%;
+        width: 18px;
+        height: 18px;
+        font-size: 0.9rem;
+        cursor: pointer;
+        z-index: 2;
+    }
+
+
     .drop-area {
         width: 100%;
         min-height: 120px;

src/routes/+page.svelte

@@ -17,7 +17,7 @@
 </script>
 
 <main>
-  <Nav activeTab="Home" />
+  <Nav activeTab="Planner" />
 
   <div class="map-container">
       <WorldMap />

src/routes/mymemory/+page.svelte

@@ -0,0 +1,124 @@
+<script lang="ts">
+  import '../../app.css';
+  import MemoryCard from '$lib/components/MemoryCard.svelte';
+  import Button from '$lib/components/Button.svelte';
+  import NewMemoryPopup from '$lib/components/NewMemoryPopup.svelte';
+  import Nav from '$lib/components/Nav.svelte';
+  
+  interface Trip {
+      destination: string;
+      startDate: string;
+      endDate: string;
+      imageUrl: string;
+  }
+
+  let showNewMemoryPopup = false;
+  let contentContainer: HTMLElement;
+  
+  // Sample data, replace with actual data later
+  const sample_memories = {
+      destination: "Taiwan",
+      startDate: "04.27.2025",
+      endDate: "04.30.2025",
+      imageUrl: ""
+  }
+  let pastMemories = Array(3).fill(sample_memories);
+
+  function handleNewMemory() {
+      showNewMemoryPopup = true;
+  }
+</script>
+
+<main>
+  <Nav activeTab="MyMemory" darkMode={true}/>
+
+  <div class="content" bind:this={contentContainer}>
+      <div class="header">
+          <h1>My Memories</h1>
+      </div>
+
+      <div class="memories-container">
+            {#if pastMemories.length === 0}
+                <div class="empty-state">
+                    <p>There is no past trip</p>
+                </div>
+            {:else}
+                <div class="memories-grid">
+                    {#each pastMemories as memory}
+                        <MemoryCard {...memory} />
+                    {/each}
+                </div>
+            {/if}
+      </div>
+
+      <div class="floating-button">
+          <Button text="+ Add a new memory" type="memory" onClick={handleNewMemory} />
+      </div>
+  </div>
+
+  <NewMemoryPopup bind:showPopup={showNewMemoryPopup} fromPage="memories" />
+</main>
+
+<style>
+  main {
+      height: 100vh;
+      background-color: var(--black);
+      font-family: 'Inter', sans-serif;
+      display: flex;
+      flex-direction: column;
+  }
+
+  .content {
+      flex: 1;
+      padding: 0 1rem 2rem 1rem;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      overflow-y: auto;
+  }
+
+  .header {
+      padding-top: 2rem;
+      padding-left: 1rem;
+      background-color: var(--black);
+  }
+
+  .header h1 {
+      font-size: 2rem;
+      font-weight: 600;
+      margin: 0;
+      color: var(--white);
+  }
+
+  .memories-container {
+      flex: 1;
+      padding: 0 1rem;
+      display: flex;
+      flex-direction: column;
+  }
+
+  .memories-grid {
+      display: grid;
+      padding-top: 1.5rem;
+      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+      gap: 1.5rem;
+  }
+
+  .empty-state {
+      flex: 1;
+      display: flex;
+      margin-top: -10rem;
+      justify-content: center;
+      align-items: center;
+      color: var(--gray-400);
+      font-size: 1.1rem;
+  }
+
+  .floating-button {
+      position: fixed;
+      bottom: 2rem;
+      right: 2rem;
+      z-index: 10;
+  }
+</style> 

src/routes/trips/+page.svelte

@@ -42,11 +42,11 @@
 </script>
 
 <main>
-    <Nav activeTab="Planner" />
+    <Nav activeTab="MyTrip" />
 
     <div class="content" bind:this={contentContainer}>
         <div class="header">
-            <h1>Your Trips</h1>
+            <h1>My Trips</h1>
         </div>
 
         <div class="tabs">