From 74bf00ae340f8d423e9db1eb88a0b7f09c806afd Mon Sep 17 00:00:00 2001
From: Juraj Uhlar <juro.uhlar@gmail.com>
Date: Mon, 3 Jun 2024 10:45:59 +0200
Subject: [PATCH] fix: top nav - logo leads to website, direct playground link
 (#146)

---
 .../common/DropdownMenu/DropdownMenu.tsx      | 16 +++++++-
 .../components/common/Header/Header.tsx       | 38 +++++++------------
 .../common/MobileNavbar/MobileNavbar.tsx      | 21 ++++------
 3 files changed, 35 insertions(+), 40 deletions(-)

diff --git a/src/client/components/common/DropdownMenu/DropdownMenu.tsx b/src/client/components/common/DropdownMenu/DropdownMenu.tsx
index cb81b561..78319265 100644
--- a/src/client/components/common/DropdownMenu/DropdownMenu.tsx
+++ b/src/client/components/common/DropdownMenu/DropdownMenu.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, PropsWithChildren } from 'react';
 import classNames from 'classnames';
 import ExpandMoreSvg from '../../../img/expand-more.svg';
 import styles from './DropdownMenu.module.scss';
@@ -6,6 +6,7 @@ import { AnimatePresence, motion } from 'framer-motion';
 import useOnClickOutside from '../../../hooks/useOnClickOutside';
 import Image from 'next/image';
 import Dropdown, { DropdownProps } from '../Dropdown/Dropdown';
