@atlaskit/navigation-system
Version:
The latest navigation system for Atlassian apps.
81 lines • 3.23 kB
JavaScript
import { useCallback, useContext } from 'react';
import { fg } from '@atlaskit/platform-feature-flags/fg';
import { SetSideNavVisibilityState } from './set-side-nav-visibility-state';
import { SideNavVisibilityState } from './side-nav-visibility-state';
import { useExpandSideNav } from './use-expand-side-nav';
/**
* __useToggleSideNav__
*
* Returns a function to toggle the side nav visibility.
*
* It will toggle the appropriate internal desktop or mobile side nav visibility state based on the current screen size.
*
* If you need a function to make the side nav visible, use `useExpandSideNav` instead.
*/
export function useToggleSideNav() {
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
_ref$trigger = _ref.trigger,
trigger = _ref$trigger === void 0 ? 'programmatic' : _ref$trigger;
var setSideNavState = useContext(SetSideNavVisibilityState);
var sideNavState = useContext(SideNavVisibilityState);
var expandSideNav = useExpandSideNav({
trigger: trigger
});
var isCollapsedOnDesktop = (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.desktop) === 'collapsed';
var isCollapsedOnMobile = (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.mobile) === 'collapsed';
var toggleSideNav = useCallback(function () {
var _window$matchMedia = window.matchMedia('(min-width: 64rem)'),
isDesktop = _window$matchMedia.matches;
if (fg('platform_dst_nav4_skip_link_a11y_1')) {
var isExpanding = isDesktop ? isCollapsedOnDesktop : isCollapsedOnMobile;
if (isExpanding) {
expandSideNav();
} else {
setSideNavState(function (currentState) {
// No-op if the side nav state has not been initialised yet
// e.g. if the SideNav has not been mounted yet
if (!currentState) {
return null;
}
return {
mobile: isDesktop ? currentState.mobile : 'collapsed',
desktop: isDesktop ? 'collapsed' : currentState.desktop,
flyout: 'closed',
lastTrigger: trigger
};
});
}
return;
}
if (isDesktop) {
setSideNavState(function (currentState) {
// No-op if the side nav state has not been initialised yet
// e.g. if the SideNav has not been mounted yet
if (!currentState) {
return null;
}
return {
mobile: currentState.mobile,
desktop: currentState.desktop === 'expanded' ? 'collapsed' : 'expanded',
flyout: 'closed',
lastTrigger: trigger
};
});
} else {
setSideNavState(function (currentState) {
// No-op if the side nav state has not been initialised yet
// e.g. if the SideNav has not been mounted yet
if (!currentState) {
return null;
}
return {
desktop: currentState.desktop,
mobile: currentState.mobile === 'expanded' ? 'collapsed' : 'expanded',
flyout: 'closed',
lastTrigger: trigger
};
});
}
}, [expandSideNav, isCollapsedOnDesktop, isCollapsedOnMobile, setSideNavState, trigger]);
return toggleSideNav;
}