Adds hash routing to settings page. (#200)

plastic-labs · Jan 8, 2025 · e65a315 · e65a315
1 parent 96c4345
commit e65a315
Showing 1 changed file with 26 additions and 9 deletions.
diff --git a/www/app/settings/SettingsLayout.tsx b/www/app/settings/SettingsLayout.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import SubscriptionSettings from '@/components/settings/SubscriptionSettings';
 import { SecuritySettings } from '@/components/settings/SecuritySettings';
 import { AccountSettings } from '@/components/settings/AccountSettings';
@@ -18,14 +18,29 @@ export default function SettingsLayout({
   subscription,
   products,
 }: SettingsProps) {
-  const [activeTab, setActiveTab] = useState('account');
-
-  const navItems = [
+  const navItems = useMemo(() => [
     { id: 'account', label: 'Account' },
     { id: 'security', label: 'Security' },
     { id: 'subscription', label: 'Subscription' },
     { id: 'support', label: 'Support' },
-  ];
+  ], []);
+
+  const [activeTab, setActiveTab] = useState('account'); // Default to 'account' initially
+
+  useEffect(() => {
+    const handleHashChange = () => {
+      const hash = window.location.hash.replace('#', '');
+      if (navItems.some(item => item.id === hash)) {
+        setActiveTab(hash);
+      }
+    };
+
+    // Check initial hash
+    handleHashChange();
+
+    window.addEventListener('hashchange', handleHashChange);
+    return () => window.removeEventListener('hashchange', handleHashChange);
+  }, [navItems]);
 
   return (
     <div className={`flex-1 flex flex-col bg-background text-foreground`}>
@@ -37,12 +52,14 @@ export default function SettingsLayout({
               {navItems.map((item) => (
                 <li key={item.id} className="mb-2">
                   <button
-                    onClick={() => setActiveTab(item.id)}
-                    className={`w-full text-left p-2 rounded transition-colors ${
-                      activeTab === item.id
+                    onClick={() => {
+                      setActiveTab(item.id);
+                      window.location.hash = item.id;
+                    }}
+                    className={`w-full text-left p-2 rounded transition-colors ${activeTab === item.id
                         ? 'bg-accent text-foreground'
                         : 'hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-neon-green/20 dark:hover:text-neon-green'
-                    }`}
+                      }`}
                   >
                     {item.label}
                   </button>