/
index.js
47 lines (41 loc) · 1.31 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
/**
* WordPress dependencies
*/
import { useEffect } from '@wordpress/element';
import { createSlotFill } from '@wordpress/components';
import { useViewportMatch } from '@wordpress/compose';
import { useDispatch } from '@wordpress/data';
/**
* Internal dependencies
*/
import { store as editSiteStore } from '../../store';
import NavigationPanel from './navigation-panel';
import NavigationToggle from './navigation-toggle';
export const {
Fill: NavigationPanelPreviewFill,
Slot: NavigationPanelPreviewSlot,
} = createSlotFill( 'EditSiteNavigationPanelPreview' );
export default function NavigationSidebar( {
isDefaultOpen = false,
activeTemplateType,
} ) {
const isDesktopViewport = useViewportMatch( 'medium' );
const { setIsNavigationPanelOpened } = useDispatch( editSiteStore );
useEffect( () => {
// When transitioning to desktop open the navigation if `isDefaultOpen` is true.
if ( isDefaultOpen && isDesktopViewport ) {
setIsNavigationPanelOpened( true );
}
// When transitioning to mobile/tablet, close the navigation.
if ( ! isDesktopViewport ) {
setIsNavigationPanelOpened( false );
}
}, [ isDefaultOpen, isDesktopViewport, setIsNavigationPanelOpened ] );
return (
<>
<NavigationToggle />
<NavigationPanel activeItem={ activeTemplateType } />
<NavigationPanelPreviewSlot />
</>
);
}