closes #7257
closes #7151
closes #7559

Links:

• settings menu toggle
• settings menu toggle in page demo
• settings button
• hamburger button
• hamburger button in demo

This PR adds:

Settings button and menu toggle

Adds .pf-v6-c-button.pf-m-settings and .pf-v6-c-menu-toggle.pf-m-settings. Nothing tricky, the button/menu-toggle icon element rotates on hover. Takes the regular cog icon.

Hamburger button

This adds .pf-v6-c-button.pf-m-hamburger that requires a specific svg as its icon. For the button variation, there is also .pf-m-collapse and .pf-m-expand that put it in the "collapse" and "expand" states. "collapse" means clicking on it will collapse something (when the hamburger arrow points to the left), "expand" is the opposite. Thinking about that a little, this works for the hamburger, but if it's for a drawer that opens and closes from the right side of the screen, expand and collapse would point in opposite directions. @andrew-ronaldson wdyt? We don't name things "left/right" for RTL reasons, and we use "start/end" instead most of the time, but I don't know if that's appropriate here. Any ideas?

The video below is the animation wired up in a react workspace to show the interaction. Sorry you can't see my mouse.

The only wrinkle I see is at the 20s mark, when you shrink your screen from desktop to mobile, there is a small delay for the nav to collapse. Here's why that's what's happening. * I noticed another issue - if you're at a mobile viewport and reload the page, you see the hamburger menu blip with an arrow very quickly. I believe it's the same issue - we add .pf-m-expanded to the sidebar by default, then remove it when we detect you're on a mobile viewport.

• The react component adds .pf-m-expanded to the sidebar when it's expanded on mobile and desktop even though that class only works on mobile (desktop is expanded by default without .pf-m-expanded). So if you load the page on desktop, you're starting out with the sidebar expanded on mobile per the markup.
• When you resize the window, react monitors the window size and removes .pf-m-expanded once you hit the mobile breakpoint, but only after you stop resizing the window. So you're technically in the mobile breakpoint with the sidebar expanded (because of .pf-m-expanded) until you stop resizing the window, then the class is removed.

I'm not saying we need to fix this now, but as a bug fix, I wonder if we could:

• Remove .pf-m-expanded from the sidebar by default.
• When you click on the hamburger, we use isMobile to determine if we need to add .pf-m-expanded or not (only add it if you're on mobile).
• The blip on refresh on mobile should be fixed if we just remove .pf-m-expanded as a default style.

The react changes I made to enable this are simple, just add the react variation and use it in <PageToggleButton>:

diff --git a/packages/react-core/src/components/Page/PageToggleButton.tsx b/packages/react-core/src/components/Page/PageToggleButton.tsx
index d26ea303b7..6585ea590d 100644
--- a/packages/react-core/src/components/Page/PageToggleButton.tsx
+++ b/packages/react-core/src/components/Page/PageToggleButton.tsx
@@ -35,10 +35,15 @@ export const PageToggleButton: React.FunctionComponent<PageToggleButtonProps> =
           aria-label="Side navigation toggle"
           aria-expanded={sidebarOpen ? 'true' : 'false'}
           variant={ButtonVariant.plain}
+          className="pf-m-hamburger"
+          icon={<svg viewBox="0 0 10 10" className="pf-v6-c-button--hamburger-icon pf-v6-svg" width="1em" height="1em">
+              <path className="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1"></path>
+              <path className="pf-v6-c-button--hamburger-icon--middle" d="M1,5 L9,5"></path>
+              <path className="pf-v6-c-button--hamburger-icon--arrow" d="M1,5 L1,5 L1,5"></path>
+              <path className="pf-v6-c-button--hamburger-icon--bottom" d="M9,9 L1,9"></path>
+            </svg>}
           {...props}
-        >
-          {children}
-        </Button>
+        />
       );
     }}
   </PageContextConsumer>