feat: moved pin button (fix expanded state) to header

src/components/AsideHeader/AsideHeader.scss

@@ -193,6 +193,18 @@ $block: '.#{variables.$ns}aside-header';
         margin: 0 10px 2px;
     }
 
+    &__logo-container {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        &_without-logo {
+            padding-bottom: var(--g-spacing-2);
+            margin-bottom: var(--g-spacing-2);
+            border-bottom: solid 1px var(--g-color-line-generic);
+        }
+    }
+
     &__logo-button &__logo-icon-place {
         height: var(
             --gn-aside-header-item-icon-background-size,
@@ -258,4 +270,13 @@ $block: '.#{variables.$ns}aside-header';
             padding-left: var(--gn-aside-header-min-width);
         }
     }
+
+    &__pin-button {
+        margin-right: 10px;
+        margin-left: auto;
+
+        &_compact {
+            margin-right: auto;
+        }
+    }
 }

src/components/AsideHeader/components/CollapseButton/CollapseButton.scss

@@ -1,49 +1,11 @@
 @use '../../../variables';
-@use '~@gravity-ui/uikit/styles/mixins';
 
 $block: '.#{variables.$ns}collapse-button';
 
-$buttonHeight: 20px;
-
 #{$block} {
-    --_--focus-outline-color: var(--g-color-line-focus);
-    --_--focus-outline-offset: 0;
-
-    @include mixins.button-reset();
-
-    min-height: $buttonHeight;
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-top: 1px solid
-        var(--gn-aside-header-divider-horizontal-color, var(--_--horizontal-divider-line-color));
-    position: relative;
-    box-sizing: content-box;
-
-    &::before {
-        content: '';
-        position: absolute;
-        z-index: -1;
-        inset: 0 2px 2px;
-    }
-
-    &:focus-visible::before {
-        outline: var(--_--focus-outline-color) solid 2px;
-        outline-offset: var(--_--focus-outline-offset);
-    }
-
-    &:not(&_compact) {
+    &_compact {
         #{$block}__icon {
             transform: rotate(180deg);
         }
     }
-
-    &:hover #{$block}__icon {
-        color: var(--g-color-text-primary);
-    }
-
-    &__icon {
-        color: var(--g-color-text-secondary);
-    }
 }

src/components/AsideHeader/components/CollapseButton/CollapseButton.tsx

@@ -1,12 +1,12 @@
 import React, {useCallback} from 'react';
 
-import {Icon} from '@gravity-ui/uikit';
+import {Button, Icon} from '@gravity-ui/uikit';
 
 import {block} from '../../../utils/cn';
 import {useAsideHeaderContext, useAsideHeaderInnerContext} from '../../AsideHeaderContext';
 import i18n from '../../i18n';
 
-import controlMenuButtonIcon from '../../../../../assets/icons/control-menu-button.svg';
+import ArrowLeftFromLineIcon from '@gravity-ui/icons/svgs/arrow-left-from-line.svg';
 
 import './CollapseButton.scss';
 
@@ -31,13 +31,15 @@ export const CollapseButton = ({className}: CollapseButtonProps) => {
         : collapseTitle || i18n('button_collapse');
 
     const defaultButton = (
-        <button
-            className={b({compact: compact}, className)}
+        <Button
+            view="flat-secondary"
+            size="l"
+            className={b({compact}, className)}
             onClick={onCollapseButtonClick}
-            title={buttonTitle}
+            aria-label={buttonTitle}
         >
-            <Icon data={controlMenuButtonIcon} className={b('icon')} width="16" height="10" />
-        </button>
+            <Icon data={ArrowLeftFromLineIcon} className={b('icon')} size={16} />
+        </Button>
     );
 
     if (collapseButtonWrapper) {

src/components/AsideHeader/components/FirstPanel.tsx

@@ -6,7 +6,6 @@ import {useAsideHeaderInnerContext} from '../AsideHeaderContext';
 import {b} from '../utils';
 
 import {useGroupedMenuItems} from './AllPagesPanel/useGroupedMenuItems';
-import {CollapseButton} from './CollapseButton/CollapseButton';
 import {CompositeBar} from './CompositeBar';
 import {Header} from './Header';
 import {Panels} from './Panels';
@@ -26,7 +25,6 @@ export const FirstPanel = React.forwardRef<HTMLDivElement>((_props, ref) => {
         customBackground,
         customBackgroundClassName,
         className,
-        hideCollapseButton,
         menuItems,
         menuGroups,
         qa,
@@ -89,7 +87,6 @@ export const FirstPanel = React.forwardRef<HTMLDivElement>((_props, ref) => {
                             asideRef,
                         })}
                     </div>
-                    {!hideCollapseButton && <CollapseButton />}
                 </div>
             </div>
             <Panels />

src/components/AsideHeader/components/Header.tsx

@@ -9,6 +9,7 @@ import {AsideHeaderItem} from '../types';
 import {b} from '../utils';
 
 import {useGroupedMenuItems} from './AllPagesPanel/useGroupedMenuItems';
+import {CollapseButton} from './CollapseButton/CollapseButton';
 import {CompositeBar} from './CompositeBar';
 
 import headerDividerCollapsedIcon from '../../../../assets/icons/divider-collapsed.svg';
@@ -17,9 +18,17 @@ const DEFAULT_SUBHEADER_ITEMS: AsideHeaderItem[] = [];
 const HEADER_COMPOSITE_ID = 'gravity-ui/navigation-header-composite-bar';
 
 export const Header = () => {
-    const {logo, compact, onItemClick, onClosePanel, headerDecoration, subheaderItems} =
-        useAsideHeaderInnerContext();
-    const {isExpanded} = useAsideHeaderInnerContext();
+    const {
+        logo,
+        isExpanded,
+        onItemClick,
+        onClosePanel,
+        headerDecoration,
+        subheaderItems,
+        hideCollapseButton,
+    } = useAsideHeaderInnerContext();
+
+    const compact = !isExpanded;
 
     const items = useGroupedMenuItems(subheaderItems || DEFAULT_SUBHEADER_ITEMS);
 
@@ -33,15 +42,19 @@ export const Header = () => {
 
     return (
         <div className={b('header', {['with-decoration']: headerDecoration})}>
-            {logo && (
-                <Logo
-                    {...logo}
-                    onClick={onLogoClick}
-                    compact={!isExpanded}
-                    buttonClassName={b('logo-button')}
-                    iconPlaceClassName={b('logo-icon-place')}
-                />
-            )}
+            <div className={b('logo-container', {'without-logo': !logo})}>
+                {logo && (
+                    <Logo
+                        {...logo}
+                        onClick={onLogoClick}
+                        compact={compact}
+                        buttonClassName={b('logo-button')}
+                        iconPlaceClassName={b('logo-icon-place')}
+                    />
+                )}
+
+                {!hideCollapseButton && <CollapseButton className={b('pin-button', {compact})} />}
+            </div>
 
             <CompositeBar
                 compositeId={HEADER_COMPOSITE_ID}