SearchSidebar

Filter sidebar component for search with content type, subjects, technology, and person filters. Collapsible sections; Content Type open by default, others closed but expand when URL has active filters.

Props

Prop	Type	Required	Default	Description
`searchQuery`	`string`	Yes	-	Current search query value
`onSearchQueryChange`	`(value: string) => void`	Yes	-	Callback when search input changes
`onSearchSubmit`	`(event: FormEvent) => void`	Yes	-	Callback when search form is submitted
`onSearchClear`	`() => void`	Yes	-	Callback when search is cleared
`contentTypes`	`FilterOption[]`	Yes	-	Content type filter options
`subjects`	`FilterOption[]`	Yes	-	Subject filter options
`technology`	`FilterOption[]`	Yes	-	Technology filter options (with optional icons)
`authors`	`FilterOption[]`	Yes	-	Person filter options
`selectedContentTypes`	`string[]`	Yes	-	Currently selected content type values
`selectedSubjects`	`string[]`	Yes	-	Currently selected subject term_uids
`selectedTechnology`	`string[]`	Yes	-	Currently selected technology term_uids
`selectedAuthors`	`string[]`	Yes	-	Currently selected author UIDs
`onContentTypeChange`	`(value: string, checked: boolean) => void`	Yes	-	Callback when content type filter changes
`onSubjectChange`	`(value: string, checked: boolean) => void`	Yes	-	Callback when subject filter changes
`onTechnologyChange`	`(value: string, checked: boolean) => void`	Yes	-	Callback when technology filter changes
`onAuthorChange`	`(value: string, checked: boolean) => void`	Yes	-	Callback when person filter changes

1interface FilterOption {
2  value: string;
3  label: string;
4  count: number;
5  iconSrc?: string;  // Optional icon path (e.g. /technologies/react.svg) for technology filter
6}

interface FilterOption {
  value: string;
  label: string;
  count: number;
  iconSrc?: string;  // Optional icon path (e.g. /technologies/react.svg) for technology filter
}

Usage

1import SearchSidebar from '@/components/molecules/SearchSidebar';
2
3<SearchSidebar
4  searchQuery={searchInput}
5  onSearchQueryChange={setSearchInput}
6  onSearchSubmit={handleSearchSubmit}
7  onSearchClear={handleSearchClear}
8  contentTypes={contentTypeOptions}
9  subjects={subjectOptions}
10  technology={technologyOptions}
11  authors={authorOptions}
12  selectedContentTypes={selectedContentTypes}
13  selectedSubjects={selectedSubjects}
14  selectedTechnology={selectedTechnology}
15  selectedAuthors={selectedAuthors}
16  onContentTypeChange={handleContentTypeChange}
17  onSubjectChange={handleSubjectChange}
18  onTechnologyChange={handleTechnologyChange}
19  onAuthorChange={handleAuthorChange}
20/>

import SearchSidebar from '@/components/molecules/SearchSidebar';

<SearchSidebar
  searchQuery={searchInput}
  onSearchQueryChange={setSearchInput}
  onSearchSubmit={handleSearchSubmit}
  onSearchClear={handleSearchClear}
  contentTypes={contentTypeOptions}
  subjects={subjectOptions}
  technology={technologyOptions}
  authors={authorOptions}
  selectedContentTypes={selectedContentTypes}
  selectedSubjects={selectedSubjects}
  selectedTechnology={selectedTechnology}
  selectedAuthors={selectedAuthors}
  onContentTypeChange={handleContentTypeChange}
  onSubjectChange={handleSubjectChange}
  onTechnologyChange={handleTechnologyChange}
  onAuthorChange={handleAuthorChange}
/>

Features

Four filter groups: Content Type, Subjects, Technology, Person
Collapsible sections: Content Type open by default; Subjects, Technology, Person closed. Sections with URL-selected filters expand on load
Technology icons: Options with iconSrc display icons (from /technologies/)
Disabled state: Options with 0 count greyed out
Scrollable lists: Subjects, Technology, Person have max height with scroll
Search bar: Inline search input with clear button

Notes

Uses FilterCheckbox internally; pass iconSrc in technology options for icons
Sections use chevron toggle with 200ms transition

SearchSidebar

Props

FilterOption Type

Usage

Features

Notes