PatternFly

import { useRef, useState, useEffect } from 'react'; import { Compass, CompassContent, CompassMainHeader, CompassDockMain, Panel, PanelMain, PanelMainBody, Title, NavItem, NavList, Nav, Brand, MastheadLogo, MastheadBrand, MastheadContent, MastheadMain, MastheadToggle, Masthead, Toolbar, ToolbarContent, ToolbarItem, ToolbarGroup, MenuToggle, Button, Tooltip, Divider, PageToggleButton } from '@patternfly/react-core'; import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon'; import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon'; import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-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 SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon'; import pfLogo from '../../assets/PF-IconLogo-color.svg'; import RhUiThumbnailViewSmallFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-thumbnail-view-small-fill-icon'; import globalBreakpointLg from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_lg'; interface NavOnSelectProps { groupId: number | string; itemId: number | string; to: string; } export const CompassDockDemo: React.FunctionComponent = () => { const [activeItem, setActiveItem] = useState(0); const [isDockExpanded, setIsDockExpanded] = useState(false); const [isDockTextExpanded, setIsDockTextExpanded] = useState(false); const [isMobile, setIsMobile] = useState(false); useEffect(() => { const mobileBreakpoint = Number.parseInt(globalBreakpointLg.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 navItem1Ref = useRef(null); const navItem2Ref = useRef(null); const navItem3Ref = useRef(null); const navItem4Ref = useRef(null); const settingsRef = useRef(null); const helpRef = useRef(null); const appsRef = 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); } }; const mobileTextLogo = ( ); const dockTextLogo = ( ); // Mobile masthead - shown on mobile viewports only, hidden on desktop const mobileMasthead = ( ); const mainContent = ( <> Content title} panelProps={{ isGlass: true }} /> Content ); return ( ); };