-
+ { isFullscreenActive &&
}
+ );
+}
+
+function useToggle( { ref } ) {
+ const [ isActive, setIsActive ] = useState( false );
+ const buttonNode = ref?.current;
+
+ const adminMenuNode = document.querySelector( '#adminmenumain' );
+
+ const toggleClassName = 'is-showing-admin-menu';
+
+ const toggleAdminMenu = () => setIsActive( ! isActive );
+ const closeAdminMenu = () => setIsActive( false );
+
+ const focusFirstAdminMenuItem = () => {
+ if ( ! buttonNode ) return;
+
+ const isButtonFocused = buttonNode.matches( ':focus' );
+ const item = adminMenuNode.querySelector( '#adminmenu > li > a' );
+
+ if ( isButtonFocused && item ) {
+ item.focus();
+ }
+ };
+
+ // Renders the open/closed UI for the admin menu
+ useEffect( () => {
+ if ( isActive ) {
+ document.body.classList.add( toggleClassName );
+ } else {
+ document.body.classList.remove( toggleClassName );
+ }
+ }, [ isActive ] );
+
+ // Handles closing the admin menu when clicking outside
+ useEffect( () => {
+ const handleOnClickOutside = ( event ) => {
+ if ( ! isActive ) return;
+
+ const { target } = event;
+
+ const didClickOutside =
+ ! adminMenuNode.contains( target ) && target !== buttonNode;
+
+ if ( didClickOutside ) {
+ closeAdminMenu();
+ }
+ };
+
+ document.body.addEventListener( 'click', handleOnClickOutside );
+
+ return () => {
+ document.body.removeEventListener( 'click', handleOnClickOutside );
+ };
+ }, [ isActive, buttonNode ] );
+
+ // Handles admin menu keyboard interactions
+ useEffect( () => {
+ const handleOnKeyDown = ( event ) => {
+ if ( ! isActive ) return;
+
+ const { keyCode } = event;
+
+ if ( keyCode === ESCAPE ) {
+ closeAdminMenu();
+ }
+
+ if ( keyCode === TAB ) {
+ focusFirstAdminMenuItem();
+ }
+ };
+
+ document.body.addEventListener( 'keydown', handleOnKeyDown );
+
+ return () => {
+ document.body.removeEventListener( 'keydown', handleOnKeyDown );
+ };
+ }, [ isActive ] );
+
+ return toggleAdminMenu;
+}
+
+export default AdminMenuToggle;
diff --git a/packages/interface/src/components/admin-menu-toggle/style.scss b/packages/interface/src/components/admin-menu-toggle/style.scss
new file mode 100644
index 00000000000000..4b9689643feeeb
--- /dev/null
+++ b/packages/interface/src/components/admin-menu-toggle/style.scss
@@ -0,0 +1,53 @@
+.interface-admin-menu-toggle.has-icon {
+ // Do not show the toolbar icon on small screens,
+ // when Fullscreen Mode is not an option in the "More" menu.
+ display: none;
+
+ @include break-medium() {
+ display: flex;
+ align-items: center;
+ align-self: stretch;
+ border: none;
+ border-radius: 0;
+ height: auto;
+ margin-right: -8px;
+ width: $header-height;
+ background: #23282e; // WP-admin gray.
+ transition: all 0.12s ease-in-out;
+
+ svg {
+ padding: 6px;
+ pointer-events: none;
+ border-radius: 2px;
+ width: 44px;
+ height: 44px;
+ fill: $white;
+ }
+
+ &:hover {
+ svg {
+ fill: rgba($white, 0.8);
+ }
+ }
+
+ &:active {
+ color: $white;
+ }
+
+ &:focus {
+ box-shadow: none;
+
+ svg {
+ box-shadow: 0 0 0 1.5px color($theme-color);
+ }
+ }
+
+ body.is-showing-admin-menu & {
+ width: 160px;
+ }
+
+ body.is-showing-admin-menu.folded & {
+ width: $header-height;
+ }
+ }
+}
diff --git a/packages/interface/src/components/fullscreen-mode/style.scss b/packages/interface/src/components/fullscreen-mode/style.scss
index 9489a9f6f96512..8146dcd02d0af5 100644
--- a/packages/interface/src/components/fullscreen-mode/style.scss
+++ b/packages/interface/src/components/fullscreen-mode/style.scss
@@ -1,19 +1,69 @@
-body.js.is-fullscreen-mode {
-
+body.is-fullscreen-mode {
@include break-medium {
// Reset the html.wp-topbar padding.
// Because this uses negative margins, we have to compensate for the height.
margin-top: -$admin-bar-height;
height: calc(100% + #{ $admin-bar-height });
- #adminmenumain,
+ // Hide the top adminbar toolbar.
#wpadminbar {
display: none;
}
+ // Layer the sidebar above the editor's top bar and
+ // setup the transition
+ #adminmenumain {
+ z-index: 1;
+ transform: translateX(-160px);
+ transition: transform 0.12s ease-in-out;
+ }
+
+ // Display the sidebar offscreen, and then transition in when needed.
+ #adminmenumain,
+ #adminmenuback {
+ position: fixed;
+ top: 60px;
+ left: 0;
+ bottom: 0;
+ }
+
+ // Hides the admin menu
+ // This prevents keyboard navigation from accessing inner links
+ #adminmenuwrap {
+ //display: none;
+ }
+
+ .interface-interface-skeleton__body,
+ .interface-interface-skeleton__footer {
+ transition: margin-left 0.12s ease-in-out;
+ }
+
#wpcontent,
#wpfooter {
margin-left: 0;
}
}
}
+
+body.is-showing-admin-menu {
+ #adminmenumain {
+ transform: translateX(0);
+ }
+
+ // Show the admin menu
+ #adminmenuwrap {
+ display: block;
+ }
+
+ .interface-interface-skeleton__body,
+ .interface-interface-skeleton__footer {
+ margin-left: 160px;
+ }
+}
+
+body.is-showing-admin-menu.folded {
+ .interface-interface-skeleton__body,
+ .interface-interface-skeleton__footer {
+ margin-left: 36px;
+ }
+}
diff --git a/packages/interface/src/components/index.js b/packages/interface/src/components/index.js
index 9071a42c0ff944..16fd863b1c1f12 100644
--- a/packages/interface/src/components/index.js
+++ b/packages/interface/src/components/index.js
@@ -2,3 +2,4 @@ export { default as ComplementaryArea } from './complementary-area';
export { default as FullscreenMode } from './fullscreen-mode';
export { default as InterfaceSkeleton } from './interface-skeleton';
export { default as PinnedItems } from './pinned-items';
+export { default as AdminMenuToggle } from './admin-menu-toggle';
diff --git a/packages/interface/src/style.scss b/packages/interface/src/style.scss
index d7f1e35e6e6616..ebb08f017ddf50 100644
--- a/packages/interface/src/style.scss
+++ b/packages/interface/src/style.scss
@@ -3,3 +3,4 @@
@import "./components/fullscreen-mode/style.scss";
@import "./components/interface-skeleton/style.scss";
@import "./components/pinned-items/style.scss";
+@import "./components/admin-menu-toggle/style.scss";