feature: add go back link to header

expo · Mar 17, 2024 · 14d3280 · 14d3280
1 parent 21899e3
commit 14d3280
Showing 1 changed file with 21 additions and 5 deletions.
diff --git a/webui/src/ui/Layout.tsx b/webui/src/ui/Layout.tsx
@@ -1,22 +1,38 @@
 import cn from 'classnames';
-import { Link } from 'expo-router';
+import { Link, useRouter } from 'expo-router';
 import { HTMLAttributes, PropsWithChildren } from 'react';
 
 export function LayoutNavigation({
   children,
   className,
 }: PropsWithChildren & { className?: string }) {
+  const router = useRouter();
+
   return (
     <header
       className={cn(
         'h-16 flex flex-shrink-0 items-center justify-between gap-2 border-b border-b-secondary bg-default px-4',
         className
       )}
     >
-      <Link href="/" aria-label="Go back to graph">
-        <ExpoLogoBig title="Expo" className="w-[74px] text-default max-md-gutters:hidden" />
-        <ExpoLogoSmall title="Expo" className="hidden text-default max-md-gutters:flex" />
-      </Link>
+      <div className="flex flex-row">
+        <Link className="mr-4" href="/" aria-label="Go back to graph">
+          <ExpoLogoBig title="Expo" className="w-[74px] text-default max-md-gutters:hidden" />
+          <ExpoLogoSmall title="Expo" className="hidden text-default max-md-gutters:flex" />
+        </Link>
+        {router.canGoBack() ? (
+          <a
+            className="text-link hover:underline"
+            href="#"
+            onClick={(event) => {
+              event.preventDefault();
+              router.back();
+            }}
+          >
+            ← go back
+          </a>
+        ) : null}
+      </div>
       {children}
     </header>
   );