feat(web): adjust breakpoint and manage sidebar

There is a lot of room for improvements, but this commits start changing
a bit the breakpoints values and the sidebar behavior becuase most
probably Agama will target a lot of 1024x768 screen resolutions, for
which is dedired to start with the sidebar open and fixed.

web/src/assets/styles/index.scss

@@ -58,6 +58,23 @@
 
 // Temporary CSS rules written during migration to PFv6
 
+// Reserve the sidebar space also for "lg" breakpoint
+@media (width >= 64rem) {
+  .pf-v6-c-page.agm-full-layout {
+    --pf-v6-c-page__sidebar--Width: 12rem; // var(--pf-v6-c-page__sidebar--xl--Width);
+    grid-template-areas:
+      "header  header"
+      "sidebar main  ";
+    grid-template-columns: var(--pf-v6-c-page__sidebar--Width) 1fr;
+  }
+
+  .pf-v6-c-page__sidebar.pf-m-collapsed + .pf-v6-c-page__drawer {
+    --pf-v6-c-page__main-container--GridArea: var(
+      --pf-v6-c-page--masthead--main-container--GridArea
+    );
+  }
+}
+
 #productSelectionForm img {
   max-inline-size: 100px;
 }

web/src/components/layout/Header.tsx

@@ -59,6 +59,8 @@ export type HeaderProps = {
   showInstallerOptions?: boolean;
   /** Callback to be triggered for toggling the IssuesDrawer visibility */
   toggleIssuesDrawer?: () => void;
+  isSidebarOpen?: boolean;
+  toggleSidebar?: () => void;
 };
 
 const OptionsDropdown = ({ showInstallerOptions }) => {
@@ -123,6 +125,8 @@ export default function Header({
   showSidebarToggle = true,
   showProductName = true,
   toggleIssuesDrawer,
+  isSidebarOpen,
+  toggleSidebar,
 }: HeaderProps): React.ReactNode {
   const location = useLocation();
   const { selectedProduct } = useProduct();
@@ -143,6 +147,8 @@ export default function Header({
         {showSidebarToggle && (
           <MastheadToggle>
             <PageToggleButton
+              isSidebarOpen={isSidebarOpen}
+              onSidebarToggle={toggleSidebar}
               id="uncontrolled-nav-toggle"
               variant="plain"
               aria-label={_("Main navigation")}

web/src/components/layout/Layout.tsx

@@ -28,8 +28,10 @@ import Header, { HeaderProps } from "~/components/layout/Header";
 import { Loading, Sidebar } from "~/components/layout";
 import { IssuesDrawer } from "~/components/core";
 import { ROOT } from "~/routes/paths";
+import { agamaWidthBreakpoints, getBreakpoint } from "~/utils";
 
 export type LayoutProps = React.PropsWithChildren<{
+  className?: string;
   mountHeader?: boolean;
   mountSidebar?: boolean;
   headerOptions?: HeaderProps;
@@ -56,21 +58,35 @@ const Layout = ({
   mountSidebar = true,
   headerOptions = {},
   children,
+  ...props
 }: LayoutProps) => {
   const drawerRef = useRef();
   const location = useLocation();
   const [issuesDrawerVisible, setIssuesDrawerVisible] = useState<boolean>(false);
   const closeIssuesDrawer = () => setIssuesDrawerVisible(false);
   const toggleIssuesDrawer = () => setIssuesDrawerVisible(!issuesDrawerVisible);
+  const [isSidebarOpen, setIsSidebarOpen] = useState<boolean>(true);
+  const [windowSize, setWindowSize] = useState<number>();
+
+  const onPageResize = (_, { windowSize: newWindowSize }: { windowSize: number }) => {
+    if (newWindowSize === windowSize) return;
+    setWindowSize(newWindowSize);
+    mountSidebar && setIsSidebarOpen(newWindowSize >= agamaWidthBreakpoints.lg);
+  };
 
   const pageProps: Omit<PageProps, keyof React.HTMLProps<HTMLDivElement>> = {
     isManagedSidebar: true,
   };
 
-  if (mountSidebar) pageProps.sidebar = <Sidebar />;
+  if (mountSidebar) {
+    pageProps.sidebar = <Sidebar isManagedSidebar={false} isSidebarOpen={isSidebarOpen} />;
+    pageProps.isManagedSidebar = false;
+  }
   if (mountHeader) {
     pageProps.masthead = (
       <Header
+        isSidebarOpen={isSidebarOpen}
+        toggleSidebar={() => setIsSidebarOpen(!isSidebarOpen)}
         showSidebarToggle={mountSidebar}
         toggleIssuesDrawer={toggleIssuesDrawer}
         {...headerOptions}
@@ -90,10 +106,12 @@ const Layout = ({
   return (
     <>
       <Page
+        onPageResize={onPageResize}
+        getBreakpoint={getBreakpoint}
         isContentFilled
         {...pageProps}
+        {...props}
         onNotificationDrawerExpand={() => focusDrawer(drawerRef.current)}
-        className="agm-layout"
       >
         <Suspense fallback={<Loading />}>{children || <Outlet />}</Suspense>
       </Page>
@@ -104,6 +122,7 @@ const Layout = ({
 
 /** Default props for FullLayout */
 const fullProps: LayoutProps = {
+  className: "agm-full-layout",
   mountHeader: true,
   mountSidebar: true,
   headerOptions: {
@@ -120,6 +139,7 @@ const Full = (props: LayoutProps) => <Layout {...fullProps} {...props} />;
 
 /** Default props for PlainLayout */
 const plainProps: LayoutProps = {
+  className: "agm-plain-layout",
   mountHeader: true,
   mountSidebar: false,
   headerOptions: {

web/src/components/layout/Sidebar.tsx

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) [2024] SUSE LLC
+ * Copyright (c) [2024-2025] SUSE LLC
  *
  * All Rights Reserved.
  *
@@ -22,7 +22,15 @@
 
 import React from "react";
 import { NavLink } from "react-router-dom";
-import { Nav, NavItem, NavList, PageSidebar, PageSidebarBody, Stack } from "@patternfly/react-core";
+import {
+  Nav,
+  NavItem,
+  NavList,
+  PageSidebar,
+  PageSidebarBody,
+  PageSidebarProps,
+  Stack,
+} from "@patternfly/react-core";
 import { Icon } from "~/components/layout";
 import { ChangeProductLink } from "~/components/core";
 import { rootRoutes } from "~/router";
@@ -62,9 +70,9 @@ const MainNavigation = (): React.ReactNode => {
   );
 };
 
-export default function Sidebar(): React.ReactNode {
+export default function Sidebar(props: PageSidebarProps): React.ReactNode {
   return (
-    <PageSidebar id="agama-sidebar">
+    <PageSidebar id="agama-sidebar" {...props}>
       <PageSidebarBody isFilled>
         <MainNavigation />
       </PageSidebarBody>

web/src/utils.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) [2022-2024] SUSE LLC
+ * Copyright (c) [2022-2025] SUSE LLC
  *
  * All Rights Reserved.
  *
@@ -407,6 +407,36 @@ const mask = (value, visible = 4, character = "*") => {
   return value.replace(regex, character);
 };
 
+const agamaWidthBreakpoints = {
+  sm: parseInt("36rem") * 16,
+  md: parseInt("48rem") * 16,
+  lg: parseInt("64rem") * 16,
+  xl: parseInt("75rem") * 16,
+  "2xl": parseInt("90rem") * 16,
+};
+
+const getBreakpoint = (width: number): "default" | "sm" | "md" | "lg" | "xl" | "2xl" => {
+  if (width === null) {
+    return null;
+  }
+  if (width >= agamaWidthBreakpoints["2xl"]) {
+    return "2xl";
+  }
+  if (width >= agamaWidthBreakpoints.xl) {
+    return "xl";
+  }
+  if (width >= agamaWidthBreakpoints.lg) {
+    return "lg";
+  }
+  if (width >= agamaWidthBreakpoints.md) {
+    return "md";
+  }
+  if (width >= agamaWidthBreakpoints.sm) {
+    return "sm";
+  }
+  return "default";
+};
+
 export {
   noop,
   identity,
@@ -428,4 +458,6 @@ export {
   slugify,
   timezoneTime,
   mask,
+  getBreakpoint,
+  agamaWidthBreakpoints,
 };