From 14d3280a4ccc0119f4ceddbbf0efa4d9056312f9 Mon Sep 17 00:00:00 2001
From: Cedric van Putten <github@cedric.dev>
Date: Sun, 17 Mar 2024 18:46:21 +0100
Subject: [PATCH] feature: add `go back` link to header

---
 webui/src/ui/Layout.tsx | 26 +++++++++++++++++++++-----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/webui/src/ui/Layout.tsx b/webui/src/ui/Layout.tsx
index 05c0971..8f36dfc 100644
--- a/webui/src/ui/Layout.tsx
+++ b/webui/src/ui/Layout.tsx
@@ -1,11 +1,13 @@
 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(
@@ -13,10 +15,24 @@ export function LayoutNavigation({
         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>
   );