import { useRef, useState, useEffect } from 'react'; import { Brand, Breadcrumb, BreadcrumbItem, Button, Card, CardBody, Content, Divider, Gallery, GalleryItem, Masthead, MastheadMain, MastheadLogo, MastheadContent, MastheadBrand, MastheadToggle, MenuToggle, Nav, NavItem, NavList, Page, PageSection, PageToggleButton, SkipToContent, Toolbar, ToolbarContent, ToolbarGroup, ToolbarItem, Tooltip } from '@patternfly/react-core'; import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon'; import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon'; import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon'; import CloudIcon from '@patternfly/react-icons/dist/esm/icons/cloud-icon'; import RhUiCodeIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-code-icon'; import RhUiThumbnailViewSmallFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-thumbnail-view-small-fill-icon'; import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon'; import pfIconLogo from '@patternfly/react-core/src/demos/assets/PF-IconLogo-color.svg'; import globalBreakpointXl from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_xl'; interface NavOnSelectProps { groupId: number | string; itemId: number | string; to: string; } export const NavDockedNav: React.FunctionComponent = () => { const [activeItem, setActiveItem] = useState(1); const [isDockExpanded, setIsDockExpanded] = useState(false); const [isDockTextExpanded, setIsDockTextExpanded] = useState(false); const [isMobile, setIsMobile] = useState(false); useEffect(() => { const mobileBreakpoint = Number.parseInt(globalBreakpointXl.value) * 16; const mediaQuery = window.matchMedia(`(max-width: ${mobileBreakpoint}px)`); const handleResize = (e: MediaQueryListEvent | MediaQueryList) => { setIsMobile(e.matches); }; handleResize(mediaQuery); mediaQuery.addEventListener('change', handleResize); return () => mediaQuery.removeEventListener('change', handleResize); }, []); const onNavSelect = (_event: React.FormEvent, selectedItem: NavOnSelectProps) => { typeof selectedItem.itemId === 'number' && setActiveItem(selectedItem.itemId); }; const mobileTextLogo = ( ); const dockTextLogo = ( ); const dashboardBreadcrumb = ( Section home Section title Section title Section landing ); const navItem1Ref = useRef(null); const navItem2Ref = useRef(null); const navItem3Ref = useRef(null); const navItem4Ref = useRef(null); const appsRef = useRef(null); const settingsRef = useRef(null); const helpRef = useRef(null); const mobileToggleRef = useRef(null); const dockedToggleRef = useRef(null); const onMobileToggle = () => { setIsDockExpanded(!isDockExpanded); setTimeout(() => { dockedToggleRef.current?.focus(); }, 200); }; const onToggleDock = () => { if (isMobile) { setIsDockExpanded(!isDockExpanded); if (isDockExpanded) { setTimeout(() => { mobileToggleRef.current?.focus(); }, 200); } } else { setIsDockTextExpanded(!isDockTextExpanded); } }; // Mobile masthead - shown on mobile viewports only, hidden on desktop const mobileMasthead = ( ); const mainContainerId = 'main-content-page-layout-docked-nav'; const handleClick = (event: React.MouseEvent) => { event.preventDefault(); const mainContentElement = document.getElementById(mainContainerId); if (mainContentElement) { mainContentElement.focus(); } }; const pageSkipToContent = ( Skip to content ); return ( <>

Main title

This is a full page demo.

} > {Array.from({ length: 10 }).map((_value, index) => ( This is a card ))} ); };