From 900a1fc9bdc5d7a55c920fea5d33054d3db016d0 Mon Sep 17 00:00:00 2001
From: Isaac3105 <isaac.absantos@gmail.com>
Date: Sat, 30 Nov 2024 21:58:20 +0000
Subject: [PATCH 1/6] highlighted the current page item on navebar

---
 .../(app)/_components/layout/navbar.svelte    | 25 ++++++++++++++++---
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/routes/(app)/_components/layout/navbar.svelte b/src/routes/(app)/_components/layout/navbar.svelte
index 21fe4cb7..e7356d72 100644
--- a/src/routes/(app)/_components/layout/navbar.svelte
+++ b/src/routes/(app)/_components/layout/navbar.svelte
@@ -1,3 +1,12 @@
+<script>
+  import { onMount } from 'svelte';
+  let currentUrl = '';
+
+  onMount(() => {
+    currentUrl = window.location.href;
+  });
+</script>
+
 <nav
   class="hidden h-min w-full grid-cols-2 items-center justify-center px-7 py-2 font-raleway text-xs text-white sm:grid sm:text-base"
   aria-label="Navigation Bar"
@@ -9,9 +18,17 @@
     </a>
   </div>
   <div class="flex justify-end gap-7">
-    <a href="#/">Equipa</a>
-    <a href="#/">Projetos</a>
-    <a href="#/">Eventos</a>
-    <a href="#/">Contactos</a>
+    <a class:active={currentUrl === "http://localhost:3000/#/team/"} href="#/team/"><p class = "font-bold">Equipa</p></a>
+    <a class:active={currentUrl === "http://localhost:3000/#/projects/"} href="#/projects/"><p class = "font-bold">Projetos</p></a>
+    <a class:active={currentUrl === "http://localhost:3000/#/events/"} href="#/events/"><p class = "font-bold">Eventos</p></a>
+    <a class:active={currentUrl === "http://localhost:3000/#/contacts/"} href="#/contacts/"><p class = "font-bold">Contactos</p></a>
   </div>
 </nav>
+
+<style>
+  .active {
+    background-color: rgba(116, 20, 20, 0.4);
+    padding: 2px 3px; 
+    border-radius: 4px; 
+    }
+</style>

From 020dacc713e8dfd2120b58f6f0a2ed8785f59dcc Mon Sep 17 00:00:00 2001
From: Isaac Santos <isaac.absantos@gmail.com>
Date: Wed, 4 Dec 2024 16:10:56 +0000
Subject: [PATCH 2/6] Update src/routes/(app)/_components/layout/navbar.svelte

implemented svelvekit functionalities directly

Co-authored-by: Rita Lopes <93883163+MRita443@users.noreply.github.com>
---
 src/routes/(app)/_components/layout/navbar.svelte | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/routes/(app)/_components/layout/navbar.svelte b/src/routes/(app)/_components/layout/navbar.svelte
index e7356d72..d06983f1 100644
--- a/src/routes/(app)/_components/layout/navbar.svelte
+++ b/src/routes/(app)/_components/layout/navbar.svelte
@@ -1,10 +1,7 @@
 <script>
-  import { onMount } from 'svelte';
-  let currentUrl = '';
+  import { page } from '$app/stores';
 
-  onMount(() => {
-    currentUrl = window.location.href;
-  });
+  $: currentPage = $page.url.pathname;
 </script>
 
 <nav

From d1720faa7b9c27849b8edd1948030ea2d4e48740 Mon Sep 17 00:00:00 2001
From: Isaac3105 <isaac.absantos@gmail.com>
Date: Thu, 5 Dec 2024 20:33:32 +0000
Subject: [PATCH 3/6] Implemented a loop for the items in navbar and upgraded
 the highlight style

---
 .../(app)/_components/layout/navbar.svelte    | 24 +++++++++----------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/src/routes/(app)/_components/layout/navbar.svelte b/src/routes/(app)/_components/layout/navbar.svelte
index 96724d49..8fa25994 100644
--- a/src/routes/(app)/_components/layout/navbar.svelte
+++ b/src/routes/(app)/_components/layout/navbar.svelte
@@ -2,6 +2,10 @@
   import { page } from '$app/stores';
 
   $: currentPage = $page.url.pathname;
+  const links = [{href: "/team/", label: "Equipa", pageComp: "/team"},
+  {href: "/projects/", label: "Projects", pageComp: "/projects"},
+  {href: "/events/", label: "Eventos", pageComp: "/events"},
+  {href: "/contacts/", label: "Contactos", pageComp: "/contacts"}];
 </script>
 
 <nav
@@ -15,24 +19,18 @@
     </a>
   </div>
   <div class="flex justify-end gap-7">
