fix(logo): make logo independent of the aside state

gravity-ui · Mar 4, 2024 · 33a0556 · 33a0556
1 parent 6ff7c81
commit 33a0556
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 6 deletions.
diff --git a/src/components/AsideHeader/components/Header.tsx b/src/components/AsideHeader/components/Header.tsx
@@ -9,14 +9,15 @@ import {CompositeBar} from '../../CompositeBar/CompositeBar';
 
 import headerDividerCollapsedIcon from '../../../../assets/icons/divider-collapsed.svg';
 
-import {useAsideHeaderInnerContext} from '../AsideHeaderContext';
+import {useAsideHeaderContext, useAsideHeaderInnerContext} from '../AsideHeaderContext';
 import {b} from '../utils';
 
 const DEFAULT_SUBHEADER_ITEMS: SubheaderMenuItem[] = [];
 
 export const Header = () => {
     const {logo, onItemClick, onClosePanel, headerDecoration, subheaderItems} =
         useAsideHeaderInnerContext();
+    const {compact} = useAsideHeaderContext();
     const {onClick: onLogoClickProp} = logo;
     const onLogoClick = useCallback(
         (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
@@ -28,7 +29,12 @@ export const Header = () => {
 
     return (
         <div className={b('header', {['with-decoration']: headerDecoration})}>
-            <Logo {...logo} onClick={onLogoClick} iconWrapperClassName={b('logo-icon')} />
+            <Logo
+                {...logo}
+                onClick={onLogoClick}
+                iconWrapperClassName={b('logo-icon')}
+                compact={compact}
+            />
 
             <CompositeBar
                 type="subheader"

diff --git a/src/components/Logo/Logo.tsx b/src/components/Logo/Logo.tsx
@@ -3,8 +3,6 @@ import {block} from '../utils/cn';
 import {LogoProps as BaseLogoProps} from '../types';
 import {Button, Icon} from '@gravity-ui/uikit';
 
-import {useAsideHeaderContext} from '../AsideHeader/AsideHeaderContext';
-
 import './Logo.scss';
 
 const b = block('logo');
@@ -13,7 +11,7 @@ type LogoProps = BaseLogoProps & {
     iconWrapperClassName?: string;
 };
 
-export const Logo: React.FC<LogoProps> = ({
+export const Logo: React.FC<LogoProps & {compact?: boolean}> = ({
     text,
     icon,
     iconSrc,
@@ -24,8 +22,8 @@ export const Logo: React.FC<LogoProps> = ({
     wrapper,
     onClick,
     iconWrapperClassName,
+    compact,
 }) => {
-    const {compact} = useAsideHeaderContext();
     const hasWrapper = typeof wrapper === 'function';
 
     let buttonIcon;