diff --git a/src/components/AsideHeader/AsideHeader.scss b/src/components/AsideHeader/AsideHeader.scss index 90ab84f..53652e3 100644 --- a/src/components/AsideHeader/AsideHeader.scss +++ b/src/components/AsideHeader/AsideHeader.scss @@ -69,6 +69,8 @@ $block: '.#{variables.$ns}aside-header'; z-index: 2; user-select: none; + padding-top: var(--gn-aside-header-padding-top); + & > #{$class}-logo { margin: 8px 0; } diff --git a/src/components/AsideHeader/README.md b/src/components/AsideHeader/README.md index 16daee8..3489ee1 100644 --- a/src/components/AsideHeader/README.md +++ b/src/components/AsideHeader/README.md @@ -124,26 +124,29 @@ export const Aside: FC = () => { ## CSS API -| 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 | +| 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 | +| `--gn-aside-header-padding-top` | Navigation top padding. May be helpful when logo and subheader items hide | | +| 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` | | | +| `--gn-aside-header-item-collapsed-radius` | Item border radius for collapsed navigation | 7px | +| `--gn-aside-header-item-expanded-radius` | Item border radius for expanded navigation | | +| 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 | diff --git a/src/components/AsideHeader/components/FirstPanel.tsx b/src/components/AsideHeader/components/FirstPanel.tsx index 759d0dc..5cf4f49 100644 --- a/src/components/AsideHeader/components/FirstPanel.tsx +++ b/src/components/AsideHeader/components/FirstPanel.tsx @@ -25,6 +25,7 @@ export const FirstPanel = React.forwardRef((_props, ref) => { customBackgroundClassName, className, hideCollapseButton, + logo, qa, } = useAsideHeaderInnerContext(); const visibleMenuItems = useVisibleMenuItems(); @@ -46,7 +47,7 @@ export const FirstPanel = React.forwardRef((_props, ref) => { {customBackground} )} -
+ {logo &&
} {visibleMenuItems?.length ? ( { const {logo, onItemClick, onClosePanel, headerDecoration, subheaderItems} = useAsideHeaderInnerContext(); const {compact} = useAsideHeaderContext(); - const {onClick: onLogoClickProp} = logo; + const onLogoClick = useCallback( (event: React.MouseEvent) => { onClosePanel?.(); - onLogoClickProp?.(event); + logo?.onClick?.(event); }, - [onClosePanel, onLogoClickProp], + [onClosePanel, logo], ); + if (!logo) { + return null; + } + return (