Skip to content

Latest commit

 

History

History
106 lines (87 loc) · 5.74 KB

README.md

File metadata and controls

106 lines (87 loc) · 5.74 KB
Raw

@gravity-ui/navigation · npm package CI storybook

Aside Header Navigation · Preview →

Install

npm install @gravity-ui/navigation

Ensure that peer dependencies are installed in your project

npm install --dev @gravity-ui/uikit@^3.0.2 @bem-react/[email protected] react@^16.0.0

Components

  • AsideHeader
  • MobileHeader
  • FooterItem
  • MobileHeaderFooterItem
  • Drawer
  • DrawerItem
  • PageLayout
  • PageLayoutAside
  • AsideFallback
  • Logo
  • MobileLogo
  • Footer
  • MobileFooter

Optimization

If your app content needs to be rendered faster than by passing it throw AsideHeader props, you may need to switch usage of AsideHeader to advanced style with PageLayout like this:

--- Main.tsx
+++ Main.tsx
-import {AsideHeader} from './AsideHeader'
+import {PageLayout, AsideFallback} from '@gravity-ui/navigation';
+const Aside = React.lazy(() =>
+    import('./Aside').then(({Aside}) => ({ default: Aside }))
+);

-    <AsideHeader renderContent={renderContent} {...restProps} />
+    <PageLayout>
+        <Suspense fallback={<AsideFallback />}>
+           <Aside />
+        </Suspense>
+
+        <PageLayout.Content>
+            <ContentExample />
+        </PageLayout.Content>
+    </PageLayout>
--- Aside.tsx
+++ Aside.tsx
-import {AsideHeader} from '@gravity-ui/navigation';
+import {PageLayoutAside} from '@gravity-ui/navigation';

export const Aside: FC = () => {
    return (
-        <AsideHeader {...props}>
+        <PageLayoutAside {...props}/>
    );
};

Imports

import {AsideHeader} from '@gravity-ui/navigation';

CSS variables

Used for themization Navigation's components

AsideHeader vars

Name Description Default
--gn-aside-header-decoration-collapsed-background-color Decoration color for collapsed navigation --g-color-base-warning-light
--gn-aside-header-decoration-expanded-background-color Decoration color for expanded navigation --g-color-base-warning-light
--gn-aside-header-background-color Navigation background color --g-color-base-background
--gn-aside-header-divider-horizontal-color All horizontal divider line color --g-color-line-generic
--gn-aside-header-divider-vertical-color Vertical divider line color between AsideHeader and content --g-color-line-generic
--gn-aside-top-panel-height Read only.AsideHeader top alert height 0px
Item
--gn-aside-header-general-item-icon-color Icon color for Subheader and Footer items --g-color-text-primary
--gn-aside-header-item-icon-color Icon color for CompositeBar items --g-color-text-misc
--gn-aside-header-item-text-color --g-color-text-primary
--gn-aside-header-item-background-color-hover --g-color-base-simple-hover
Current Item
--gn-aside-header-item-current-background-color --g-color-base-selection
--gn-aside-header-item-current-icon-color
--gn-aside-header-item-current-text-color --g-color-text-primary
--gn-aside-header-item-current-background-color-hover
z-indexes
--gn-aside-header-z-index Aside header z-index 100
--gn-aside-header-panel-z-index Aside header panel (Drawer component) z-index 98
--gn-aside-header-pane-top-z-index Top pane z-index 98
--gn-aside-header-content-z-index Content (right part) z-index 95