Skip to content

Commit

Permalink
docs(Nav): fix Flyout nav demo: hide sidebar bug
Browse files Browse the repository at this point in the history
  • Loading branch information
@adamviktora
adamviktora committed Sep 27, 2023
1 parent 39dae6a commit 6d1be11
Showing 1 changed file with 202 additions and 11 deletions.
213 changes: 202 additions & 11 deletions packages/react-core/src/demos/examples/Nav/NavFlyout.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,55 @@
import React from 'react';
import {
Page,
Avatar,
Brand,
Button,
ButtonVariant,
Divider,
Dropdown,
DropdownGroup,
DropdownItem,
DropdownList,
Masthead,
MastheadBrand,
MastheadContent,
MastheadMain,
MastheadToggle,
Menu,
MenuContent,
MenuItem,
MenuList,
MenuToggle,
Nav,
NavList,
NavItem,
PageSidebar,
PageSidebarBody,
NavList,
Page,
PageSection,
PageSectionVariants,
Menu,
MenuContent,
MenuList,
MenuItem
PageSidebar,
PageSidebarBody,
PageToggleButton,
SkipToContent,
Toolbar,
ToolbarContent,
ToolbarGroup,
ToolbarItem
} from '@patternfly/react-core';
import DashboardHeader from '../DashboardHeader';
import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';

export const NavFlyout: React.FunctionComponent = () => {
const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState(false);
const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = React.useState(false);
const [isMobileView, setIsMobileView] = React.useState(false);
const [isSidebarOpenDesktop, setIsSidebarOpenDesktop] = React.useState(true);
const [isSidebarOpenMobile, setIsSidebarOpenMobile] = React.useState(false);
const [activeItem, setActiveItem] = React.useState<number | string>(0);

const onNavSelect = (
Expand All @@ -27,6 +61,23 @@ export const NavFlyout: React.FunctionComponent = () => {
}
) => setActiveItem(selectedItem.itemId);

const onDropdownToggle = () => setIsDropdownOpen((prevState) => !prevState);
const onDropdownSelect = () => setIsDropdownOpen(false);
const onKebabDropdownToggle = () => setIsKebabDropdownOpen((prevState) => !prevState);
const onKebabDropdownSelect = () => setIsKebabDropdownOpen(false);
const onFullKebabToggle = () => setIsFullKebabDropdownOpen((prevState) => !prevState);
const onFullKebabSelect = () => setIsFullKebabDropdownOpen(false);
const onSidebarToggleDesktop = () => setIsSidebarOpenDesktop((prevState) => !prevState);
const onSidebarToggleMobile = () => setIsSidebarOpenMobile((prevState) => !prevState);

interface PageOptions {
mobileView: boolean;
windowSize: number;
}

const onPageResize = (_event: MouseEvent | TouchEvent | React.KeyboardEvent, { mobileView }: PageOptions) =>
setIsMobileView(mobileView);

const onMenuSelect = (_event: React.MouseEvent | undefined, itemId: string | number | undefined) => {
itemId && setActiveItem(itemId);
};
Expand Down Expand Up @@ -56,8 +107,139 @@ export const NavFlyout: React.FunctionComponent = () => {
curFlyout = <FlyoutMenu depth={i}>{curFlyout}</FlyoutMenu>;
}

const kebabDropdownItems = (
<>
<DropdownItem>
<CogIcon /> Settings
</DropdownItem>
<DropdownItem>
<HelpIcon /> Help
</DropdownItem>
</>
);
const userDropdownItems = (
<>
<DropdownItem key="group 2 profile">My profile</DropdownItem>
<DropdownItem key="group 2 user">User management</DropdownItem>
<DropdownItem key="group 2 logout">Logout</DropdownItem>
</>
);

const headerToolbar = (
<Toolbar id="toolbar" isFullHeight isStatic>
<ToolbarContent>
<ToolbarGroup
variant="icon-button-group"
align={{ default: 'alignRight' }}
spacer={{ default: 'spacerNone', md: 'spacerMd' }}
>
<ToolbarItem>
<Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} onClick={() => {}} />
</ToolbarItem>
<ToolbarGroup variant="icon-button-group" visibility={{ default: 'hidden', lg: 'visible' }}>
<ToolbarItem>
<Button aria-label="Settings" variant={ButtonVariant.plain} icon={<CogIcon />} />
</ToolbarItem>
<ToolbarItem>
<Button aria-label="Help" variant={ButtonVariant.plain} icon={<QuestionCircleIcon />} />
</ToolbarItem>
</ToolbarGroup>
<ToolbarItem visibility={{ default: 'hidden', md: 'visible', lg: 'hidden' }}>
<Dropdown
isOpen={isKebabDropdownOpen}
onSelect={onKebabDropdownSelect}
onOpenChange={setIsKebabDropdownOpen}
popperProps={{ position: 'right' }}
toggle={(toggleRef) => (
<MenuToggle
ref={toggleRef}
isExpanded={isKebabDropdownOpen}
onClick={onKebabDropdownToggle}
variant="plain"
aria-label="Settings and help"
>
<EllipsisVIcon aria-hidden="true" />
</MenuToggle>
)}
>
<DropdownList>{kebabDropdownItems}</DropdownList>
</Dropdown>
</ToolbarItem>
<ToolbarItem visibility={{ md: 'hidden' }}>
<Dropdown
isOpen={isFullKebabDropdownOpen}
onSelect={onFullKebabSelect}
onOpenChange={setIsFullKebabDropdownOpen}
popperProps={{ position: 'right' }}
toggle={(toggleRef) => (
<MenuToggle
ref={toggleRef}
isExpanded={isFullKebabDropdownOpen}
onClick={onFullKebabToggle}
variant="plain"
aria-label="Toolbar menu"
>
<EllipsisVIcon aria-hidden="true" />
</MenuToggle>
)}
>
<DropdownGroup key="group 2" aria-label="User actions">
<DropdownList>{userDropdownItems}</DropdownList>
</DropdownGroup>
<Divider />
<DropdownList>{kebabDropdownItems}</DropdownList>
</Dropdown>
</ToolbarItem>
</ToolbarGroup>
<ToolbarItem visibility={{ default: 'hidden', md: 'visible' }}>
<Dropdown
isOpen={isDropdownOpen}
onSelect={onDropdownSelect}
onOpenChange={setIsDropdownOpen}
popperProps={{ position: 'right' }}
toggle={(toggleRef) => (
<MenuToggle
ref={toggleRef}
isExpanded={isDropdownOpen}
onClick={onDropdownToggle}
icon={<Avatar src={imgAvatar} alt="" />}
isFullHeight
>
Ned Username
</MenuToggle>
)}
>
<DropdownList>{userDropdownItems}</DropdownList>
</Dropdown>
</ToolbarItem>
</ToolbarContent>
</Toolbar>
);

