update menu history

ui/litellm-dashboard/src/app/page.tsx

@@ -82,16 +82,26 @@ const CreateKeyPage = () => {
   const invitation_id = searchParams.get("invitation_id");
   const token = getCookie('token');
 
+  // Get page from URL, default to 'api-keys' if not present
   const [page, setPage] = useState(() => {
-    if (typeof window !== 'undefined') {
+    return searchParams.get('page') || 'api-keys';
-      return localStorage.getItem('selectedPage') || "api-keys";
-    }
-    return "api-keys";
   });
 
-  useEffect(() => {
+  // Custom setPage function that updates URL
-    localStorage.setItem('selectedPage', page);
+  const updatePage = (newPage: string) => {
-  }, [page]);
+    // Update URL without full page reload
+    const newSearchParams = new URLSearchParams(searchParams);
+    newSearchParams.set('page', newPage);
+    
+    // Use Next.js router to update URL
+    window.history.pushState(
+      null, 
+      '', 
+      `?${newSearchParams.toString()}`
+    );
+    
+    setPage(newPage);
+  };
 
   const [accessToken, setAccessToken] = useState<string | null>(null);
 
@@ -172,8 +182,8 @@ const CreateKeyPage = () => {
         />
         <div className="flex flex-1 overflow-auto">
           <div className="mt-8">
-                <Sidebar
+              <Sidebar
-                setPage={setPage}
+                setPage={updatePage}
                 userRole={userRole}
                 defaultSelectedKey={page}
               />            

ui/litellm-dashboard/src/components/leftnav.tsx

@@ -7,7 +7,7 @@ const { Sider } = Layout;
 
 // Define the props type
 interface SidebarProps {
-  setPage: React.Dispatch<React.SetStateAction<string>>;
+  setPage: (page: string) => void;
   userRole: string;
   defaultSelectedKey: string;
 }
@@ -67,9 +67,17 @@ const Sidebar: React.FC<SidebarProps> = ({
           style={{ height: "100%", borderRight: 0 }}
         >
           {filteredMenuItems.map(item => (
-            <Menu.Item key={item.key} onClick={() => setPage(item.page)}>
+            <Menu.Item 
-              <Text>{item.label}</Text>
+            key={item.key} 
-            </Menu.Item>
+            onClick={() => {
+              const newSearchParams = new URLSearchParams(window.location.search);
+              newSearchParams.set('page', item.page);
+              window.history.pushState(null, '', `?${newSearchParams.toString()}`);
+              setPage(item.page);
+            }}
+          >
+            <Text>{item.label}</Text>
+          </Menu.Item>
           ))}
         </Menu>
       </Sider>