Replace native selects with NovaSelect

resources/js/components/docs/DocsSidebarNav.jsx

@@ -1,4 +1,5 @@
-import React from 'react'
+import React, { useState } from 'react'
+import NovaSelect from '../ui/NovaSelect'
 
 function jumpToSection(targetId) {
   if (!targetId || typeof window === 'undefined') return
@@ -11,24 +12,24 @@ function jumpToSection(targetId) {
 }
 
 export default function DocsSidebarNav({ sections, ariaLabel = 'Sections on this page', selectLabel = 'Jump to section', navTitle = 'On this page' }) {
+  const [selectedSection, setSelectedSection] = useState(null)
+
   return (
     <>
       <div className="lg:hidden">
         <label htmlFor="groups-help-nav" className="sr-only">{selectLabel}</label>
-        <select
+        <NovaSelect
           id="groups-help-nav"
-          className="w-full rounded-[20px] border border-white/10 bg-white/[0.04] px-4 py-3 text-sm text-white outline-none"
-          defaultValue=""
-          onChange={(event) => {
-            jumpToSection(event.target.value)
-            event.target.value = ''
+          className="w-full"
+          value={selectedSection}
+          placeholder="Jump to a section"
+          options={sections.map((section) => ({ value: section.id, label: section.label }))}
+          onChange={(value) => {
+            jumpToSection(value)
+            setSelectedSection(null)
           }}
-        >
-          <option value="">Jump to a section</option>
-          {sections.map((section) => (
-            <option key={section.id} value={section.id}>{section.label}</option>
-          ))}
-        </select>
+          searchable={false}
+        />
       </div>
 
       <nav aria-label={ariaLabel} className="hidden lg:block lg:sticky lg:top-24">