problem: can't nav to rocket view page

src/components/RocketCard.svelte

@@ -1,9 +1,25 @@
 <script lang="ts">
+	import { goto } from '$app/navigation';
+	import { base } from '$app/paths';
 	import { Button } from '$lib/components/ui/button/index.js';
 	import * as Card from '$lib/components/ui/card/index.js';
 	import type { NDKEvent } from '@nostr-dev-kit/ndk';
 
 	export let rocketEvent: NDKEvent;
+    //$page.url.searchParams.get("tab")
+    function getRocketURL(e:NDKEvent):string {
+
+        let ignitionID = undefined;
+        if (e.getMatchingTags('ignition') && e.getMatchingTags('ignition')[0] && e.getMatchingTags('ignition')[0][1]) {
+            ignitionID = e.getMatchingTags('ignition')[0][1]
+        }
+        if (!ignitionID) {
+            ignitionID = e.id
+        }
+        let d = e.getMatchingTags('d')[0][1]
+        let p = e.pubkey
+        return `${ignitionID}?d=${d}&p=${p}`
+    }
 </script>
 
 <Card.Root class="w-[350px]">
@@ -14,6 +30,6 @@
 	<Card.Content></Card.Content>
 	<Card.Footer class="flex justify-between">
         <Button on:click={()=>{console.log(rocketEvent.rawEvent())}} variant="outline">Print to Console</Button>
-		<Button>View Full Rocket</Button>
+		<Button on:click={()=>{goto(`${base}/rockets/${getRocketURL(rocketEvent)}`)}}>View Full Rocket</Button>
 	</Card.Footer>
 </Card.Root>

src/layouts/SidePanelLayout.svelte

@@ -103,8 +103,8 @@
 				</DropdownMenu.Content>
 			</DropdownMenu.Root>
 		</header>
-		<main class="flex flex-1 flex-col gap-4 p-4 lg:gap-6 lg:p-6">
+		<div class="flex flex-1 flex-col gap-4 p-4 lg:gap-6 lg:p-6">
 			<slot name="content"></slot>
-		</main>
+    </div>
 	</div>
 </div>