Navigation, state management, create rule button integration

app/components/navigation/TopNav/TopNav.container.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { memo } from "react";
-import { usePathname } from "next/navigation";
+import { usePathname, useRouter } from "next/navigation";
 import { useTranslation } from "../../../contexts/MessagesContext";
 import MenuBarItem from "../MenuBarItem";
 import Button from "../../buttons/Button";
@@ -20,6 +20,7 @@ export const avatarImages = [
 const TopNavContainer = memo<TopNavProps>(
   ({ folderTop = false, loggedIn = false, profile = false, logIn = true }) => {
     const pathname = usePathname();
+    const router = useRouter();
     const t = useTranslation("header");
 
     // Schema markup for site navigation
@@ -164,7 +165,7 @@ const TopNavContainer = memo<TopNavProps>(
           size={buttonSize}
           buttonType={buttonType}
           palette={palette}
-          href="/create/informational"
+          onClick={() => router.push("/create/informational")}
           ariaLabel={t("ariaLabels.createNewRule")}
         >
           {renderAvatarGroup(containerSize, avatarSize)}

app/components/utility/CreateFlowTopNav/CreateFlowTopNav.container.tsx

@@ -20,9 +20,9 @@ const CreateFlowTopNavContainer = memo<CreateFlowTopNavProps>(
   }) => {
     const router = useRouter();
 
-    const handleExit = () => {
+    const handleExit = (options?: { saveDraft?: boolean }) => {
       if (onExit) {
-        onExit();
+        onExit(options);
       } else {
         // Default behavior: navigate to home
         router.push("/");

app/components/utility/CreateFlowTopNav/CreateFlowTopNav.types.ts

@@ -39,9 +39,10 @@ export interface CreateFlowTopNavProps {
    */
   onEdit?: () => void;
   /**
-   * Callback when Exit/Save & Exit button is clicked
+   * Callback when Exit/Save & Exit button is clicked.
+   * When user is logged in, called with { saveDraft: true } to stub "Save & Exit".
    */
-  onExit?: () => void;
+  onExit?: (options?: { saveDraft?: boolean }) => void;
   /**
    * Palette for nav buttons (e.g. "inverse" on completed page to match teal background)
    * @default "default"

app/components/utility/CreateFlowTopNav/CreateFlowTopNav.view.tsx

@@ -89,7 +89,7 @@ export function CreateFlowTopNavView({
             buttonType="outline"
             palette={buttonPalette}
             size="xsmall"
-            onClick={onExit}
+            onClick={() => onExit?.({ saveDraft: loggedIn })}
             ariaLabel={exitButtonText}
             className="md:!text-[12px] md:!leading-[14px] !text-[10px] !leading-[12px] !px-[var(--spacing-scale-006,6px)] md:!px-[var(--spacing-scale-008,8px)] !py-[6px] md:!py-[8px] !border md:!border-[1.5px]"
           >