Sync progress

src/routes/+page.svelte

@@ -26,33 +26,84 @@
   });
 </script>
 
-<main class="grid h-screen w-full grid-cols-5 overflow-hidden bg-zinc-200/50 tracking-tight">
-  <aside class="col-span-1 flex flex-col border-r bg-zinc-100">
-    <div class="border-b border-zinc-200 bg-white p-4">
-      <p class="mt-2 mb-2 text-center text-xl font-bold tracking-widest text-zinc-800 uppercase">
-        Rota
-      </p>
+<main
+  class="grid h-screen w-full grid-cols-5 overflow-hidden bg-zinc-200/50 font-sans tracking-tight antialiased"
+>
+  <aside
+    class="col-span-1 flex flex-col border-r border-zinc-200 bg-zinc-50/50 font-sans antialiased"
+  >
+    <div class="flex justify-center border p-3 font-sans">
+      <h1 class="text-xl font-black tracking-tight uppercase">Rota Scheduler</h1>
     </div>
 
-    <nav class="flex flex-1 flex-col">
-      {#each steps as step}
-        <button
-          onclick={() => (rota.currentStep = step.id)}
-          class="flex flex-1 flex-col justify-center border-b border-zinc-800/20 px-8 transition-all last:border-b-0
-        {rota.currentStep === step.id
-            ? 'bg-blue-900/50 text-white'
-            : 'text-zinc-500 hover:bg-zinc-800/50'}"
-        >
-          <span class="text-xs font-bold uppercase">ΒΗΜΑ {step.id}</span>
-          <span class="font-medium">{step.title}</span>
-        </button>
-      {/each}
-      <div class="border-t border-zinc-200 bg-white p-4">
-        <p class="text-center text-[10px] font-bold tracking-widest text-zinc-500 uppercase">
-          v1.0.0-Beta
-        </p>
+    <nav class="relative flex-1 p-6">
+      <div class="absolute top-10 bottom-10 left-9.75 w-0.5 bg-zinc-200"></div>
+
+      <div class="relative flex h-full flex-col justify-between">
+        {#each steps as step}
+          <button
+            onclick={() => (rota.currentStep = step.id)}
+            class="group relative z-10 flex items-center gap-4 py-4 transition-all"
+          >
+            <div
+              class="flex size-8 items-center justify-center rounded-full border-2 transition-all duration-300
+            {rota.currentStep === step.id
+                ? 'bg-slate-800 text-white'
+                : rota.currentStep > step.id
+                  ? 'bg-emerald-600 text-white'
+                  : 'bg-white text-zinc-400'}"
+            >
+              {#if rota.currentStep > step.id}
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="size-4"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  stroke-width="3"
+                >
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
+                </svg>
+              {:else}
+                <span class="text-xs font-bold">{step.id}</span>
+              {/if}
+            </div>
+
+            <div class="flex flex-col items-start">
+              <span
+                class="text-[10px] font-bold tracking-widest uppercase
+              {rota.currentStep === step.id ? 'text-black-800' : 'text-zinc-400'}"
+              >
+                ΒΗΜΑ {step.id}
+              </span>
+              <span
+                class="text-sm font-bold tracking-tight
+              {rota.currentStep === step.id ? 'text-zinc-900' : 'text-zinc-500'}"
+              >
+                {step.title}
+              </span>
+            </div>
+          </button>
+        {/each}
       </div>
     </nav>
+
+    <div class="border-t border-zinc-200 bg-white p-6">
+      <div class="rounded-xl border border-zinc-100 bg-zinc-50 p-4">
+        <div class="mb-2 flex items-center justify-between">
+          <span class="text-[10px] font-bold text-zinc-500 uppercase">ΟΛΟΚΛΗΡΩΣΗ</span>
+          <span class="text-[10px] font-bold text-zinc-500"
+            >{(((rota.currentStep - 1) / (steps.length - 1)) * 100).toFixed(0)}%</span
+          >
+        </div>
+        <div class="h-1.5 w-full overflow-hidden rounded-full bg-zinc-200">
+          <div
+            class="h-full bg-emerald-600 transition-all duration-500"
+            style="width: {(rota.currentStep / steps.length) * 100}%"
+          ></div>
+        </div>
+      </div>
+    </div>
   </aside>
 
   <section class="col-span-4 flex flex-col overflow-y-auto p-12">