chore(Header): use style-guide header (#46)

[](url)Replace current header with header from
the style-guide library.

Closes #35 

<img width="1724" alt="Screenshot 2024-10-31 at 3 29 19 PM"
src="https://github.com/user-attachments/assets/5b69caa5-487e-427e-9014-fc53b37e4242">
<img width="495" alt="Screenshot 2024-10-31 at 3 29 12 PM"
src="https://github.com/user-attachments/assets/f117c285-95f3-4f05-bce3-3c3ab393551c">
<img width="1728" alt="Screenshot 2024-10-31 at 3 29 31 PM"
src="https://github.com/user-attachments/assets/3a4b0212-e779-4866-aada-ec412b8b110d">

---------

Co-authored-by: Claire Olmstead <olmsteadclaire@gmail.com>

Author: 2 people

package-lock.json

@@ -45,6 +45,6 @@
   },
   "type": "module",
   "dependencies": {
-    "@frequency-chain/style-guide": "^0.1.9"
+    "@frequency-chain/style-guide": "^0.1.11"
   }
 }

package.json

@@ -1,55 +1,20 @@
 <script lang="ts">
-  import HeaderNav from '../Header/HeaderNav.svelte';
-  import HeaderNavMobile from '../Header/HeaderNavMobile.svelte';
-  import OpenCloseIcon from '../OpenCloseIcon.svelte';
-  import { MAX_MOBILE_WIDTH } from '../../lib/consts';
+  import { Header } from '@frequency-chain/style-guide';
 
   export let logoHex: string = '';
   export let navColor: string = '';
   export let section: number;
 
-  $: isNavOpen = false;
-
   $: textColor = `text-${navColor}`;
 
-  $: innerWidth = window.innerWidth;
-
-  $: {
-    window.addEventListener('resize', () => {
-      innerWidth = window.innerWidth;
-      let hasMobileNav = innerWidth <= 900;
-      if (!hasMobileNav) isNavOpen = false;
-    });
-  }
+  const menuItems = [
+    { label: 'About', href: '/' },
+    { label: 'Dev Docs', href: 'https://docs.frequency.xyz/', isExternal: true },
+    { label: 'Newsroom', href: 'https://medium.com/one-frequency', isExternal: true },
+    { label: 'Contact', href: 'mailto:info@frequency.xyz' },
+  ];
 </script>
 
-<div
-  id="header"
-  class={`freq-container z-50 flex max-w-page items-center justify-between sm:pt-[10px] lg:pt-[30px] ${isNavOpen ? 'fixed' : ''}`}
->
-  <a href="/" aria-label="Home">
-    <svg
-      class="mr-3 sm:w-[180px] md:w-[180px] lg:w-[210px]"
-      width="216"
-      height="32"
-      viewBox="0 0 216 32"
-      xmlns="http://www.w3.org/2000/svg"
-      role="none"
-    >
-      <path
-        d="M0 0.654808V31.3416H5.36345V21.7823L16.1391 17.1452L15.9972 11.6618L5.40781 16.2053V5.76408H19.0804V0.654808H0ZM26.0808 5.75963H33.2676C35.601 5.75963 37.5131 6.93115 37.5131 9.46129C37.5131 11.9914 35.601 13.2075 33.2676 13.2075H26.0808V5.76408V5.75963ZM20.6686 0.654808V31.3416H26.0808V23.8002L42.8765 31.3416V25.4395L26.5466 18.3658H33.1256C38.3515 18.3658 42.8765 14.9937 42.8765 9.51029C42.8765 4.02684 38.3515 0.654808 33.1256 0.654808H20.6686ZM44.5091 0.654808V31.3416H63.5451V26.1878H49.8725V18.5039H63.5451V13.399H49.8725V5.76408H63.5451V0.654808H44.5091ZM114.819 0.654808V21.6442C114.819 24.7846 112.535 26.9362 109.456 26.9362C106.377 26.9362 104.093 24.7802 104.093 21.6442V0.654808H98.7291V21.5507C98.7291 27.7335 103.534 31.9964 109.46 31.9964C115.387 31.9964 120.192 27.7335 120.192 21.5507V0.654808H114.828H114.819ZM121.82 0.654808V31.3416H140.856V26.1878H127.183V18.5039H140.856V13.399H127.183V5.76408H140.856V0.654808H121.82ZM159.519 0.654808V21.3636L148.322 0.654808H142.488V31.3416H147.759V10.6818L159.005 31.3416H164.79V0.654808H159.519ZM209.396 0.654808L205.151 12.1785L200.67 0.654808H194.743L207.715 31.3416H213.313L207.901 18.5529L215.088 0.703808H209.396V0.654808ZM70.3104 15.9782C70.3104 9.98246 75.1637 5.06027 81.1837 5.06027C87.2037 5.06027 92.057 9.93346 92.057 15.9782C92.057 17.898 91.5912 19.7734 90.6108 21.4616L78.5264 13.9648V20.054L87.0174 25.2078C85.2429 26.2858 83.2377 26.8961 81.1393 26.8961C75.2125 26.9451 70.3636 22.1654 70.3148 16.2143V15.9782M81.1349 1.99158e-06C72.3644 0.0490011 65.2264 7.21624 65.2708 16.0227C65.3196 24.8292 72.4576 31.9964 81.2281 31.9519C85.0521 31.9519 88.7386 30.5443 91.6311 28.0186L97.0433 31.2971V25.4395L94.8962 24.1298C96.298 21.6487 97.0433 18.8379 97.0433 15.9782C97.1409 7.21624 90.0961 0.0490011 81.37 1.99158e-06C81.2768 1.99158e-06 81.2281 1.99158e-06 81.1349 1.99158e-06ZM182.384 1.99158e-06C173.613 1.99158e-06 166.427 7.12269 166.427 15.9737C166.427 24.8247 173.52 31.9964 182.335 31.9964C187.419 31.9964 192.179 29.6088 195.165 25.484L191.434 21.7378C189.615 25.0163 186.115 27.0297 182.384 26.9362C176.226 26.9362 171.608 22.2055 171.608 16.0183C171.608 9.83101 176.275 5.05582 182.384 5.05582C186.115 4.96228 189.615 6.9757 191.434 10.3032L195.165 6.55698C192.179 2.34305 187.419 -0.0445427 182.384 1.99158e-06Z"
-        fill={innerWidth <= MAX_MOBILE_WIDTH ? '#5E69FF' : logoHex}
-        class="transition-all duration-1000"
-      />
-    </svg>
-  </a>
-
-  <!-- For Desktop -->
-  <div class={`transition-color duration-1000 ${innerWidth <= MAX_MOBILE_WIDTH ? 'text-navy' : textColor}`}>
-    <HeaderNav textColor={navColor} bind:section />
-  </div>
-
-  <!-- For Mobile -->
-  <OpenCloseIcon onClick={() => (isNavOpen = !isNavOpen)} isOpen={isNavOpen} classes={'md:hidden lg:hidden'} />
-  <HeaderNavMobile isOpen={isNavOpen} bind:section />
+<div class="md:freq-container absolute top-0 z-50 w-full max-w-page md:pt-[30px]">
+  <Header logoType="primary" {logoHex} class={textColor} {menuItems} bind:section />
 </div>