administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-03-26 18:18:22 +03:00
Code Issues Actions 2 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 <div
className={cn( 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", !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 ALLOWED_VIEWS_FOR_VIEWER = ["ui", "debug", "notifications"];
const LARGE_BOTTOM_MARGIN_PAGES = [
"masksAndZones",
"motionTuner",
"maintenance",
];
// keys for camera sections // keys for camera sections
const CAMERA_SECTION_MAPPING: Record<string, SettingsType> = { const CAMERA_SECTION_MAPPING: Record<string, SettingsType> = {
detect: "cameraDetect", detect: "cameraDetect",
@ -1355,9 +1349,9 @@ export default function Settings() {
)} )}
</div> </div>
</div> </div>
<SidebarProvider> <SidebarProvider className="relative h-full min-h-0 flex-1">
<Sidebar variant="inset" className="relative mb-8 pl-0 pt-0"> <Sidebar variant="inset" className="absolute h-full pl-0 pt-0">
<SidebarContent className="scrollbar-container mb-24 overflow-y-auto border-r-[1px] border-secondary bg-background py-2"> <SidebarContent className="scrollbar-container overflow-y-auto border-r-[1px] border-secondary bg-background py-2">
<SidebarMenu> <SidebarMenu>
{settingsGroups.map((group) => { {settingsGroups.map((group) => {
const filteredItems = group.items.filter((item) => const filteredItems = group.items.filter((item) =>
@ -1445,8 +1439,7 @@ export default function Settings() {
<SidebarInset> <SidebarInset>
<div <div
className={cn( className={cn(
"scrollbar-container mb-16 flex-1 overflow-y-auto p-2 pr-0", "scrollbar-container flex-1 overflow-y-auto pl-2 pr-0 pt-2",
LARGE_BOTTOM_MARGIN_PAGES.includes(pageToggle) && "mb-24",
)} )}
> >
{(() => { {(() => {

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

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