administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-03-10 10:33:11 +03:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

collapsible settings sidebar

Browse Source 
use the preexisting control available with shadcn's sidebar (cmd/ctrl-B) to give users more space to set masks/zones on smaller screens
This commit is contained in:
Josh Hawkins 2026-03-04 11:14:50 -06:00
parent 4a860c283f
commit e281a277f3
3 changed files with 6 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/components/config-form/sections/BaseSection.tsx
View File

@ -831,7 +831,7 @@ export function ConfigSection({
<div
className={cn(
"w-full border-t border-secondary bg-background pb-5 pt-0",
"w-full border-t border-secondary bg-background pt-0",
!noStickyButtons && "sticky bottom-0 z-50",
)}
>

15
web/src/pages/Settings.tsx
View File

@ -475,12 +475,6 @@ const CAMERA_SELECT_BUTTON_PAGES = [
const ALLOWED_VIEWS_FOR_VIEWER = ["ui", "debug", "notifications"];
const LARGE_BOTTOM_MARGIN_PAGES = [
"masksAndZones",
"motionTuner",
"maintenance",
];
// keys for camera sections
const CAMERA_SECTION_MAPPING: Record<string, SettingsType> = {
detect: "cameraDetect",
@ -1355,9 +1349,9 @@ export default function Settings() {
)}
</div>
</div>
<SidebarProvider>
<Sidebar variant="inset" className="relative mb-8 pl-0 pt-0">
<SidebarContent className="scrollbar-container mb-24 overflow-y-auto border-r-[1px] border-secondary bg-background py-2">
<SidebarProvider className="relative h-full min-h-0 flex-1">
<Sidebar variant="inset" className="absolute h-full pl-0 pt-0">
<SidebarContent className="scrollbar-container overflow-y-auto border-r-[1px] border-secondary bg-background py-2">
<SidebarMenu>
{settingsGroups.map((group) => {
const filteredItems = group.items.filter((item) =>
@ -1445,8 +1439,7 @@ export default function Settings() {
<SidebarInset>
<div
className={cn(
"scrollbar-container mb-16 flex-1 overflow-y-auto p-2 pr-0",
LARGE_BOTTOM_MARGIN_PAGES.includes(pageToggle) && "mb-24",
"scrollbar-container flex-1 overflow-y-auto pl-2 pr-0 pt-2",
)}
>
{(() => {

2
web/src/views/settings/UiSettingsView.tsx
View File

@ -210,7 +210,7 @@ export default function UiSettingsView() {
];
return (
<div className="flex size-full flex-col md:pb-8">
<div className="flex size-full flex-col">
<Toaster position="top-center" closeButton={true} />
<Heading as="h4" className="mb-3">
{t("general.title")}