-<<<<<<< HEAD
-    <a class:active={currentUrl === "http://localhost:3000/#/team/"} href="#/team/"><p class = "font-bold">Equipa</p></a>
-    <a class:active={currentUrl === "http://localhost:3000/#/projects/"} href="#/projects/"><p class = "font-bold">Projetos</p></a>
-    <a class:active={currentUrl === "http://localhost:3000/#/events/"} href="#/events/"><p class = "font-bold">Eventos</p></a>
-    <a class:active={currentUrl === "http://localhost:3000/#/contacts/"} href="#/contacts/"><p class = "font-bold">Contactos</p></a>
-=======
-    <a href="/#/">Equipa</a>
-    <a href="/#/">Projetos</a>
-    <a href="/#/">Eventos</a>
-    <a href="/contacts">Contactos</a>
->>>>>>> c06cc9d4ec9d3ef94d256019af7eb47b0e9b5b6d
+    {#each links as {href, label, pageComp}} 
+      <a class:active={currentPage === pageComp} href={href}>
+        <p class = "font-bold">{label}</p>
+      </a>
+    {/each}
   </div>
 </nav>
 
 <style>
   .active {
-    background-color: rgba(116, 20, 20, 0.4);
-    padding: 2px 3px; 
+    background-color: theme('colors.muted-red.400');
+    padding: 2px 6px; 
     border-radius: 4px; 
     }
 </style>

From f95208683732aff697011f382cde99044a5fa280 Mon Sep 17 00:00:00 2001
From: Isaac3105 <isaac.absantos@gmail.com>
Date: Thu, 5 Dec 2024 21:07:31 +0000
Subject: [PATCH 4/6] applied lint format

---
 .../(app)/_components/layout/navbar.svelte    | 22 ++++++++++---------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/routes/(app)/_components/layout/navbar.svelte b/src/routes/(app)/_components/layout/navbar.svelte
index 8fa25994..71e14c4f 100644
--- a/src/routes/(app)/_components/layout/navbar.svelte
+++ b/src/routes/(app)/_components/layout/navbar.svelte
@@ -2,10 +2,12 @@
   import { page } from '$app/stores';
 
   $: currentPage = $page.url.pathname;
-  const links = [{href: "/team/", label: "Equipa", pageComp: "/team"},
-  {href: "/projects/", label: "Projects", pageComp: "/projects"},
-  {href: "/events/", label: "Eventos", pageComp: "/events"},
-  {href: "/contacts/", label: "Contactos", pageComp: "/contacts"}];
+  const links = [
+    { href: '/team/', label: 'Equipa', pageComp: '/team' },
+    { href: '/projects/', label: 'Projects', pageComp: '/projects' },
+    { href: '/events/', label: 'Eventos', pageComp: '/events' },
+    { href: '/contacts/', label: 'Contactos', pageComp: '/contacts' }
+  ];
 </script>
 
 <nav
@@ -19,9 +21,9 @@
     </a>
   </div>
   <div class="flex justify-end gap-7">
-    {#each links as {href, label, pageComp}} 
-      <a class:active={currentPage === pageComp} href={href}>
-        <p class = "font-bold">{label}</p>
+    {#each links as { href, label, pageComp }}
+      <a class:active={currentPage === pageComp} {href}>
+        <p class="font-bold">{label}</p>
       </a>
     {/each}
   </div>
@@ -30,7 +32,7 @@
 <style>
   .active {
     background-color: theme('colors.muted-red.400');
-    padding: 2px 6px; 
-    border-radius: 4px; 
-    }
+    padding: 2px 6px;
+    border-radius: 4px;
+  }
 </style>

From 98407001c345de8b6afb725a1295fb20446fd7ba Mon Sep 17 00:00:00 2001
From: Isaac3105 <isaac.absantos@gmail.com>
Date: Fri, 6 Dec 2024 17:26:40 +0000
Subject: [PATCH 5/6] tried to fix the storybook problem

---
 src/routes/(app)/_components/layout/navbar.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/routes/(app)/_components/layout/navbar.svelte b/src/routes/(app)/_components/layout/navbar.svelte
index 71e14c4f..f09b2f48 100644
--- a/src/routes/(app)/_components/layout/navbar.svelte
+++ b/src/routes/(app)/_components/layout/navbar.svelte
@@ -1,10 +1,10 @@
 <script>
+  // @ts-expect-error Import is as expected but throws error
   import { page } from '$app/stores';
-
   $: currentPage = $page.url.pathname;
   const links = [
     { href: '/team/', label: 'Equipa', pageComp: '/team' },
-    { href: '/projects/', label: 'Projects', pageComp: '/projects' },
+    { href: '/projects/', label: 'Projetos', pageComp: '/projects' },
     { href: '/events/', label: 'Eventos', pageComp: '/events' },
     { href: '/contacts/', label: 'Contactos', pageComp: '/contacts' }
   ];

From cee9075f13aa71595b275c79017c73d4af8a011c Mon Sep 17 00:00:00 2001
From: Isaac3105 <isaac.absantos@gmail.com>
Date: Fri, 6 Dec 2024 17:32:32 +0000
Subject: [PATCH 6/6] still trying to fix the storybook  problem

---
 src/routes/(app)/_components/layout/navbar.svelte | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/routes/(app)/_components/layout/navbar.svelte b/src/routes/(app)/_components/layout/navbar.svelte
index f09b2f48..4e00cbb4 100644
--- a/src/routes/(app)/_components/layout/navbar.svelte
+++ b/src/routes/(app)/_components/layout/navbar.svelte
@@ -1,6 +1,8 @@
 <script>
   // @ts-expect-error Import is as expected but throws error
+
   import { page } from '$app/stores';
+
   $: currentPage = $page.url.pathname;
   const links = [
     { href: '/team/', label: 'Equipa', pageComp: '/team' },