From 345ab8ea9e9c2c718bdc6db3c97f09566852c5e4 Mon Sep 17 00:00:00 2001
From: sccalabr <4111230+sccalabr@users.noreply.github.com>
Date: Sat, 5 Oct 2024 11:27:37 -0700
Subject: [PATCH] Addressing comments and using dropdown instead of button

---
 frontend/src/Navigation.tsx | 37 ++++++++++++++++++-------------------
 1 file changed, 18 insertions(+), 19 deletions(-)

diff --git a/frontend/src/Navigation.tsx b/frontend/src/Navigation.tsx
index 052a9643..77999753 100644
--- a/frontend/src/Navigation.tsx
+++ b/frontend/src/Navigation.tsx
@@ -12,6 +12,7 @@ import Expand from './assets/expand.svg';
 import Github from './assets/github.svg';
 import Hamburger from './assets/hamburger.svg';
 import Info from './assets/info.svg';
+import InfoDark from './assets/info-dark.svg';
 import SettingGear from './assets/settingGear.svg';
 import Twitter from './assets/TwitterX.svg';
 import UploadIcon from './assets/upload.svg';
@@ -41,6 +42,7 @@ import {
   setSourceDocs,
 } from './preferences/preferenceSlice';
 import Upload from './upload/Upload';
+import Dropdown from './components/Dropdown';
 
 interface NavigationProps {
   navOpen: boolean;
@@ -360,27 +362,24 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
             </NavLink>
           </div>
           <div className="flex justify-between gap-2 border-b-[1.5px] py-2 dark:border-b-purple-taupe">
-            <NavLink
-              onClick={() => {
-                if (isMobile) {
-                  setNavOpen(!navOpen);
-                }
-                resetConversation();
-              }}
-              to="/about"
-              className={({ isActive }) =>
-                `my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-[#28292E] ${
-                  isActive ? 'bg-gray-3000 dark:bg-[#28292E]' : ''
-                }`
-              }
-            >
+          <div className="flex my-4 mx-4 flex gap-2">
               <img
-                src={Info}
-                alt="icon"
                 className="ml-2 w-5 filter dark:invert"
-              />
-              <p className="my-auto pr-1 text-sm">{t('about')}</p>
-            </NavLink>
+                src={InfoDark}
+              ></img>
+              <Dropdown
+                placeholder={"Help"}
+                contentSize='50'
+                options={[ { label: "Docs", value: "documentation" }, { label: "Email Us", value: "email" }, ]}
+                onSelect={(selectedOption) => {
+                  if (selectedOption.value === "documentation") {
+                    window.open(" https://docs.docsgpt.cloud/", "_blank");
+                  } else if (selectedOption.value === "email"){
+                    window.location.href = `mailto:contact@arc53.com`;
+                  }
+                }}
+                />
+            </div>
             <div className="flex items-center justify-evenly gap-1 px-1">
               <NavLink
                 target="_blank"