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

Co-authored-by: kseniyakuzina <[email protected]>
gravity-ui · Mar 4, 2024 · 78e2f09 · 78e2f09
1 parent 10969a4
commit 78e2f09
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git a/src/components/AsideHeader/components/Header.tsx b/src/components/AsideHeader/components/Header.tsx
@@ -6,7 +6,7 @@ import {CompositeBar} from '../../CompositeBar/CompositeBar';
 import {Logo} from '../../Logo';
 import {ASIDE_HEADER_COMPACT_WIDTH, HEADER_DIVIDER_HEIGHT} from '../../constants';
 import {SubheaderMenuItem} from '../../types';
-import {useAsideHeaderInnerContext} from '../AsideHeaderContext';
+import {useAsideHeaderContext, useAsideHeaderInnerContext} from '../AsideHeaderContext';
 import {b} from '../utils';
 
 import headerDividerCollapsedIcon from '../../../../assets/icons/divider-collapsed.svg';
@@ -16,6 +16,7 @@ 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>) => {
@@ -27,7 +28,7 @@ export const Header = () => {
 
     return (
         <div className={b('header', {['with-decoration']: headerDecoration})}>
-            <Logo {...logo} onClick={onLogoClick} />
+            <Logo {...logo} onClick={onLogoClick} compact={compact} />
 
             <CompositeBar
                 type="subheader"

diff --git a/src/components/Logo/Logo.tsx b/src/components/Logo/Logo.tsx
@@ -2,15 +2,14 @@ import React from 'react';
 
 import {Button, Icon} from '@gravity-ui/uikit';
 
-import {useAsideHeaderContext} from '../AsideHeader/AsideHeaderContext';
 import {LogoProps} from '../types';
 import {block} from '../utils/cn';
 
 import './Logo.scss';
 
 const b = block('logo');
 
-export const Logo: React.FC<LogoProps> = ({
+export const Logo: React.FC<LogoProps & {compact?: boolean}> = ({
     text,
     icon,
     iconSrc,
@@ -21,8 +20,8 @@ export const Logo: React.FC<LogoProps> = ({
     target = '_self',
     wrapper,
     onClick,
+    compact,
 }) => {
-    const {compact} = useAsideHeaderContext();
     const hasWrapper = typeof wrapper === 'function';
 
     let buttonIcon;