pi sills

src/apps/officer-web/Screens/Dashboard/Settings/SettingsPanel.tsx

@@ -24,6 +24,7 @@ type SettingsSidebarProps = {
   label: string;
   sections: SettingsSection[];
   groups?: SettingsSectionGroup[];
+  hideHeader?: boolean;
 };
 
 const SectionButton = ({
@@ -50,7 +51,7 @@ const SectionButton = ({
   </button>
 );
 
-export const SettingsSidebar = ({ globalKey, icon: Icon, label, sections, groups }: SettingsSidebarProps) => {
+export const SettingsSidebar = ({ globalKey, icon: Icon, label, sections, groups, hideHeader }: SettingsSidebarProps) => {
   const allSections = groups ? groups.flatMap((g) => g.sections) : sections;
   const [selectedKey, setSelectedKey] = useGlobal<string | null>(globalKey, allSections[0]?.key ?? null);
   const [search, setSearch] = useState('');
@@ -61,12 +62,14 @@ export const SettingsSidebar = ({ globalKey, icon: Icon, label, sections, groups
 
   return (
     <div className="flex flex-col h-full overflow-y-auto">
-      <div className="p-3 pb-2">
-        <div className="flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm font-medium bg-duck-teal/15 text-duck-teal">
-          <Icon className="h-4 w-4" />
-          {label}
+      {!hideHeader && (
+        <div className="p-3 pb-2">
+          <div className="flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm font-medium bg-duck-teal/15 text-duck-teal">
+            <Icon className="h-4 w-4" />
+            {label}
+          </div>
         </div>
-      </div>
+      )}
       <div className="px-3 pb-2">
         <Input placeholder="Search..." value={search} onChange={(ev) => setSearch(ev.target.value)} className="h-8 text-xs" />
       </div>