From 63628deae39bd9118d6fc70e94e3ee451a2339a1 Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Fri, 12 Apr 2024 17:03:03 -0400
Subject: [PATCH] Adds HelpMenu

---
 src/lib/components/MainLayout.svelte          |  2 +
 src/lib/components/navigation/HelpMenu.svelte | 58 +++++++++++++++++++
 2 files changed, 60 insertions(+)
 create mode 100644 src/lib/components/navigation/HelpMenu.svelte

diff --git a/src/lib/components/MainLayout.svelte b/src/lib/components/MainLayout.svelte
index 1db75da98..6226ac849 100644
--- a/src/lib/components/MainLayout.svelte
+++ b/src/lib/components/MainLayout.svelte
@@ -15,6 +15,7 @@
   import { SIGN_IN_URL } from "@/config/config";
   import Breadcrumbs from "./navigation/Breadcrumbs.svelte";
   import LanguageMenu from "./navigation/LanguageMenu.svelte";
+  import HelpMenu from "./navigation/HelpMenu.svelte";
 
   export let modal: boolean = false;
 
@@ -60,6 +61,7 @@
       </Button>
     </SignedIn>
     <LanguageMenu />
+    <HelpMenu />
     {#if $$slots.action}
       <div class="small openPane">
         <Button mode="ghost" on:click={openPanel("action")}>
diff --git a/src/lib/components/navigation/HelpMenu.svelte b/src/lib/components/navigation/HelpMenu.svelte
new file mode 100644
index 000000000..323eee0e7
--- /dev/null
+++ b/src/lib/components/navigation/HelpMenu.svelte
@@ -0,0 +1,58 @@
+<script lang="ts">
+  import { _ } from "svelte-i18n";
+  import Dropdown from "@/common/Dropdown2.svelte";
+  import Menu from "@/common/Menu.svelte";
+
+  import {
+    CommentDiscussion16,
+    Search16,
+    Code16,
+    Plug16,
+    Mail16,
+    Question24,
+    ChevronDown16,
+  } from "svelte-octicons";
+  import SidebarItem from "../sidebar/SidebarItem.svelte";
+  import Premium from "@/common/icons/Premium.svelte";
+</script>
+
+<!-- Help Menu -->
+<Dropdown id="help" position="right">
+  <SidebarItem slot="title">
+    <Question24 />
+    <div class="dropdownArrow"><ChevronDown16 /></div>
+  </SidebarItem>
+  <Menu>
+    <SidebarItem href="/help/faq">
+      <CommentDiscussion16 />
+      {$_("authSection.help.faq")}
+    </SidebarItem>
+    <SidebarItem href="/help/search">
+      <Search16 />
+      {$_("authSection.help.searchDocs")}
+    </SidebarItem>
+    <SidebarItem href="/help/api">
+      <Code16 />
+      {$_("authSection.help.apiDocs")}
+    </SidebarItem>
+    <SidebarItem href="/help/add-ons">
+      <Plug16 />
+      {$_("authSection.help.addOns")}
+    </SidebarItem>
+    <SidebarItem href="/help/premium">
+      <Premium />
+      {$_("authSection.help.premium")}
+    </SidebarItem>
+    <SidebarItem href="mailto:info@documentcloud.org" target="_blank">
+      <Mail16 />
+      {$_("authSection.help.emailUs")}
+    </SidebarItem>
+  </Menu>
+</Dropdown>
+
+<style>
+  .dropdownArrow {
+    display: flex;
+    align-items: center;
+  }
+</style>