From 159e86a6f4486d2a139eadccccc72e9e98117b13 Mon Sep 17 00:00:00 2001
From: Osman Coskun <osman.coskun95@gmail.com>
Date: Wed, 16 Oct 2024 14:12:32 +0300
Subject: [PATCH] fix(mobile): responsive design mobile mode

---
 src/lib/layout/header.svelte     |  5 +++--
 src/lib/layout/navigation.svelte | 16 +++++++++-------
 src/routes/download/index.svelte |  2 +-
 3 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/lib/layout/header.svelte b/src/lib/layout/header.svelte
index 95267ee..750d735 100644
--- a/src/lib/layout/header.svelte
+++ b/src/lib/layout/header.svelte
@@ -3,7 +3,7 @@
   let routes = ["download", "contact", "wiki"];
 </script>
 
-<div class="navbar bg-base-100 shadow-lg rounded-lg">
+<div class="navbar bg-base-100 shadow-md rounded-lg">
   <ul class="flex-1 menu menu-horizontal">
     <li>
       <a
@@ -39,9 +39,10 @@
             ></path></svg
           >
         </div>
+        <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
         <ul
           tabindex="0"
-          class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box"
+          class="dropdown-content z-[1] menu p-2 shadow-md bg-base-100 rounded-box"
         >
           {#each routes as route}
             <li class="block md:hidden capitalize">
diff --git a/src/lib/layout/navigation.svelte b/src/lib/layout/navigation.svelte
index 0eed9eb..b45cd86 100644
--- a/src/lib/layout/navigation.svelte
+++ b/src/lib/layout/navigation.svelte
@@ -23,13 +23,15 @@
     <label for="my-drawer" aria-label="close sidebar" class="drawer-overlay"
     ></label>
     <ul class="menu menu-xs h-screen bg-base-200 max-w-xs w-full border-right">
-      <li class="flex-1">
-        {#if urls?.length > 0}
-          {#each urls as url}
-            <WikiLink NodeURLs={url} />
-          {/each}
-        {/if}
-      </li>
+      <div class="h-[calc(100vh-4rem)] overflow-y-auto">
+        <li class="md:flex-1">
+          {#if urls?.length > 0}
+            {#each urls as url}
+              <WikiLink NodeURLs={url} />
+            {/each}
+          {/if}
+        </li>
+      </div>
       <li>
         <a href="/" class="w-full flex justify-center btn btn-info">
           <IconArrowBackUp class="w-5 h-5" />
diff --git a/src/routes/download/index.svelte b/src/routes/download/index.svelte
index 56e78ba..191551a 100644
--- a/src/routes/download/index.svelte
+++ b/src/routes/download/index.svelte
@@ -8,7 +8,7 @@
 <main class="mt-10">
   <div class="w-full grid grid-cols-1 md:grid-cols-2 gap-5">
     {#each DownloadPageData as data}
-      <div class="card card-body shadow-xl rounded-md dark:bg-slate-800">
+      <div class="card card-body shadow-md rounded-md dark:bg-slate-800">
         <h1 class="font-bold text-xl">{data.label}</h1>
         <h1>ISO Files</h1>
         {#each data.iso as iso, isoindex}