+
{breadcrumb.title}
) : (
diff --git a/components/page-header/DeprecationBanner.tsx b/components/page-header/DeprecationBanner.tsx
index 40fd5686be81..af36b0972646 100644
--- a/components/page-header/DeprecationBanner.tsx
+++ b/components/page-header/DeprecationBanner.tsx
@@ -26,11 +26,7 @@ export const DeprecationBanner = () => {
{' '}
-
+
{enterpriseServerReleases.nextDeprecationDate}
.
diff --git a/components/page-header/Header.module.scss b/components/page-header/Header.module.scss
index 4d16c3ce12f8..2897d50eca62 100644
--- a/components/page-header/Header.module.scss
+++ b/components/page-header/Header.module.scss
@@ -1,4 +1,5 @@
-@import "@primer/css/support/index.scss";
+@import "@primer/css/support/variables/layout.scss";
+@import "@primer/css/support/mixins/layout.scss";
.header {
display: unset;
diff --git a/components/page-header/Header.tsx b/components/page-header/Header.tsx
index 4febce4f23a1..d28dbb63c82c 100644
--- a/components/page-header/Header.tsx
+++ b/components/page-header/Header.tsx
@@ -1,7 +1,7 @@
import { useCallback, useEffect, useRef, useState } from 'react'
import cx from 'classnames'
import { useRouter } from 'next/router'
-import { AnchoredOverlay, Button, Dialog, IconButton } from '@primer/react'
+import { ActionList, ActionMenu, Dialog, IconButton } from '@primer/react'
import {
KebabHorizontalIcon,
LinkExternalIcon,
@@ -30,16 +30,13 @@ import styles from './Header.module.scss'
export const Header = () => {
const router = useRouter()
const { error } = useMainContext()
- const { isHomepageVersion, currentProduct, allVersions } = useMainContext()
+ const { isHomepageVersion, currentProduct } = useMainContext()
const { currentVersion } = useVersion()
const { t } = useTranslation(['header'])
const isRestPage = currentProduct && currentProduct.id === 'rest'
const [isSearchOpen, setIsSearchOpen] = useState(false)
const [scroll, setScroll] = useState(false)
const { hasAccount } = useHasAccount()
- const [isMenuOpen, setIsMenuOpen] = useState(false)
- const openMenuOverlay = useCallback(() => setIsMenuOpen(true), [setIsMenuOpen])
- const closeMenuOverlay = useCallback(() => setIsMenuOpen(false), [setIsMenuOpen])
const [isSidebarOpen, setIsSidebarOpen] = useState(false)
const openSidebar = useCallback(() => setIsSidebarOpen(true), [isSidebarOpen])
const closeSidebar = useCallback(() => setIsSidebarOpen(false), [isSidebarOpen])
@@ -50,10 +47,8 @@ export const Header = () => {
const signupCTAVisible =
hasAccount === false && // don't show if `null`
(currentVersion === DEFAULT_VERSION || currentVersion === 'enterprise-cloud@latest')
- const [windowSize, setWindowSize] = useState(0)
- const handleWindowResize = useCallback(() => {
- setWindowSize(window.innerWidth)
- }, [])
+ const { width } = useWidth()
+ const returnFocusRef = useRef(null)
useEffect(() => {
function onScroll() {
@@ -95,11 +90,9 @@ export const Header = () => {
if (bodyDiv && body) {
// The full sidebar automatically shows at the xl window size so unlock
// scrolling if the overlay was opened and the window size is increased to xl.
- body.style.overflow = isSidebarOpen && windowSize < 1280 ? 'hidden' : 'auto'
+ body.style.overflow = isSidebarOpen && width && width < 1280 ? 'hidden' : 'auto'
}
- window.addEventListener('resize', handleWindowResize)
- return () => window.removeEventListener('resize', handleWindowResize)
- }, [isSidebarOpen, windowSize])
+ }, [isSidebarOpen])
// with client side navigation clicking sidebar overlay links doesn't dismiss
// the overlay so we close it ourselves when the path changes
@@ -121,9 +114,36 @@ export const Header = () => {
}
}, [])
+ function useWidth() {
+ const hasWindow = typeof window !== 'undefined'
+
+ function getWidth() {
+ const width = hasWindow ? window.innerWidth : null
+ return {
+ width,
+ }
+ }
+
+ const [width, setWidth] = useState(getWidth())
+
+ useEffect(() => {
+ if (hasWindow) {
+ const handleResize = function () {
+ setWidth(getWidth())
+ }
+
+ window.addEventListener('resize', handleResize)
+ return () => window.removeEventListener('resize', handleResize)
+ }
+ }, [hasWindow])
+
+ return width
+ }
+
return (
<>
{
scroll && 'color-shadow-small',
)}
role="banner"
+ aria-label="Main"
>
{
{/* The ... navigation menu at medium and smaller widths */}
-
(
-
- )}
- open={isMenuOpen}
- onOpen={openMenuOverlay}
- onClose={closeMenuOverlay}
- aria-labelledby="menu-title"
- >
-
-
-
-
-
-
-
-
- {isRestPage && allVersions[currentVersion].apiVersions.length > 0 && (
-
-
-
- )}
- {signupCTAVisible && (
-
- {t`sign_up_cta`}
-
-
- )}
-
-
+ />
+
+
+
+
+ {width && width > 544 ? (
+
+ ) : (
+
+ )}
+
+ {width && width < 545 && (
+ <>
+
+
+ >
+ )}
+ {signupCTAVisible && (
+
+ {t`sign_up_cta`}
+
+
+ )}{' '}
+
+
+
+
{!isHomepageVersion && !isSearchResultsPage && (
-
+
{
icon={ThreeBarsIcon}
aria-label="Open Sidebar"
onClick={openSidebar}
+ ref={returnFocusRef}
/>