Chanatpakorn/refactor navigation bar (#11)

* feat: NavLink

* feat:better nav

* refactor:format

src/components/navbar/NavLink.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import RightArrow from "./RightArrow.svelte";
+
+  export let direct: string;
+  let hoverText = false;
+</script>
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+  on:mouseenter={() => {
+    hoverText = true;
+  }}
+  on:mouseleave={() => {
+    hoverText = false;
+  }}
+>
+  <a
+    href="/{direct === 'home' ? '' : direct}"
+    class="flex cursor-pointer items-center duration-700 hover:ml-4"
+  >
+    <RightArrow
+      classProps="h-9 w-9 lg:h-32 lg:w-32 {hoverText ? 'block' : 'hidden'}"
+    />
+    {#each direct as character}
+      <div
+        class=" text-4xl lg:text-9xl {hoverText
+          ? '-scale-x-100 duration-700'
+          : ''}"
+      >
+        {character.toUpperCase()}
+      </div>
+    {/each}
+  </a>
+</div>

src/components/navbar/Navbar.svelte

@@ -1,147 +1,46 @@
 <script lang="ts">
   import Menu from "./Menu.svelte";
   import LogoSgcu from "./LogoSGCU.svelte";
-  import RightArrow from "./RightArrow.svelte";
+  import NavLink from "./NavLink.svelte";
 
   let open = false;
-  let hoverHome = false;
-  let hoverProject = false;
-  let hoverJoin = false;
-  let hoverContact = false;
 </script>
 
-<nav id="nav" class="fixed z-50 w-full bg-primary px-4 text-white lg:px-10">
-  <div class="bg-blue flex items-center justify-between py-4">
-    <LogoSgcu
-      classProps="flex justify-start relative w-5 h-8 lg:h-24 lg:w-14"
-    />
-    <div class="flex flex-row items-center">
-      <p class="mr-2 text-base font-light lg:mr-6">Menu</p>
-      <button
-        on:click={() => {
-          open = !open;
-        }}
-      >
-        <Menu classProps="h-8 lg:h-12" isOpen={open} />
-      </button>
-    </div>
-  </div>
-
-  {#if open}
+<nav
+  id="nav"
+  class="z-[4000] m-0 w-screen bg-primary text-white {open
+    ? 'fixed h-screen'
+    : ''}"
+>
+  <div class="bg-primary">
     <div
-      class="transfrom relative mt-[30%] flex min-h-screen animate-sliding-left flex-col gap-10 px-4 align-middle text-4xl font-light lg:mt-12 lg:justify-start lg:text-9xl"
+      class=" z-[8000] flex w-full items-center justify-between px-4 py-4 lg:px-10 {open
+        ? 'fixed'
+        : 'sticky'}"
     >
-      <!-- svelte-ignore a11y-no-static-element-interactions -->
-      <div
-        on:mouseenter={() => {
-          hoverHome = true;
-        }}
-        on:mouseleave={() => {
-          hoverHome = false;
-        }}
-      >
-        <a
-          href="/"
-          class="menu-container {hoverHome ? 'hover-menu hover:ml-4' : ''}"
-        >
-          <RightArrow
-            classProps="h-9 w-9 lg:h-32 lg:w-32 {hoverHome
-              ? 'block'
-              : 'hidden'}"
-          />
-          <p>H</p>
-          <p>O</p>
-          <p>M</p>
-          <p>E</p>
-        </a>
-      </div>
-      <!-- svelte-ignore a11y-no-static-element-interactions -->
-      <div
-        on:mouseenter={() => {
-          hoverProject = true;
-        }}
-        on:mouseleave={() => {
-          hoverProject = false;
-        }}
-      >
-        <a
-          href="/project"
-          class="menu-container {hoverProject ? 'hover-menu hover:ml-4' : ''}"
+      <LogoSgcu
+        classProps="flex justify-start relative w-5 h-8 lg:h-24 lg:w-14"
+      />
+      <div class="flex flex-row items-center">
+        <p class="mr-2 text-base font-light lg:mr-6">Menu</p>
+        <button
+          on:click={() => {
+            open = !open;
+          }}
         >
-          <RightArrow
-            classProps="h-9 w-9 lg:h-32 lg:w-32 {hoverProject
-              ? 'block'
-              : 'hidden'}"
-          />
-          <p>P</p>
-          <p>R</p>
-          <p>O</p>
-          <p>J</p>
-          <p>E</p>
-          <p>C</p>
-          <p>T</p>
-        </a>
+          <Menu classProps="h-8 lg:h-12" isOpen={open} />
+        </button>
       </div>
-      <!-- svelte-ignore a11y-no-static-element-interactions -->
+    </div>
+    {#if open}
       <div
-        on:mouseenter={() => {
-          hoverJoin = true;
-        }}
-        on:mouseleave={() => {
-          hoverJoin = false;
-        }}
+        class="font-['JetBrains Mono'] fixed flex h-full w-full animate-sliding-left flex-col items-start justify-center gap-10 px-10 lg:my-10"
       >
-        <a
-          href="/join"
-          class="menu-container {hoverJoin ? 'hover-menu hover:ml-4' : ''}"
-        >
-          <RightArrow
-            classProps="h-9 w-9 lg:h-32 lg:w-32 {hoverJoin
-              ? 'block'
-              : 'hidden'}"
-          />
-          <p>J</p>
-          <p>O</p>
-          <p>I</p>
-          <p>N</p>
-        </a>
+        <NavLink direct="home" />
+        <NavLink direct="project" />
+        <NavLink direct="join" />
+        <NavLink direct="contact" />
       </div>
-      <!-- svelte-ignore a11y-no-static-element-interactions -->
-      <div
-        on:mouseenter={() => {
-          hoverContact = true;
-        }}
-        on:mouseleave={() => {
-          hoverContact = false;
-        }}
-      >
-        <a
-          href="/contact"
-          class="menu-container {hoverContact ? 'hover-menu hover:ml-4' : ''}"
-        >
-          <RightArrow
-            classProps="h-9 w-9 lg:h-32 lg:w-32 {hoverContact
-              ? 'block'
-              : 'hidden'}"
-          />
-          <p>C</p>
-          <p>O</p>
-          <p>N</p>
-          <p>T</p>
-          <p>A</p>
-          <p>C</p>
-          <p>T</p>
-        </a>
-      </div>
-    </div>
-  {/if}
+    {/if}
+  </div>
 </nav>
-
-<style lang="postcss">
-  .menu-container {
-    @apply flex cursor-pointer items-center duration-700;
-  }
-  .hover-menu > p {
-    @apply -scale-x-100 duration-700;
-  }
-</style>