Moved docked demo to Nav docs

Author: thatblindgeye

packages/react-core/src/demos/Nav.md

@@ -3,7 +3,7 @@ id: Navigation
 section: components
 ---
 
-import { Fragment, useState } from 'react';
+import { Fragment, useState, useRef } from 'react';
 import RhUiSettingsFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-fill-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
@@ -12,6 +12,13 @@ import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';
+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 CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
+import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-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 { DashboardBreadcrumb } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 import { DashboardHeader } from '@patternfly/react-core/dist/js/demos/DashboardHeader';
 
@@ -70,3 +77,33 @@ import { DashboardHeader } from '@patternfly/react-core/dist/js/demos/DashboardH
 ```ts isFullscreen file="./examples/Nav/NavDrilldown.tsx"
 
 ```
+
+### Docked nav
+
+The docked navigation pattern provides a responsive vertical navigation layout that adapts between mobile and desktop viewports. On mobile, the navigation appears as an overlay, while on desktop it displays as a persistent vertical sidebar that can toggle between icon-only and text+icon modes.
+
+**Key implementation requirements:**
+
+1. **Page component**: Set `variant="docked"` to enable the docked layout. Pass `isDockExpanded` and `isDockTextExpanded` state props to control mobile overlay and desktop text visibility.
+
+2. **Masthead structure**: Use two separate mastheads:
+   - **Mobile masthead**: Set `display={{ default: 'inline' }}` so it only appears on mobile. Include a hamburger toggle button, logo, and any mobile-specific actions.
+   - **Docked masthead**: Set `variant="docked"` for the vertical navigation sidebar. This contains the navigation toggle, nav items, and action buttons.
+
+3. **Navigation component**: Set `variant="docked"` on Nav and pass `isTextExpanded={isDockTextExpanded}` to control text visibility. NavItems should include both icons and text children—the Nav component will handle showing/hiding text based on state.
+
+4. **Buttons and toggles**: Use `isDocked` and `isTextExpanded` props on Button and MenuToggle components within the docked navigation. These props apply dock-specific styling that toggles between icon-only and text+icon display.
+
+5. **Logo variants**: Use `isCompact` prop on MastheadLogo to show an icon-only logo when the dock is collapsed, and a full logo with text when expanded.
+
+6. **Focus management**: Implement focus shifting between the mobile toggle button and docked nav toggle button when opening/closing the navigation for better keyboard accessibility.
+
+7. **Tooltips**: Only render tooltips when text is hidden (icon-only mode) to avoid showing redundant information when text labels are already visible.
+
+8. **State management**:
+   - `isDockExpanded`: Controls whether the mobile overlay is shown
+   - `isDockTextExpanded`: Controls whether text is displayed alongside icons on desktop
+
+```ts file="./examples/Nav/NavDockedNav.tsx" isFullscreen
+
+```

packages/react-core/src/demos/Page.md

@@ -18,8 +18,6 @@ import CloudIcon from '@patternfly/react-icons/dist/esm/icons/cloud-icon';
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
 import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';
 import pfIconLogo from '@patternfly/react-core/src/demos/assets/PF-IconLogo-color.svg';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
-import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon';
 
 - All examples set the `isManagedSidebar` prop on the Page component to have the sidebar automatically close for smaller screen widths. You can also manually control this behavior by not adding the `isManagedSidebar` prop and instead:
   1. Add an onNavToggle callback to PageHeader
@@ -54,9 +52,3 @@ When adding a context selector/perspective switcher in a `PageSidebar`, you must
 ```ts file='./examples/Page/PageContextSelector.tsx' isFullscreen
 
 ```
-
-### Docked nav
-
-```ts file='./examples/Page/PageDockedNav.tsx' isFullscreen
-
-```

…rc/demos/examples/Page/PageDockedNav.tsx …/src/demos/examples/Nav/NavDockedNav.tsxpackages/react-core/src/demos/examples/Page/PageDockedNav.tsx renamed to packages/react-core/src/demos/examples/Nav/NavDockedNav.tsx packages/react-core/src/demos/examples/Page/PageDockedNav.tsx renamed to packages/react-core/src/demos/examples/Nav/NavDockedNav.tsx

@@ -45,7 +45,7 @@ interface NavOnSelectProps {
   to: string;
 }
 
-export const PageDockedNav: React.FunctionComponent = () => {
+export const NavDockedNav: React.FunctionComponent = () => {
   const [activeItem, setActiveItem] = useState(1);
   const [isDockExpanded, setIsDockExpanded] = useState(false);
   const [isDockTextExpanded, setIsDockTextExpanded] = useState(false);
@@ -430,7 +430,7 @@ export const PageDockedNav: React.FunctionComponent = () => {
         isDockExpanded={isDockExpanded}
         isDockTextExpanded={isDockTextExpanded}
         masthead={mobileMasthead}
-        dockedMasthead={dockedMasthead}
+        dockContent={dockedMasthead}
         skipToContent={pageSkipToContent}
         breadcrumb={dashboardBreadcrumb}
         mainContainerId={mainContainerId}