Added image modal

client/src/components/Sidebar.svelte

@@ -1,22 +1,66 @@
 <script>
   import { Link } from "svelte-routing";
+  import { createEventDispatcher } from "svelte";
+
   export let menuOpen = false;
+  const dispatch = createEventDispatcher();
+
+  // Menü öğesine tıklanınca sidebar'ı kapat
+  function handleLinkClick() {
+    dispatch("closeMenu");
+  }
 </script>
 
 <div class="sidebar" class:open={menuOpen}>
   <div class="logo">du.pe</div>
+
   <div class="menu">
-    <Link to="/" class="item" getProps={({ isCurrent }) => ({ class: isCurrent ? "item active" : "item" })}>
-      <i class="fa-solid fa-folder icon"></i> Files
+    <Link
+      to="/"
+      class="item"
+      getProps={({ isCurrent }) => ({
+        class: isCurrent ? "item active" : "item",
+      })}
+      on:click={handleLinkClick}
+    >
+      <i class="fa-solid fa-folder icon"></i>
+      Files
     </Link>
-    <Link to="/transfers" class="item" getProps={({ isCurrent }) => ({ class: isCurrent ? "item active" : "item" })}>
-      <i class="fa-solid fa-arrow-down icon"></i> Transfers
+
+    <Link
+      to="/transfers"
+      class="item"
+      getProps={({ isCurrent }) => ({
+        class: isCurrent ? "item active" : "item",
+      })}
+      on:click={handleLinkClick}
+    >
+      <i class="fa-solid fa-arrow-down icon"></i>
+      Transfers
     </Link>
-    <Link to="/sharing" class="item" getProps={({ isCurrent }) => ({ class: isCurrent ? "item active" : "item" })}>
-      <i class="fa-solid fa-share-nodes icon"></i> Sharing
+
+    <Link
+      to="/sharing"
+      class="item"
+      getProps={({ isCurrent }) => ({
+        class: isCurrent ? "item active" : "item",
+      })}
+      on:click={handleLinkClick}
+    >
+      <i class="fa-solid fa-share-nodes icon"></i>
+      Sharing
     </Link>
-    <Link to="/trash" class="item" getProps={({ isCurrent }) => ({ class: isCurrent ? "item active" : "item" })}>
-      <i class="fa-solid fa-trash icon"></i> Trash
+
+    <Link
+      to="/trash"
+      class="item"
+      getProps={({ isCurrent }) => ({
+        class: isCurrent ? "item active" : "item",
+      })}
+      on:click={handleLinkClick}
+    >
+      <i class="fa-solid fa-trash icon"></i>
+      Trash
     </Link>
   </div>
 </div>

client/src/components/Topbar.svelte

@@ -1,15 +1,20 @@
 <script>
-  import { createEventDispatcher } from "svelte";
+  import { createEventDispatcher, onMount } from "svelte";
   const dispatch = createEventDispatcher();
 
   let search = "";
   export let placeholder = "Search files...";
+
   const onToggle = () => dispatch("toggleMenu");
 </script>
 
 <div class="topbar">
-  <!-- Mobilde görünen hamburger -->
-  <button class="menu-toggle" on:click={onToggle} aria-label="Toggle menu">
+  <!-- 🔹 Hamburger butonu sadece küçük ekranlarda gösterilir -->
+  <button
+    class="menu-toggle"
+    on:click={onToggle}
+    aria-label="Toggle menu"
+  >
     <i class="fa-solid fa-bars"></i>
   </button>
 
@@ -18,3 +23,51 @@
     <input placeholder={placeholder} bind:value={search} />
   </div>
 </div>
+
+<style>
+  .topbar {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 16px;
+    border-bottom: 1px solid var(--border);
+  }
+
+  .search {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    background: #f8f8f8;
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    padding: 8px 12px;
+  }
+
+  .search input {
+    border: none;
+    outline: none;
+    background: transparent;
+    flex: 1;
+  }
+
+  /* 🟡 Hamburger sadece küçük ekranlarda görünsün */
+  .menu-toggle {
+    display: none;
+    background: none;
+    border: none;
+    font-size: 20px;
+    color: #333;
+    cursor: pointer;
+  }
+
+  @media (max-width: 768px) {
+    .menu-toggle {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 36px;
+      height: 36px;
+    }
+  }
+</style>