const Header = (
<Masthead>
<MastheadToggle>
<PageToggleButton
onSidebarToggle={isMobileView ? onSidebarToggleMobile : onSidebarToggleDesktop}
variant="plain"
aria-label="Global navigation"
>
<BarsIcon />
</PageToggleButton>
</MastheadToggle>
<MastheadMain>
<MastheadBrand>
<Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
</MastheadBrand>
</MastheadMain>
<MastheadContent>{headerToolbar}</MastheadContent>
</Masthead>
);

const isSidebarOpen = isMobileView ? isSidebarOpenMobile : isSidebarOpenDesktop;

const Sidebar = (
<PageSidebar style={{ overflow: 'visible' }}>
<PageSidebar isSidebarOpen={isSidebarOpen} style={isSidebarOpen ? { overflow: 'visible' } : {}}>
<PageSidebarBody>
<Nav onSelect={onNavSelect}>
<NavList>
Expand All @@ -77,8 +259,17 @@ export const NavFlyout: React.FunctionComponent = () => {
</PageSidebar>
);

const pageId = 'main-content-page-layout-flyout-nav';
const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to Content</SkipToContent>;

return (
<Page header={<DashboardHeader />} sidebar={Sidebar} isManagedSidebar>
<Page
header={Header}
sidebar={Sidebar}
onPageResize={onPageResize}
skipToContent={PageSkipToContent}
mainContainerId={pageId}
>
<PageSection variant={PageSectionVariants.darker}>Section with darker background</PageSection>
<PageSection variant={PageSectionVariants.dark}>Section with dark background</PageSection>
<PageSection variant={PageSectionVariants.light}>Section with light background</PageSection>
Expand Down

0 comments on commit 6d1be11

Please sign in to comment.