/
index.js
130 lines (119 loc) · 3.53 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
/**
* External dependencies
*/
import classnames from 'classnames';
/**
* WordPress dependencies
*/
import {
__experimentalNavigation as Navigation,
__experimentalNavigationBackButton as NavigationBackButton,
__experimentalNavigationGroup as NavigationGroup,
__experimentalNavigationItem as NavigationItem,
__experimentalNavigationMenu as NavigationMenu,
} from '@wordpress/components';
import { store as coreDataStore } from '@wordpress/core-data';
import { useSelect } from '@wordpress/data';
import { useEffect, useRef } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { ESCAPE } from '@wordpress/keycodes';
import { decodeEntities } from '@wordpress/html-entities';
import { addQueryArgs } from '@wordpress/url';
import {
home as siteIcon,
layout as templateIcon,
symbolFilled as templatePartIcon,
} from '@wordpress/icons';
/**
* Internal dependencies
*/
import MainDashboardButton from '../../main-dashboard-button';
const SITE_EDITOR_KEY = 'site-editor';
const NavigationPanel = ( {
isOpen,
setIsOpen,
activeItem = SITE_EDITOR_KEY,
} ) => {
const siteTitle = useSelect( ( select ) => {
const { getEntityRecord } = select( coreDataStore );
const siteData =
getEntityRecord( 'root', '__unstableBase', undefined ) || {};
return siteData.name;
}, [] );
// Ensures focus is moved to the panel area when it is activated
// from a separate component (such as document actions in the header).
const panelRef = useRef();
useEffect( () => {
if ( isOpen ) {
panelRef.current.focus();
}
}, [ activeItem, isOpen ] );
const closeOnEscape = ( event ) => {
if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {
event.preventDefault();
setIsOpen( false );
}
};
return (
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
<div
className={ classnames( `edit-site-navigation-panel`, {
'is-open': isOpen,
} ) }
ref={ panelRef }
tabIndex="-1"
onKeyDown={ closeOnEscape }
>
<div className="edit-site-navigation-panel__inner">
<div className="edit-site-navigation-panel__site-title-container">
<div className="edit-site-navigation-panel__site-title">
{ decodeEntities( siteTitle ) }
</div>
</div>
<div className="edit-site-navigation-panel__scroll-container">
<Navigation activeItem={ activeItem }>
<MainDashboardButton.Slot>
<NavigationBackButton
backButtonLabel={ __( 'Dashboard' ) }
className="edit-site-navigation-panel__back-to-dashboard"
href="index.php"
/>
</MainDashboardButton.Slot>
<NavigationMenu>
<NavigationGroup title={ __( 'Editor' ) }>
<NavigationItem
icon={ siteIcon }
title={ __( 'Site' ) }
item={ SITE_EDITOR_KEY }
href={ addQueryArgs( window.location.href, {
postId: undefined,
postType: undefined,
} ) }
/>
<NavigationItem
icon={ templateIcon }
title={ __( 'Templates' ) }
item="wp_template"
href={ addQueryArgs( window.location.href, {
postId: undefined,
postType: 'wp_template',
} ) }
/>
<NavigationItem
icon={ templatePartIcon }
title={ __( 'Template Parts' ) }
item="wp_template_part"
href={ addQueryArgs( window.location.href, {
postId: undefined,
postType: 'wp_template_part',
} ) }
/>
</NavigationGroup>
</NavigationMenu>
</Navigation>
</div>
</div>
</div>
);
};
export default NavigationPanel;