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>