Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Masthead: add demo that includes horizontal nav #10241

Merged
merged 8 commits into from
Jun 10, 2024
Merged

Masthead: add demo that includes horizontal nav #10241

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
2f1fe4c
add masthead with horizontal nav
ajaypratap003 Apr 2, 2024
a2a567e
implement review comments
ajaypratap003 Apr 24, 2024
525f4a7
add toolbar
ajaypratap003 May 8, 2024
07bd7e6
rebase with main
ajaypratap003 Jun 1, 2024
54784fb
Update packages/react-core/src/demos/examples/Masthead/MastheadWithHo…
tlabaj Jun 5, 2024
561c60e
Update packages/react-core/src/demos/examples/Masthead/MastheadWithHo…
tlabaj Jun 5, 2024
b250ca9
Update packages/react-core/src/demos/examples/Masthead/MastheadWithHo…
tlabaj Jun 5, 2024
40ad9aa
fix layout issue
ajaypratap003 Jun 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions packages/react-core/src/demos/Masthead.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,24 +3,24 @@ id: Masthead
section: components
---

import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-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 pfIcon from './assets/pf-logo-small.svg';
import pfLogo from './assets/pf-logo.svg';
import { Link } from '@reach/router';

## Demos

### Masthead with utilities and user dropdown menu
### Utilities and user dropdown menu

Many mastheads contain utilities which collapse into a dropdown at smaller viewport widths. These utilities could include a notification badge to open and close a notification drawer, a link to app or user settings, a help icon which could launch quick starts or link to other resources, and many other utilities. In this demo, the notification badge does not collapse down into the mobile menu so that it is always visible even at narrower viewport widths.

```ts file='./examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx' isFullscreen

```
### Horizontal nav
```ts file='./examples/Masthead/MastheadWithHorizontalNav.tsx' isFullscreen

```
322 changes: 322 additions & 0 deletions packages/react-core/src/demos/examples/Masthead/MastheadWithHorizontalNav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,322 @@
import React from 'react';
import {
Avatar,
Brand,
Breadcrumb,
BreadcrumbItem,
Button,
ButtonVariant,
Card,
CardBody,
Divider,
Dropdown,
DropdownGroup,
DropdownItem,
DropdownList,
Gallery,
GalleryItem,
Masthead,
MastheadBrand,
MastheadContent,
MastheadMain,
MenuToggle,
MenuToggleElement,
Nav,
NavItem,
NavList,
Page,
PageSection,
PageSectionVariants,
SkipToContent,
Text,
TextContent,
Toolbar,
ToolbarContent,
ToolbarGroup,
ToolbarItem
} from '@patternfly/react-core';
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-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';

interface NavOnSelectProps {
groupId: number | string;
itemId: number | string;
to: string;
}

