diff --git a/src/components/AsideHeader/AsideHeader.scss b/src/components/AsideHeader/AsideHeader.scss index f722e75b..21577ec4 100644 --- a/src/components/AsideHeader/AsideHeader.scss +++ b/src/components/AsideHeader/AsideHeader.scss @@ -37,7 +37,7 @@ $block: '.#{variables.$ns}aside-header'; &__aside { position: sticky; - top: 0; + top: var(--gn-aside-top-panel-height); left: 0; height: 100vh; width: inherit; @@ -46,6 +46,7 @@ $block: '.#{variables.$ns}aside-header'; background-color: var(--g-color-base-background); z-index: 100; max-height: calc(100vh - var(--gn-aside-top-panel-height)); + margin-top: var(--gn-aside-top-panel-height); box-sizing: border-box; @@ -198,10 +199,18 @@ $block: '.#{variables.$ns}aside-header'; &__pane-top-divider { height: 1px; - background-color: var(--gn-aside-header-collapse-button-divider-line-color); + background-color: var(--gn-aside-header-divider-line-color); margin-top: -1px; } + &__pane-top { + position: fixed; + z-index: 98; + top: 0; + background: var(--g-color-base-background); + width: 100%; + } + &__pane-top-alert { &_centered { display: flex; @@ -221,6 +230,7 @@ $block: '.#{variables.$ns}aside-header'; &__content { width: calc(100% - var(--gn-aside-header-size)); z-index: 95; + margin-top: var(--gn-aside-top-panel-height); } &__collapse-button { diff --git a/src/components/AsideHeader/AsideHeader.tsx b/src/components/AsideHeader/AsideHeader.tsx index 6e6bbf78..9f45eef8 100644 --- a/src/components/AsideHeader/AsideHeader.tsx +++ b/src/components/AsideHeader/AsideHeader.tsx @@ -24,10 +24,7 @@ export const AsideHeader = React.forwardRef( return ( - + ); }, diff --git a/src/components/AsideHeader/__stories__/AsideHeader.stories.tsx b/src/components/AsideHeader/__stories__/AsideHeader.stories.tsx index 6b090be5..2ccd1a2c 100644 --- a/src/components/AsideHeader/__stories__/AsideHeader.stories.tsx +++ b/src/components/AsideHeader/__stories__/AsideHeader.stories.tsx @@ -65,7 +65,8 @@ HeaderAlert.args = { topAlert: { title: 'Maintenance', view: 'filled', - message: 'Scheduled maintenance is being performed', + message: + 'Scheduled maintenance is being performed Scheduled maintenance is being performed Scheduled maintenance is being performed Scheduled maintenance is being performed Scheduled maintenance is being performed Scheduled maintenance is being performed Scheduled mainten', closable: true, }, }; @@ -76,5 +77,6 @@ HeaderAlertCentered.args = { view: 'filled', message: 'Scheduled maintenance is being performed', centered: true, + dense: true, }, }; diff --git a/src/components/AsideHeader/components/PageLayout/PageLayout.tsx b/src/components/AsideHeader/components/PageLayout/PageLayout.tsx index 14c62a37..b0acd780 100644 --- a/src/components/AsideHeader/components/PageLayout/PageLayout.tsx +++ b/src/components/AsideHeader/components/PageLayout/PageLayout.tsx @@ -31,18 +31,14 @@ const Layout = ({compact, reverse, className, children, topAlert}: PageLayoutPro ); }; -const ConnectedContent: React.FC< - PropsWithChildren> -> = ({children, withTop, renderContent}) => { +const ConnectedContent: React.FC>> = ({ + children, + renderContent, +}) => { const {size} = useAsideHeaderContext(); return ( - + {children} ); diff --git a/src/components/AsideHeader/useAsideHeaderTopPanel.tsx b/src/components/AsideHeader/useAsideHeaderTopPanel.tsx index 17c5d699..2ea18b78 100644 --- a/src/components/AsideHeader/useAsideHeaderTopPanel.tsx +++ b/src/components/AsideHeader/useAsideHeaderTopPanel.tsx @@ -53,7 +53,7 @@ export const useAsideHeaderTopPanel = ({ window.removeEventListener('resize', updateTopSizeDebounce); setAsideTopPanelHeight(0); }; - }, [topAlert, topHeight, topRef, updateTopSize]); + }, [topAlert, topHeight, topRef, updateTopSize, setAsideTopPanelHeight]); return { topRef, diff --git a/src/components/Content/Content.tsx b/src/components/Content/Content.tsx index 3c9ddb35..be245419 100644 --- a/src/components/Content/Content.tsx +++ b/src/components/Content/Content.tsx @@ -8,7 +8,6 @@ export interface ContentProps { size: number; className?: string; cssSizeVariableName?: string; - withTop?: boolean; renderContent?: RenderContentType; } @@ -27,21 +26,14 @@ export const Content: React.FC = ({ size, // TODO: move to context when MobileHeader will support it className, cssSizeVariableName = '--gn-aside-header-size', - withTop, renderContent, children, }) => { - const style: React.CSSProperties = { - [cssSizeVariableName]: `${size}px`, - }; - - if (withTop) { - style.maxHeight = 'calc(100vh - var(--gn-aside-top-panel-height))'; - style.overflowY = 'auto'; - } - return ( -
+
{typeof renderContent === 'function' ? ( ) : (