feat: Adding onion link to the header

Author: shubhamkmr04

src/assets/tor.svg

@@ -4,6 +4,8 @@ import { OcLinkexternal2 } from "solid-icons/oc";
 import { createSignal } from "solid-js";
 
 import logo from "../assets/olympus-z-white.svg";
+import torIcon from "../assets/tor.svg";
+import { config } from "../config";
 import { useGlobalContext } from "../context/Global";
 import "../style/nav.scss";
 
@@ -29,16 +31,32 @@ const Nav = () => {
                 <div class="separator" />
                 <A href="/history">{t("history")}</A>
                 <div class="separator" />
-                <A href="https://docs.zeusln.app/swaps/intro" target="_blank">
+
+                <a
+                    href="https://docs.zeusln.app/swaps/intro"
+                    target="_blank"
+                    rel="noopener noreferrer">
                     {t("documentation")}
                     <OcLinkexternal2 size={24} />
-                </A>
+                </a>
+
+                <div class="separator" />
+                <a
+                    href={config.torUrl}
+                    target="_blank"
+                    rel="noopener noreferrer">
+                    {t("onion")}
+                    <img src={torIcon} alt="Onion Icon" class="tor-icon" />
+                </a>
             </div>
 
             <div class="desktop-home-icon">
-                <A href="https://olympusln.com">
+                <a
+                    href="https://olympusln.com"
+                    target="_blank"
+                    rel="noopener noreferrer">
                     <AiFillHome size={25} color="white" />
-                </A>
+                </a>
             </div>
 
             <div
@@ -60,15 +78,29 @@ const Nav = () => {
                     <A href="/history" onClick={closeMenu}>
                         {t("history")}
                     </A>
-                    <A
+                    <a
                         href="https://docs.zeusln.app/swaps/intro"
                         target="_blank"
+                        rel="noopener noreferrer"
                         onClick={closeMenu}>
                         {t("documentation")} <OcLinkexternal2 size={24} />
-                    </A>
-                    <A href="https://olympusln.com" onClick={closeMenu}>
+                    </a>
+
+                    <a
+                        href={config.torUrl}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        onClick={closeMenu}>
+                        {t("onion")}
+                        <img src={torIcon} alt="Onion Icon" class="tor-icon" />
+                    </a>
+                    <a
+                        href="https://olympusln.com"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        onClick={closeMenu}>
                         <AiFillHome size={25} color="white" /> Home
-                    </A>
+                    </a>
                 </div>
             )}
         </div>

src/components/Nav.tsx

@@ -135,3 +135,17 @@
         }
     }
 }
+
+.desktop-nav-links a img.tor-icon {
+    height: 22px;
+    width: auto;
+    margin-left: 4px;
+    filter: brightness(0) invert(1);
+}
+
+.mobile-nav-overlay a img.tor-icon {
+    height: 24px;
+    width: auto;
+    filter: brightness(0) invert(1);
+}
+