fix: used custom HeaderActionLink

Allows onclick event passthrough for anchor element

src/App.svelte

@@ -50,15 +50,16 @@
     SkipToContent,
     HeaderUtilities,
     HeaderGlobalAction,
-    HeaderNavItem,
     Content,
     SideNav,
     SideNavMenuItem,
     SideNavMenu,
     SideNavItems,
-    SideNavLink
+    SideNavLink,
   } from "carbon-components-svelte";
 
+  import CustomHeaderActionLink from "./CustomHeaderActionLink.svelte";
+
   import CloudUpload from "carbon-icons-svelte/lib/CloudUpload.svelte";
   import Document from "carbon-icons-svelte/lib/Document.svelte";
   import DocumentBlank from "carbon-icons-svelte/lib/DocumentBlank.svelte";
@@ -2140,14 +2141,13 @@ Please include a link to this sheet in the email to assist in debugging the prob
 
     <HeaderUtilities>
       {#if !inIframe}
-        <HeaderNavItem 
+        <CustomHeaderActionLink
           id="new-sheet"
           title="New Sheet"
           href="/" 
+          icon={DocumentBlank}
           on:click={ (e) => handleLinkPushState(e, '/') }
-        >
-          <DocumentBlank size={20} color="white"/>
-        </HeaderNavItem> 
+        />
         <HeaderGlobalAction
           id="open-sheet"
           title="Open Sheet From File"
@@ -2166,14 +2166,13 @@ Please include a link to this sheet in the email to assist in debugging the prob
           on:click={handleGetShareableLink} 
           icon={CloudUpload}
         />
-        <HeaderNavItem 
+        <CustomHeaderActionLink
           href={`/${tutorialHash}`}
           title="Tutorial"
           rel="nofollow"
+          icon={Help}
           on:click={(e) => handleLinkPushState(e, `/${tutorialHash}`) }
-        >
-          <Help size={20} color="white  "/>
-        </HeaderNavItem>
+        />
         <div class="dot-container">
           <HeaderGlobalAction 
             title={"Sheet Settings" + (usingDefaultConfig ? "" : " (Modified)")}

src/CustomHeaderActionLink.svelte

@@ -0,0 +1,43 @@
+<script>
+  /** Set to `true` to use the active state */
+  export let linkIsActive = false;
+
+  /**
+   * Specify the `href` attribute
+   * @type {string}
+   */
+  export let href = undefined;
+
+  /**
+   * Specify the icon to render
+   * @type {typeof import("svelte").SvelteComponent<any>}
+   */
+  export let icon = undefined;
+
+  /** Obtain a reference to the HTML anchor element */
+  export let ref = null;
+</script>
+
+<a
+  bind:this="{ref}"
+  class:bx--header__action="{true}"
+  class:bx--header__action--active="{linkIsActive}"
+  href="{href}"
+  rel="{$$restProps.target === '_blank' ? 'noopener noreferrer' : undefined}"
+  {...$$restProps}
+  on:click
+>
+  <slot name="icon">
+    <svelte:component this="{icon}" size="{20}" />
+  </slot>
+</a>
+
+<style>
+  .bx--header__action {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    /** Hot fix to align icon with `HeaderAction` */
+    padding-bottom: 2px;
+  }
+</style>