Add docked navigation demos

[gabipodolnikova]

Summary

• Add a Canvas demo with docked navigation.
• Add a fullscreen ChatBot demo with docked navigation and chat history.
• The Canvas demo lives under the Canvas pattern page.
• The fullscreen ChatBot demo lives under the ChatBot extension pages.

Jira

https://redhat.atlassian.net/browse/PF-4634

[patternfly-build]

Preview: https://chatbot-pr-chatbot-913.surge.sh

A11y report: https://chatbot-pr-chatbot-913-a11y.surge.sh

[kaylachumley]

Hey! Is this the right area for the demo? https://chatbot-pr-chatbot-913.surge.sh/extensions/chatbot/overview/demo#fullscreen-chatbot-with-docked-navigation

Im not seeing a docked nav rail? Im also not seeing a canvas demo with a docked nav either.

Note on the icon question you sent on slack: technically both the hamburger bars and the bars with an arrow are correct. If you check out this demo you can see that we added a micro animation that changes the icon on hover to show the user the direction in which the nav or drawer opens. in this case, our history drawer would open on click next to the docked nav rail. The animation is newer since you came back!

[rebeccaalpert]

@kaylachumley I think it's https://chatbot-pr-chatbot-913.surge.sh/patterns/canvas/demo/with-docked-navigation/ and https://chatbot-pr-chatbot-913.surge.sh/extensions/chatbot/overview/demo/fullscreen-chatbot-with-docked-navigation/.

[kaylachumley]

Looking good! Are we able to add the hamburger menu micro animation? I know you mentioned that having some custom css.. also can we please add a tooltip to the pencil icon in the docked nav on hover? the tooltip to say "New chat". Thank you!!

[kaylachumley]

Looks good! per our discussion about the settings icon and making that functional, can we replicate how the settings open like this prototype? - Thanks gabi!

https://www.figma.com/proto/MSr6kVEOuAxmPOkjg7x8PO/branch/KHVQOlQEMu8J9PA0r2eSul/PatternFly-6--Patterns---Extensions?node-id=13730-55381&viewport=-8865%2C4947%2C0.5&t=4he38sfS4S6gcvTG-1&scaling=min-zoom&content-scaling=fixed&starting-point-node-id=13559%3A39630&page-id=

[rebeccaalpert]

Overall this is looking good to me! Thank you. We're missing some functionality from the other Canvas demo - can you take a look to get parity? I think @kaylachumley will want consistency there. We may also want a border around the avatar in the docked nav due to the background color.

Docked nav avatar	ChatBot avatar

Close button should have tooltip/label:

Popover on label:

Launch canvas from menu/hide Canvas label when closed:

CodeEditor content is different:

I see that Page is required for Hamburger navigations - I think your workaround works. I mentioned this to @mcoker so he is aware.

Logic is different for sending a message between the two Canvas demos as well (original mocks an AI call for Bot response; new demo doesn't).

[rebeccaalpert]

I don't care either way but icon imports should probably be consistent.

[mcoker]

This is totally cool. But there are a couple of other ways you could do it.

1. Use the button component vars here for these values. These will be a little more resistant to breaking changes than using the manual values. Also this will make the arrows work properly in RTL - right now the arrows don't change for RTL. You could use @patternfly/react-tokens instead of hardcoding the vars, but it doesn't look like you're importing that so I don't think it's worth the hassle.

Suggested change

	.pf-chatbot__canvas-history-toggle.pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
	--pf-v6-c-button--hamburger-icon--top--path: path("M5,1 L9,1");
	--pf-v6-c-button--hamburger-icon--arrow--path: path("M3,7 L1,5 L3,3");
	--pf-v6-c-button--hamburger-icon--bottom--path: path("M9,9 L5,9");
	--pf-v6-c-button--hover__icon--ScaleX: -1;
	--pf-v6-c-button__icon--TransitionDelay: 0s;
	--pf-v6-c-button--hover__icon--TransitionDelay: 0s;
	}
	.pf-chatbot__canvas-history-toggle.pf-v6-c-button.pf-m-hamburger[aria-expanded="true"]:is(:hover, :focus-visible) {
	--pf-v6-c-button--hover__icon--ScaleX: 1;
	}
	.pf-chatbot__canvas-history-toggle.pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
	--pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
	--pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
	--pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
	--pf-v6-c-button__icon--TransitionDelay: 0s;
	--pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
	}
	.pf-chatbot__canvas-history-toggle.pf-v6-c-button.pf-m-hamburger[aria-expanded="true"]:is(:hover, :focus-visible) {
	--pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
	}

2. Add an event listener for hover/focus/aria-expanded and apply hamburgerVariant="expand" and hamburgerVariant="collapse" as needed. That would be ideal as far as always staying in sync with core, but I realize that might be a little heavy handed for something CSS can do easily.