11 header and nav (#20)

closes #11 blocked by #19 Note: Heather is working on licensing the correct font, so it looks a little off. ## Changes - added favicons - added minor layout styles - created header and nav components - made them accessible for both mobile and desktop ## Demo Uploading Screen Recording 2024-02-13 at 7.49.59 PM.mov… --------- Co-authored-by: Claire Olmstead <[email protected]>
frequency-chain · Feb 14, 2024 · d0b635b · d0b635b
1 parent 4c7d308
commit d0b635b
Show file tree

Hide file tree

Showing 17 changed files with 108 additions and 4 deletions.
diff --git a/src/app.html b/src/app.html
@@ -2,7 +2,11 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
+    <link rel="icon" href="%sveltekit.assets%/favicon.ico" />
+    <link rel="apple-touch-icon" sizes="180x180" href="%sveltekit.assets%/apple-touch-icon.png?v=1" />
+    <link rel="icon" type="image/png" sizes="32x32" href="%sveltekit.assets%/favicon-32x32.png?v=1" />
+    <link rel="icon" type="image/png" sizes="16x16" href="%sveltekit.assets%/favicon-16x16.png?v=1" />
+    <link rel="shortcut icon" href="%sveltekit.assets%/favicon.ico?v=1" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     %sveltekit.head%
   </head>

diff --git a/src/components/Header/Header.svelte b/src/components/Header/Header.svelte
@@ -0,0 +1,19 @@
+<script>
+  import HeaderNav from '../Header/HeaderNav.svelte';
+  import Logo from '../../lib/assets/Logo.svg';
+  import HeaderNavMobile from '../Header/HeaderNavMobile.svelte';
+  import OpenCloseIcon from '../OpenCloseIcon.svelte';
+
+  let isNavOpen = false;
+</script>
+
+<div class="freq-container fixed top-0 flex items-center justify-between pt-[12px]">
+  <img src={Logo} alt="Logo" class="mr-3 sm:w-[140px] md:w-[180px] lg:w-[210px]" />
+
+  <!-- For Desktop -->
+  <HeaderNav />
+
+  <!-- For Mobile -->
+  <OpenCloseIcon onClick={() => (isNavOpen = !isNavOpen)} isOpen={isNavOpen} classes={'md:hidden lg:hidden'} />
+  <HeaderNavMobile isOpen={isNavOpen} />
+</div>
diff --git a/src/components/Header/HeaderNav.svelte b/src/components/Header/HeaderNav.svelte
@@ -0,0 +1,7 @@
+<script>
+  import NavItems from './NavItems.svelte';
+</script>
+
+<nav class="flex-wrap gap-4 text-sm uppercase sm:hidden md:flex lg:flex">
+  <NavItems />
+</nav>
diff --git a/src/components/Header/HeaderNavMobile.svelte b/src/components/Header/HeaderNavMobile.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import NavItems from './NavItems.svelte';
+
+  export let isOpen: boolean;
+</script>
+
+<div
+  class={`fixed right-0 top-0 w-[100vw] flex-col gap-6 overflow-hidden bg-teal transition-[height] duration-[1s] sm:flex md:hidden lg:hidden ${isOpen ? 'h-[100vh]' : 'h-0'}`}
+>
+  <nav class="mt-[60px] flex flex-col gap-4 px-[12%] text-xl uppercase text-cream">
+    <NavItems />
+  </nav>
+</div>
diff --git a/src/components/Header/NavItems.svelte b/src/components/Header/NavItems.svelte
@@ -0,0 +1,5 @@
+<a class="underline-on-hover" href="/#">About.</a>
+<a class="underline-on-hover" href="/#">Our Technology.</a>
+<a class="underline-on-hover" href="https://docs.frequency.xyz/" target="_blank" rel="noreferrer">Dev Docs.</a>
+<a class="underline-on-hover" href="https://medium.com/one-frequency" target="_blank" rel="noreferrer">Newsroom.</a>
+<a class="underline-on-hover" href="mailto:[email protected]">Contact.</a>
diff --git a/src/components/OpenCloseIcon.svelte b/src/components/OpenCloseIcon.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+  export let onClick: () => void;
+  export let isOpen: boolean;
+  export let classes: string = '';
+</script>
+
+<button on:click|preventDefault={onClick} class={`z-50 ${classes}`}>
+  <svg class="h-[55px] w-[55px]">
+    <line
+      x1="0"
+      y1="50%"
+      x2="100%"
+      y2="50%"
+      class={`origin-left translate-y-[20%] stroke-purple stroke-[10%] transition-transform duration-[0.3s] ${isOpen ? 'translate-x-[8px] translate-y-[35%] -rotate-45' : 'rotate-0'}`}
+    />
+    <line
+      x1="0"
+      y1="50%"
+      x2="100%"
+      y2="50%"
+      class={`origin-left translate-y-[-20%] stroke-purple stroke-[10%] transition-transform duration-[0.3s] ${isOpen ? 'translate-x-[8px] translate-y-[-35%] rotate-45' : 'rotate-0'}`}
+    />
+  </svg>
+</button>
diff --git a/src/lib/assets/Exit.svg b/src/lib/assets/Exit.svg
diff --git a/src/lib/assets/Logo.svg b/src/lib/assets/Logo.svg
diff --git a/src/lib/assets/Menu.svg b/src/lib/assets/Menu.svg
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -1,9 +1,11 @@
 <script>
+  import Header from '../components/Header/Header.svelte';
   import Footer from '../components/Footer.svelte';
 </script>
 
 <div>
-  <div class="min-h-[calc(100vh-50px)]">
+  <div class="max-w-page mt-[27px] min-h-[calc(100vh-50px)] w-[100vw]">
+    <Header />
     <slot />
   </div>
   <Footer />

diff --git a/src/style/app.css b/src/style/app.css
@@ -20,11 +20,30 @@
   .freq-container {
     @apply w-full sm:px-[16px] md:px-[40px] lg:px-[80px];
   }
+
+  /* Underline on hover animation */
+  .underline-on-hover {
+    @apply relative block cursor-pointer overflow-hidden px-0 py-1;
+  }
+
+  .underline-on-hover::after {
+    @apply absolute bottom-0 left-0 h-[0.1em] w-full bg-navy opacity-0 transition-opacity content-[''];
+    transition:
+      opacity 300ms,
+      transform 300ms;
+    transform: translate3d(-100%, 0, 0);
+  }
+
+  .underline-on-hover:hover::after,
+  .underline-on-hover:focus::after {
+    @apply opacity-100;
+    transform: translate3d(0, 0, 0);
+  }
 }
 
 @layer base {
   body {
-    @apply text-base text-black;
+    @apply my-[40px] flex flex-col items-center bg-cream text-base text-black;
   }
 
   button {

diff --git a/static/apple-touch-icon.png b/static/apple-touch-icon.png
diff --git a/static/favicon-16x16.png b/static/favicon-16x16.png
diff --git a/static/favicon-32x32.png b/static/favicon-32x32.png
diff --git a/static/favicon.ico b/static/favicon.ico
diff --git a/static/favicon.png b/static/favicon.png
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -23,7 +23,7 @@ export default {
       indigo: '#5E69FF',
     },
     width: {
-      page: '1010px',
+      page: '1300px',
       full: '100%',
     },
     extend: {