diff --git a/apps/studio/components/layouts/NavigationV2/DefaultLayoutV2.tsx b/apps/studio/components/layouts/NavigationV2/DefaultLayoutV2.tsx index a95f1c273cd..b13e111306a 100644 --- a/apps/studio/components/layouts/NavigationV2/DefaultLayoutV2.tsx +++ b/apps/studio/components/layouts/NavigationV2/DefaultLayoutV2.tsx @@ -17,9 +17,9 @@ export interface DefaultLayoutV2Props { headerTitle?: string } -const LEFT_SIDEBAR_MIN_SIZE_PERCENTAGE = 14 -const LEFT_SIDEBAR_DEFAULT_SIZE_PERCENTAGE = 18 -const LEFT_SIDEBAR_MAX_SIZE_PERCENTAGE = 32 +const contentMaxSizePercentage = 70 +const leftSidebarMinSize = 220 +const leftSidebarMaxSize = 450 /** * New three-column layout for the dashboard (V2 navigation). @@ -57,9 +57,9 @@ export const DefaultLayoutV2 = ({ children }: PropsWithChildren @@ -67,9 +67,9 @@ export const DefaultLayoutV2 = ({ children }: PropsWithChildren
{children}
diff --git a/apps/studio/components/layouts/NavigationV2/RightIconRail.tsx b/apps/studio/components/layouts/NavigationV2/RightIconRail.tsx index 4025278552a..2bdb7054737 100644 --- a/apps/studio/components/layouts/NavigationV2/RightIconRail.tsx +++ b/apps/studio/components/layouts/NavigationV2/RightIconRail.tsx @@ -1,7 +1,7 @@ import { useBreakpoint } from 'common' import { SqlEditor } from 'icons' import { HelpCircle, Lightbulb } from 'lucide-react' -import type { ReactNode } from 'react' +import { useEffect, type ReactNode } from 'react' import { useSidebarManagerSnapshot } from 'state/sidebar-manager-state' import { AiIconAnimation, @@ -14,6 +14,8 @@ import { TooltipTrigger, } from 'ui' +import { useMobileSheet } from '../Navigation/NavigationBar/MobileSheetContext' +import { isSidebarId } from '../ProjectLayout/LayoutSidebar' import { SIDEBAR_KEYS } from '../ProjectLayout/LayoutSidebar/LayoutSidebarProvider' interface RailItem { @@ -45,19 +47,38 @@ const RAIL_ITEMS: RailItem[] = [ icon: () => , }, { - id: SIDEBAR_KEYS.SUPPORT_PANEL, + // id: SIDEBAR_KEYS.SUPPORT_PANEL, + id: SIDEBAR_KEYS.HELP_PANEL, label: 'Help & Support', icon: () => , }, ] -const RIGHT_SIDEBAR_MIN_SIZE_PERCENTAGE = 22 -const RIGHT_SIDEBAR_DEFAULT_SIZE_PERCENTAGE = 34 -const RIGHT_SIDEBAR_MAX_SIZE_PERCENTAGE = 55 +const RIGHT_SIDEBAR_MIN_SIZE_PERCENTAGE = 300 +const RIGHT_SIDEBAR_DEFAULT_SIZE_PERCENTAGE = 340 +const RIGHT_SIDEBAR_MAX_SIZE_PERCENTAGE = 750 function RightIconRail() { const { activeSidebar, toggleSidebar } = useSidebarManagerSnapshot() + const isMobile = useBreakpoint('md') + const { content: sheetContent, setContent: setMobileSheetContent } = useMobileSheet() + + useEffect(() => { + if (!isMobile) { + setMobileSheetContent(null) + return + } + if (activeSidebar?.component) { + setMobileSheetContent(activeSidebar.id) + } else if (isSidebarId(sheetContent)) { + setMobileSheetContent(null) + } + }, [isMobile, activeSidebar, sheetContent, setMobileSheetContent]) + + // if (!activeSidebar?.component) return null + // if (isMobile) return null + return (