@atlaskit/navigation-system/dist/esm/ui/page-layout/constants.js

The latest navigation system for Atlassian apps.

/**
 * These variables are shared across the different page layout slots.
 * This violates the [UI styling standard](https://atlassian.design/components/eslint-plugin-ui-styling-standard/no-imported-style-values/usage).
 * We have chosen to ignore this rule to prevent duplicating them across the different slots, and to provide a high level view of them and how they relate.
 */

/**
 * Default minimum width of Main, in pixels, before a custom minimum is registered.
 */
export var defaultMainMinWidth = 320;

// These are "compressed" to discourage usage.
export var sideNavVar = '--n_sNvw';
export var asideVar = '--n_asDw';
export var panelVar = '--n_pnlW';
export var chatPanelVar = '--n_cPnlW';
export var chatPanelLiveWidthVar = '--n_cPnlLw';
export var mainMinimumWidthVar = '--n_mainMinW';
export var bannerMountedVar = '--n_bnrM';
export var topNavMountedVar = '--n_tNvM';
export var ribbonVar = '--n_rbnW';

/**
 * Rendered border-box width of the local PanelLayout surface, in both inline and overlay modes.
 * Published on document.documentElement after mounting when Root opts into
 * UNSAFE_dangerouslyHoistSlotSizes. Only the primary Root should opt in.
 * Use `var(${localPanelWidthVar}, 0px)` for external controls, not for width persistence
 * or sizing the panel itself. The property is removed when the surface unmounts.
 */
export var localPanelWidthVar = '--n_localPanelWidth';

/**
 * Captures the current width of the side navigation, at all times, including during resizing.
 *
 * The standard `sideNavVar` only captures the 'committed' width, not the resizing width.
 */
export var sideNavLiveWidthVar = '--n_sNvlw';
export var sideNavPanelSplitterId = Symbol('SideNav PanelSplitter');
// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
export var asidePanelSplitterId = Symbol('Aside PanelSplitter');
// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
export var panelPanelSplitterId = Symbol('Panel PanelSplitter');

// We aren't using template literals here because Compiled can't compiled them in platform ATM.
export var contentHeightWhenFixed = "calc(100vh - var(--n_bnrM, 0px) - var(--n_tNvM, 0px))";
export var contentInsetBlockStart = "calc(var(--n_bnrM, 0px) + var(--n_tNvM, 0px))";

// We define variables as they can change their size depending on the viewport width. That isn't needed for
// general grid item slots because, well, they just take up the size of the grid item! In this instance since
// the UNSAFE absolutely positioned sibling isn't on the grid it needs extra layout information.
// Note: THESE ARE THE SAME VALUES AS THE LEGACY PAGE LAYOUT.
// WHEN WE ELIMINATE USAGE OF THOSE VARIABLES THESE CAN BE RENAMED TO BE HASHED.
export var UNSAFE_topNavVar = '--topNavigationHeight';
export var UNSAFE_bannerVar = '--bannerHeight';
export var UNSAFE_sideNavLayoutVar = '--leftSidebarWidth';
export var UNSAFE_ribbonVar = '--leftPanelWidth';
export var UNSAFE_asideLayoutVar = '--rightSidebarWidth';
export var UNSAFE_panelLayoutVar = '--rightPanelWidth';

// The following UNSAFE variables are used to absolutely position elements that aren't a child of page layout.
// Known use cases: Legacy pages rendered inside Confluence and Jira.
export var UNSAFE_MAIN_BLOCK_START_FOR_LEGACY_PAGES_ONLY = "calc(var(".concat(UNSAFE_bannerVar, ", 0px) + var(").concat(UNSAFE_topNavVar, ", 0px))");
export var UNSAFE_MAIN_INLINE_START_FOR_LEGACY_PAGES_ONLY = "calc(var(".concat(UNSAFE_ribbonVar, ", 0px) + var(").concat(UNSAFE_sideNavLayoutVar, ", 0px))");
export var UNSAFE_MAIN_INLINE_END_FOR_LEGACY_PAGES_ONLY = "calc(var(".concat(UNSAFE_asideLayoutVar, ", 0px) + var(").concat(UNSAFE_panelLayoutVar, ", 0px))");

/**
 * We define the z-indexes here so each page slot can be locally layered against each other.
 * For globally defined values such as flag, modal, etc, we can continue to
 * rely on accessing them through global means.
 */
// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
export var localSlotLayers = {
  // Chat overlays the app, including TopNav and SideNav, below the banner.
  chatPanelOverlay: 5,
  ribbon: 4,
  topBar: 4,
  banner: 4,
  sideNav: 2,
  panelSmallViewports: 1
};
export var openLayerObserverSideNavNamespace = 'side-nav';
export var openLayerObserverTopNavMiddleNamespace = 'top-nav-middle';
export var openLayerObserverTopNavEndNamespace = 'top-nav-end';