add support navbar menu (#4229)

coral-xyz · Jun 24, 2023 · 7ce80b7 · 7ce80b7 · vercel · Jun 24, 2023
1 parent e9f79e4
commit 7ce80b7
Showing 1 changed file with 27 additions and 2 deletions.
diff --git a/web/components/Nav.tsx b/web/components/Nav.tsx
@@ -1,4 +1,4 @@
-import { Disclosure } from '@headlessui/react';
+import { Disclosure, Menu } from '@headlessui/react';
 import { ExternalLinkIcon, MenuIcon, XIcon } from '@heroicons/react/outline';
 import Image from 'next/legacy/image';
 import Link from 'next/link';
@@ -19,6 +19,9 @@ export const mainMenu = [
     title: 'About',
     path: '/about'
   },
+  {
+    title: 'Support'
+  },
   {
     title: 'Downloads',
     path: '/downloads'
@@ -39,7 +42,7 @@ function Nav() {
                   {/* Logo */}
                   <Link href="/">
                     <div className="flex">
-                      <Image alt="Backpack" src="/backpack.svg" width="150px" height="50px" />
+                      <Image alt="Backpack" src="/backpack.svg" width={150} height={50} />
                     </div>
                   </Link>
                 </div>
@@ -62,6 +65,28 @@ function Nav() {
                           {item.title}
                         </a>
                       );
+                    } else if (item.title === 'Support') {
+                      return (
+                        <Menu key={index} as="div" className="relative">
+                          <Menu.Button className="px-3 py-2 text-sm font-medium tracking-wide text-zinc-100">
+                            {item.title}
+                          </Menu.Button>
+                          <Menu.Items className="absolute left-0 mt-2 rounded-lg bg-[#27272A] px-3 text-sm font-medium tracking-wide text-zinc-100">
+                            {[
+                              { title: 'Discord', link: 'http://discord.gg/backpack' },
+                              { title: 'User Guides', link: 'https://help.backpack.app' }
+                            ].map(item => (
+                              <Menu.Item key={item.title}>
+                                <div className="w-24 py-2">
+                                  <a href={item.link} target="_blank" rel="noopener noreferrer">
+                                    {item.title}
+                                  </a>
+                                </div>
+                              </Menu.Item>
+                            ))}
+                          </Menu.Items>
+                        </Menu>
+                      );
                     } else {
                       return (
                         <Link key={index} href={item.path}>