+import Link from 'next/link';
 
 export interface DropdownMenuProps {
   name: string;
@@ -15,7 +16,8 @@ export interface DropdownMenuProps {
   dropdownProps: DropdownProps;
   onLinkClick?: () => void;
 }
-export default function DropdownMenu({ name, className, darkMode, dropdownProps, onLinkClick }: DropdownMenuProps) {
+
+export function DropdownMenu({ name, className, darkMode, dropdownProps, onLinkClick }: DropdownMenuProps) {
   const [isOpen, setIsOpen] = useState(false);
   const ref = useRef<HTMLDivElement | null>(null);
   useOnClickOutside(ref, () => setIsOpen(false));
@@ -57,3 +59,13 @@ export default function DropdownMenu({ name, className, darkMode, dropdownProps,
     </div>
   );
 }
+
+type DropdownLikeLinkProps = PropsWithChildren<{ href: string; className?: string; onLinkClick?: () => void }>;
+
+export function DropdownLikeLink({ href, children, className, onLinkClick }: DropdownLikeLinkProps) {
+  return (
+    <Link href={href} className={classNames(className, styles.link)} onClick={onLinkClick}>
+      {children}
+    </Link>
+  );
+}
diff --git a/src/client/components/common/Header/Header.tsx b/src/client/components/common/Header/Header.tsx
index e2cb1cf1..987d828a 100644
--- a/src/client/components/common/Header/Header.tsx
+++ b/src/client/components/common/Header/Header.tsx
@@ -6,11 +6,10 @@ import MobileNavbar from '../MobileNavbar/MobileNavbar';
 import Container from '../Container';
 import HeaderBar from '../HeaderBar/HeaderBar';
 import classNames from 'classnames';
-import { PLATFORM_NAVIGATION, URL, USE_CASES_NAVIGATION } from '../content';
-import DropdownMenu from '../DropdownMenu/DropdownMenu';
+import { PLAYGROUND_METADATA, URL, USE_CASES_NAVIGATION } from '../content';
+import { DropdownLikeLink, DropdownMenu } from '../DropdownMenu/DropdownMenu';
 import Image from 'next/image';
 import LogoSvg from './fpjs.svg';
-import LogoDarkSvg from './fpjsDark.svg';
 import Restart from '../../../img/restart.svg';
 
 import styles from './Header.module.scss';
@@ -27,9 +26,8 @@ interface HeaderProps {
     url?: string;
     backgroundColor?: string;
   };
-  darkMode?: boolean;
 }
-export default function Header({ notificationBar, darkMode }: HeaderProps) {
+export default function Header({ notificationBar }: HeaderProps) {
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
 
   useEffect(() => {
@@ -62,24 +60,24 @@ export default function Header({ notificationBar, darkMode }: HeaderProps) {
           {<div dangerouslySetInnerHTML={{ __html: notificationBar.barBody ?? '' }} />}
         </HeaderBar>
       )}
-      <header className={classNames(styles.header, { [styles.darkHeader]: darkMode })}>
+      <header className={classNames(styles.header)}>
         <div className={styles.nav}>
           <Container size='large' className={styles.root}>
             <nav className={styles.navMain}>
               <div className={styles.navLeft}>
-                <Link href='/' className={styles.link} title='Logo'>
-                  {darkMode ? (
-                    <Image src={LogoDarkSvg} className={styles.logo} alt='Fingerprint logo' />
-                  ) : (
-                    <Image src={LogoSvg} className={styles.logo} alt='Fingerprint logo' />
-                  )}
+                <Link href='https://fingerprint.com' className={styles.link} title='Logo'>
+                  <Image src={LogoSvg} className={styles.logo} alt='Fingerprint logo' />
                 </Link>
+                <DropdownLikeLink href='/' className={styles.desktopOnly}>
+                  Home
+                </DropdownLikeLink>
+                <DropdownLikeLink href={PLAYGROUND_METADATA.url} className={styles.desktopOnly}>
+                  Playground
+                </DropdownLikeLink>
                 <DropdownMenu
-                  darkMode={darkMode}
                   name='Use cases'
                   className={styles.desktopOnly}
                   dropdownProps={{
-                    darkMode,
                     leftColumns: [
                       {
                         list: USE_CASES_NAVIGATION.slice(0, 5),
@@ -92,16 +90,6 @@ export default function Header({ notificationBar, darkMode }: HeaderProps) {
                     ],
                   }}
                 />
-
-                <DropdownMenu
-                  darkMode={darkMode}
-                  name='Platform'
-                  className={styles.desktopOnly}
-                  dropdownProps={{
-                    darkMode,
-                    leftColumns: [{ list: PLATFORM_NAVIGATION, cardBackground: true }],
-                  }}
-                />
               </div>
               <div className={styles.navRight}>
                 {shouldDisplayResetButton && (
@@ -157,7 +145,7 @@ export default function Header({ notificationBar, darkMode }: HeaderProps) {
               </div>
             </nav>
           </Container>
-          {isMobileMenuOpen && <MobileNavbar darkMode={darkMode} closeMobileMenu={() => setIsMobileMenuOpen(false)} />}
+          {isMobileMenuOpen && <MobileNavbar closeMobileMenu={() => setIsMobileMenuOpen(false)} />}
         </div>
       </header>
     </>
diff --git a/src/client/components/common/MobileNavbar/MobileNavbar.tsx b/src/client/components/common/MobileNavbar/MobileNavbar.tsx
index 5ac52a1b..f040b430 100644
--- a/src/client/components/common/MobileNavbar/MobileNavbar.tsx
+++ b/src/client/components/common/MobileNavbar/MobileNavbar.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import Button from '../Button/Button';
 import classNames from 'classnames';
 import styles from './MobileNavbar.module.scss';
-import { PLATFORM_NAVIGATION, URL, USE_CASES_NAVIGATION } from '../content';
-import DropdownMenu from '../DropdownMenu/DropdownMenu';
+import { PLAYGROUND_METADATA, URL, USE_CASES_NAVIGATION } from '../content';
+import { DropdownLikeLink, DropdownMenu } from '../DropdownMenu/DropdownMenu';
 import Image from 'next/image';
 import Restart from '../../../img/restart.svg';
 import { useReset } from '../../../hooks/useReset/useReset';
@@ -60,6 +60,12 @@ export default function MobileNavbar({ darkMode, closeMobileMenu }: MobileNavbar
 
         <div className={classNames(styles.links, styles.main)}>
           <div className={styles.container}>
+            <DropdownLikeLink href={'/'} onLinkClick={closeMobileMenu}>
+              Home
+            </DropdownLikeLink>
+            <DropdownLikeLink href={PLAYGROUND_METADATA.url} onLinkClick={closeMobileMenu}>
+              Playground
+            </DropdownLikeLink>
             <DropdownMenu
               name='Use cases'
               darkMode={darkMode}
@@ -78,17 +84,6 @@ export default function MobileNavbar({ darkMode, closeMobileMenu }: MobileNavbar
               }}
               onLinkClick={closeMobileMenu}
             />
-
-            <DropdownMenu
-              darkMode={darkMode}
-              name='Platform'
-              className={styles.desktopOnly}
-              dropdownProps={{
-                darkMode,
-                leftColumns: [{ list: PLATFORM_NAVIGATION, cardBackground: true }],
-              }}
-              onLinkClick={closeMobileMenu}
-            />
           </div>
         </div>
       </div>