export const MastheadWithHorizontalNav: React.FunctionComponent = () => {
const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState(false);
const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = React.useState(false);
const [activeItem, setActiveItem] = React.useState(0);

const [isOpen, setIsOpen] = React.useState<boolean>(false);
const menuRef = React.useRef<HTMLDivElement>(null);
const toggleRef = React.useRef<HTMLButtonElement>(null);

const onNavSelect = (_event: React.FormEvent<HTMLInputElement>, selectedItem: NavOnSelectProps) => {
typeof selectedItem.itemId === 'number' && setActiveItem(selectedItem.itemId);
};

const onDropdownToggle = () => {
setIsDropdownOpen(!isDropdownOpen);
};

const onDropdownSelect = () => {
setIsDropdownOpen(!isDropdownOpen);
};

const onKebabDropdownToggle = () => {
setIsKebabDropdownOpen(!isKebabDropdownOpen);
};

const onKebabDropdownSelect = () => {
setIsKebabDropdownOpen(!isKebabDropdownOpen);
};

const onFullKebabDropdownToggle = () => {
setIsFullKebabDropdownOpen(!isFullKebabDropdownOpen);
};

const onFullKebabDropdownSelect = () => {
setIsFullKebabDropdownOpen(!isFullKebabDropdownOpen);
};

const handleMenuKeys = (event: KeyboardEvent) => {
if (!isOpen) {
return;
}
if (menuRef.current?.contains(event.target as Node) || toggleRef.current?.contains(event.target as Node)) {
if (event.key === 'Escape') {
setIsOpen(!isOpen);
toggleRef.current?.focus();
}
}
};

const handleClickOutside = (event: MouseEvent) => {
if (isOpen && !menuRef.current?.contains(event.target as Node)) {
setIsOpen(false);
}
};

React.useEffect(() => {
window.addEventListener('keydown', handleMenuKeys);
window.addEventListener('click', handleClickOutside);

return () => {
window.removeEventListener('keydown', handleMenuKeys);
window.removeEventListener('click', handleClickOutside);
};
}, [isOpen, menuRef]);

const dashboardBreadcrumb = (
<Breadcrumb>
<BreadcrumbItem>Section home</BreadcrumbItem>
<BreadcrumbItem to="#">Section title</BreadcrumbItem>
<BreadcrumbItem to="#">Section title</BreadcrumbItem>
<BreadcrumbItem to="#" isActive>
Section landing
</BreadcrumbItem>
</Breadcrumb>
);

const kebabDropdownItems = (
<>
<DropdownItem key="settings">
<CogIcon /> Settings
</DropdownItem>
<DropdownItem key="help">
<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 PageHorizontalNav = () => (
<ToolbarItem isOverflowContainer>
<Nav
id="page-layout-horizontal-nav-horizontal-nav"
onSelect={onNavSelect}
aria-label="Global"
variant="horizontal"
>
<NavList>
<NavItem itemId={0} isActive={activeItem === 0} to="#horizontal-1">
Horizontal nav item 1
</NavItem>
<NavItem itemId={1} isActive={activeItem === 1} to="#horizontal-2">
Horizontal nav item 2
</NavItem>
<NavItem itemId={2} isActive={activeItem === 2} to="#horizontal-3">
Horizontal nav item 3
</NavItem>
<NavItem itemId={3} isActive={activeItem === 3} to="#horizontal-4">
Horizontal nav item 4
</NavItem>
<NavItem itemId={4} isActive={activeItem === 4} to="#horizontal-5">
Horizontal nav item 5
</NavItem>
<NavItem itemId={5} isActive={activeItem === 4} to="#horizontal-6">
Horizontal nav item 6
</NavItem>
<NavItem itemId={6} isActive={activeItem === 4} to="#horizontal-7">
Horizontal nav item 7
</NavItem>
</NavList>
</Nav>
</ToolbarItem>
);

const headerToolbar = (
<Toolbar id="toolbar" isFullHeight>
<ToolbarContent>
<PageHorizontalNav />
<ToolbarGroup
variant="icon-button-group"
align={{ default: 'alignRight' }}
spacer={{ default: 'spacerNone', md: 'spacerMd' }}
>
<ToolbarItem>
<Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} />
</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={(isOpen: boolean) => setIsKebabDropdownOpen(isOpen)}
popperProps={{ position: 'right' }}
toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
<MenuToggle
ref={toggleRef}
onClick={onKebabDropdownToggle}
isExpanded={isKebabDropdownOpen}
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={onFullKebabDropdownSelect}
onOpenChange={(isOpen: boolean) => setIsFullKebabDropdownOpen(isOpen)}
popperProps={{ position: 'right' }}
toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
<MenuToggle
ref={toggleRef}
onClick={onFullKebabDropdownToggle}
isExpanded={isFullKebabDropdownOpen}
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={(isOpen: boolean) => setIsDropdownOpen(isOpen)}
popperProps={{ position: 'right' }}
toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
<MenuToggle
ref={toggleRef}
onClick={onDropdownToggle}
isFullHeight
isExpanded={isDropdownOpen}
icon={<Avatar src={imgAvatar} alt="" />}
>
Ned Username
</MenuToggle>
)}
>
<DropdownList>{userDropdownItems}</DropdownList>
</Dropdown>
</ToolbarItem>
tlabaj marked this conversation as resolved.
Show resolved Hide resolved
</ToolbarContent>
</Toolbar>
);

const masthead = (
<Masthead>
<MastheadMain>
<MastheadBrand>
<Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
</MastheadBrand>
</MastheadMain>
<MastheadContent>{headerToolbar}</MastheadContent>
</Masthead>
);

const mainContainerId = 'main-content-page-layout-tertiary-nav';

const pageSkipToContent = <SkipToContent href={`#${mainContainerId}`}>Skip to content</SkipToContent>;

return (
<Page
header={masthead}
isManagedSidebar
skipToContent={pageSkipToContent}
breadcrumb={dashboardBreadcrumb}
mainContainerId={mainContainerId}
isTertiaryNavWidthLimited
isBreadcrumbWidthLimited
isTertiaryNavGrouped
isBreadcrumbGrouped
additionalGroupedContent={
<PageSection variant={PageSectionVariants.light}>
<TextContent>
<Text component="h1">Main title</Text>
<Text component="p">This is a full page demo.</Text>
</TextContent>
</PageSection>
}
>
<PageSection>
<Gallery hasGutter>
{Array.from({ length: 10 }).map((_value, index) => (
<GalleryItem key={index}>
<Card>
<CardBody>This is a card</CardBody>
</Card>
</GalleryItem>
))}
</Gallery>
</PageSection>
</Page>
);
};
Loading