What should I do to expand the Header Panel, the Switcher?

[itstunahan]

What should I do to expand the Header Panel, the Switcher?

[tw15egan]

Hey there @itstunahan do you have any more detail so we can help you out, or better yet, an example on CodeSandbox so we can take a look?

[itstunahan]

https://react.carbondesignsystem.com/?path=/story/ui-shell--header-base-w-actions-and-switcher
Thanks @tw15egan. I was stuck with extending the switcher (right panel) in this example. How can I make the HeaderPanel expand and contract when I onClick the HeaderGlobalAction?

[tw15egan]

It looks like the right panel is controlled by the presence of the expanded prop on HeaderPanel. You'll have to create some logic to determine what you want to be populated inside of the HeaderPanel based on which HeaderGlobalAction is clicked (through the onClick event.

Here is a link to more detailed design guidance: https://www.carbondesignsystem.com/components/UI-shell-right-panel/usage

And you can also take a look at the Storybook source code to better help you understand the structure:

carbon/packages/react/src/components/UIShell/UIShell-story.js

Lines 545 to 594 in 5af04eb

	HeaderBaseWActionsAndRightPanel.storyName =
	'Header Base w/ Actions and Right Panel';
	export const HeaderBaseWActionsAndSwitcher = withReadme(readme, () => (
	<Header aria-label="IBM Platform Name">
	<HeaderName href="#" prefix="IBM">
	[Platform]
	</HeaderName>
	<HeaderGlobalBar>
	<HeaderGlobalAction aria-label="Search" onClick={action('search click')}>
	<Search20 />
	</HeaderGlobalAction>
	<HeaderGlobalAction
	aria-label="Notifications"
	onClick={action('notification click')}>
	<Notification20 />
	</HeaderGlobalAction>
	<HeaderGlobalAction
	aria-label="App Switcher"
	isActive
	onClick={action('app-switcher click')}>
	<AppSwitcher20 />
	</HeaderGlobalAction>
	</HeaderGlobalBar>
	<HeaderPanel aria-label="Header Panel" expanded>
	<Switcher aria-label="Switcher Container">
	<SwitcherItem isSelected aria-label="Link 1" href="#">
	Link 1
	</SwitcherItem>
	<SwitcherDivider />
	<SwitcherItem href="#" aria-label="Link 2">
	Link 2
	</SwitcherItem>
	<SwitcherItem href="#" aria-label="Link 3">
	Link 3
	</SwitcherItem>
	<SwitcherItem href="#" aria-label="Link 4">
	Link 4
	</SwitcherItem>
	<SwitcherItem href="#" aria-label="Link 5">
	Link 5
	</SwitcherItem>
	<SwitcherDivider />
	<SwitcherItem href="#" aria-label="Link 6">
	Link 6
	</SwitcherItem>
	</Switcher>
	</HeaderPanel>
	</Header>
	));

If you are new to using Carbon, it may also be helpful to run through the tutorial to better familiarize yourself with the system, and it has some UI Shell sections as well: https://www.carbondesignsystem.com/developing/react-tutorial/overview

Hope this helps!

[itstunahan]

Thank you so much @tw15egan. You are super

[tw15egan]

No problem! Going to close this out, but feel free to comment here if you have more questions and we can reopen it 👍

[gajendr4]

UI Shell Right Panel Switcher in Header is not working in Sandboxes as well as in Local React applications, is there a way to get it normal switching back and forth.

Even on controlling props we aren't able to control the fade up-down animation and also the switcher icon appears twice, its not a good practice to write lot of code for a single components, if there's some good solution please help, it would be really nice if we get like sideNav

Any help would be highly Appreciated