more fixes

resources/js/Layouts/SettingsLayout.jsx

@@ -51,28 +51,83 @@ function SidebarContent({ isActive, onNavigate }) {
   )
 }
 
-export default function SettingsLayout({ children, title }) {
+function SectionSidebar({ sections = [], activeSection, onSectionChange }) {
+  return (
+    <>
+      <div className="mb-6">
+        <h2 className="text-xs font-semibold uppercase tracking-wider text-slate-500 px-4 mb-2">Settings</h2>
+      </div>
+
+      <nav className="space-y-1 flex-1">
+        {sections.map((section) => {
+          const active = section.key === activeSection
+          return (
+            <button
+              key={section.key}
+              type="button"
+              onClick={() => onSectionChange?.(section.key)}
+              className={`w-full flex items-center gap-3 px-4 py-2.5 rounded-xl text-sm font-medium transition-all duration-200 ${
+                active
+                  ? 'bg-accent/20 text-accent shadow-sm shadow-accent/10'
+                  : 'text-slate-400 hover:text-white hover:bg-white/5'
+              }`}
+            >
+              {section.icon ? <i className={`${section.icon} w-5 text-center text-base`} /> : null}
+              <span>{section.label}</span>
+            </button>
+          )
+        })}
+      </nav>
+    </>
+  )
+}
+
+export default function SettingsLayout({ children, title, sections = null, activeSection = null, onSectionChange = null }) {
   const { url } = usePage()
   const [mobileOpen, setMobileOpen] = useState(false)
+  const hasSectionMode = Array.isArray(sections) && sections.length > 0 && typeof onSectionChange === 'function'
 
   const isActive = (href) => url.startsWith(href)
 
+  const currentSection = hasSectionMode
+    ? sections.find((section) => section.key === activeSection)
+    : null
+
   return (
     <div className="min-h-screen bg-nova-900">
       {/* Mobile top bar */}
-      <div className="lg:hidden flex items-center justify-between px-4 py-3 border-b border-white/10 bg-nova-900/80 backdrop-blur-xl sticky top-16 z-30">
-        <h1 className="text-lg font-bold text-white">Settings</h1>
-        <button
-          onClick={() => setMobileOpen(!mobileOpen)}
-          className="text-slate-400 hover:text-white p-2"
-          aria-label="Toggle navigation"
-        >
-          <i className={`fa-solid ${mobileOpen ? 'fa-xmark' : 'fa-bars'} text-xl`} />
-        </button>
+      <div className="lg:hidden px-4 py-3 border-b border-white/10 bg-nova-900/80 backdrop-blur-xl sticky top-16 z-30">
+        {hasSectionMode ? (
+          <label className="block">
+            <span className="sr-only">Settings section</span>
+            <select
+              className="w-full rounded-xl border border-white/10 bg-white/5 px-3 py-2 text-sm text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+              value={activeSection || ''}
+              onChange={(e) => onSectionChange(e.target.value)}
+            >
+              {sections.map((section) => (
+                <option key={section.key} value={section.key} className="bg-nova-900 text-white">
+                  {section.label}
+                </option>
+              ))}
+            </select>
+          </label>
+        ) : (
+          <div className="flex items-center justify-between">
+            <h1 className="text-lg font-bold text-white">Settings</h1>
+            <button
+              onClick={() => setMobileOpen(!mobileOpen)}
+              className="text-slate-400 hover:text-white p-2"
+              aria-label="Toggle navigation"
+            >
+              <i className={`fa-solid ${mobileOpen ? 'fa-xmark' : 'fa-bars'} text-xl`} />
+            </button>
+          </div>
+        )}
       </div>
 
-      {/* Mobile nav overlay */}
-      {mobileOpen && (
+      {/* Mobile nav overlay (legacy mode only) */}
+      {!hasSectionMode && mobileOpen && (
         <div className="lg:hidden fixed inset-0 z-40 bg-black/60 backdrop-blur-sm" onClick={() => setMobileOpen(false)}>
           <nav
             className="absolute left-0 top-0 bottom-0 w-72 bg-nova-900 border-r border-white/10 p-4 pt-20 space-y-1"
@@ -86,13 +141,22 @@ export default function SettingsLayout({ children, title }) {
       <div className="flex">
         {/* Desktop sidebar */}
         <aside className="hidden lg:flex flex-col w-64 min-h-[calc(100vh-4rem)] border-r border-white/10 bg-nova-900/60 backdrop-blur-xl p-4 pt-6 sticky top-16 self-start">
-          <SidebarContent isActive={isActive} />
+          {hasSectionMode ? (
+            <SectionSidebar sections={sections} activeSection={activeSection} onSectionChange={onSectionChange} />
+          ) : (
+            <SidebarContent isActive={isActive} />
+          )}
         </aside>
 
         {/* Main content */}
-        <main className="flex-1 min-w-0 px-4 lg:px-8 pt-4 pb-8 max-w-4xl">
+        <main className="flex-1 min-w-0 px-4 lg:px-8 pt-4 pb-8 max-w-5xl">
           {title && (
-            <h1 className="text-2xl font-bold text-white mb-6">{title}</h1>
+            <div className="mb-6">
+              <h1 className="text-2xl font-bold text-white">{title}</h1>
+              {currentSection?.description ? (
+                <p className="text-sm text-slate-400 mt-1">{currentSection.description}</p>
+              ) : null}
+            </div>
           )}
           {children}
         </main>