Migrate navigation v5

package.json

@@ -19,7 +19,7 @@
     "@gravity-ui/graph": "^1.0.0",
     "@gravity-ui/icons": "^2.17.0",
     "@gravity-ui/markdown-editor": "^15.1.0",
-    "@gravity-ui/navigation": "^4.0.11",
+    "@gravity-ui/navigation": "^5.0.0",
     "@gravity-ui/page-constructor": "^8.0.0",
     "@gravity-ui/timeline": "^1.26.1",
     "@gravity-ui/uikit": "^7.32.0",

src/components/UISamples/DashboardPreview2/DashboardPreview2.tsx

@@ -19,33 +19,30 @@ const logo: AsideHeaderProps['logo'] = {
     iconClassName: b('logo-icon'),
 };
 
-const renderFooter: AsideHeaderProps['renderFooter'] = ({compact}) => (
+const renderFooter: AsideHeaderProps['renderFooter'] = ({isExpanded}) => (
     <Fragment>
-        <FooterItem compact={compact} id="feedback" title="Feedback" icon={Feedback} />
-        <FooterItem id="settings" title="Feedback" icon={Gear} compact={compact} />
+        <FooterItem id="feedback" title="Feedback" icon={Feedback} isExpanded={isExpanded} />
+        <FooterItem id="settings" title="Feedback" icon={Gear} isExpanded={isExpanded} />
     </Fragment>
 );
 
 export const DashboardPreview2 = (props: Pick<PreviewWrapperProps, 'styles'>) => {
-    const [sidebarOpened, toggleSidebarOpened] = useState(true);
+    const [pinned, setPinned] = useState(false);
     const menuItems = useMenuItems();
 
-    const handleChangeCompact = useCallback((compact: boolean) => {
+    const handleChangePinned = useCallback((val: boolean) => {
         window.dispatchEvent(new Event('resize'));
-        toggleSidebarOpened(compact);
+        setPinned(val);
     }, []);
 
     return (
         <PreviewWrapper {...props}>
             {({isLightTheme, themeSwitcher}) => {
                 return (
-                    <PageLayout
-                        className={b({light: String(isLightTheme)})}
-                        compact={sidebarOpened}
-                    >
+                    <PageLayout className={b({light: String(isLightTheme)})} pinned={pinned}>
                         <AsideHeader
                             logo={logo}
-                            compact={sidebarOpened}
+                            pinned={pinned}
                             menuItems={menuItems}
                             renderFooter={renderFooter}
                             renderContent={() => (
@@ -56,7 +53,7 @@ export const DashboardPreview2 = (props: Pick<PreviewWrapperProps, 'styles'>) =>
                                     </Card>
                                 </div>
                             )}
-                            onChangeCompact={handleChangeCompact}
+                            onChangePinned={handleChangePinned}
                         />
                     </PageLayout>
                 );

src/components/UISamples/PreviewLayout/PreviewLayout.scss

@@ -25,7 +25,7 @@ $block: '.#{variables.$ns}themes-preview-layout';
         --gn-aside-header-item-icon-color: var(--g-color-base-brand);
 
         --gn-aside-header-item-current-background-color: var(--g-color-base-brand);
-        --gn-aside-header-item-current-icon-color: var(--g-color-base-background);
+        --gn-aside-top-item-current-icon-color: var(--g-color-base-background);
 
         border-radius: 16px;
 

src/components/UISamples/PreviewLayout/PreviewLayout.tsx

@@ -53,7 +53,7 @@ export const PreviewLayout = ({
 }: PreviewLayoutProps) => {
     const [theme, setTheme] = useState<Theme>('dark');
     const [justify, setJustify] = useState<CSSProperties['justifyContent']>('flex-start');
-    const [isCompact, setCompact] = useState<boolean>(true);
+    const [pinned, setPinned] = useState<boolean>(false);
     const containerRef = React.useRef<HTMLDivElement>(null);
 
     const onAlignmentChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -181,26 +181,26 @@ export const PreviewLayout = ({
                             icon: gravityUi,
                             iconSize: 38,
                         }}
-                        compact={isCompact}
-                        onChangeCompact={setCompact}
+                        pinned={pinned}
+                        onChangePinned={setPinned}
                         renderContent={renderContent}
-                        renderFooter={({compact}) => (
+                        renderFooter={({isExpanded}) => (
                             <React.Fragment>
                                 <FooterItem
                                     id="user-settings"
                                     icon={Gear}
                                     title="User Settings"
                                     tooltipText="User Settings"
                                     onItemClick={() => {}}
-                                    compact={compact}
+                                    isExpanded={isExpanded}
                                 />
                                 <FooterItem
                                     id="user-account"
                                     title="User"
                                     itemWrapper={(p, makeItem) =>
                                         makeItem({...p, icon: <Person />})
                                     }
-                                    compact={compact}
+                                    isExpanded={isExpanded}
                                 />
                             </React.Fragment>
                         )}

src/components/UISamples/TasksPreview/TasksPreview.tsx

@@ -333,7 +333,11 @@ export function TasksPreview(props: Pick<PreviewWrapperProps, 'styles'>) {
                             alignItems="flex-start"
                         >
                             <Box spacing={{px: 4, py: 2}} width="100%" minWidth="100%">
-                                <Logo {...LOGO_PROPS} className={spacing({mx: 7, mb: 2})} />
+                                <Logo
+                                    {...LOGO_PROPS}
+                                    className={spacing({mx: 7, mb: 2})}
+                                    placement="header"
+                                />
 
                                 <Divider orientation="horizontal" className={spacing({mb: 3})} />
 

src/content/components/navigation/AsideHeader/AsideHeaderComponent.tsx

@@ -22,7 +22,7 @@ export const AsideHeaderComponent = ({
     ...restProps
 }: AsideHeaderComponentProps) => {
     const [visiblePanel, setVisiblePanel] = React.useState<Panel>();
-    const [compact, setCompact] = React.useState(false);
+    const [pinned, setPinned] = React.useState(true);
 
     const subheaderItems: AsideHeaderItem[] = [
         {
@@ -38,7 +38,7 @@ export const AsideHeaderComponent = ({
     return (
         <AsideHeader
             {...restProps}
-            compact={compact}
+            pinned={pinned}
             logo={{text: 'Gravity UI', icon: Aperture}}
             menuItems={menuItems}
             subheaderItems={subheaderItemsVisible ? subheaderItems : []}
@@ -63,7 +63,7 @@ export const AsideHeaderComponent = ({
                     open: visiblePanel === Panel.Favorites,
                 },
             ]}
-            renderFooter={({compact}) => (
+            renderFooter={({isExpanded}) => (
                 <React.Fragment>
                     <FooterItem
                         id="favorites"
@@ -76,7 +76,7 @@ export const AsideHeaderComponent = ({
                                 visiblePanel === Panel.Favorites ? undefined : Panel.Favorites,
                             );
                         }}
-                        compact={compact}
+                        isExpanded={isExpanded}
                     />
                     <FooterItem
                         id="settings"
@@ -89,11 +89,11 @@ export const AsideHeaderComponent = ({
                                 visiblePanel === Panel.Settings ? undefined : Panel.Settings,
                             );
                         }}
-                        compact={compact}
+                        isExpanded={isExpanded}
                     />
                 </React.Fragment>
             )}
-            onChangeCompact={setCompact}
+            onChangePinned={setPinned}
         />
     );
 };

src/content/components/navigation/AsideHeader/index.ts

@@ -22,10 +22,6 @@ export const asideHeaderConfig = {
                 type: 'switch',
                 defaultValue: true,
             },
-            multipleTooltip: {
-                type: 'switch',
-                defaultValue: false,
-            },
             subheaderItemsVisible: {
                 type: 'switch',
                 defaultValue: false,

src/content/components/navigation/constants.tsx

@@ -1,5 +1,5 @@
 import {Bell, Flag, ListCheck, Plus} from '@gravity-ui/icons';
-import {MenuItem} from '@gravity-ui/navigation';
+import {AsideHeaderItem} from '@gravity-ui/navigation';
 
 function renderTag(tag: string) {
     return (
@@ -10,7 +10,7 @@ function renderTag(tag: string) {
     );
 }
 
-export const menuItems: MenuItem[] = [
+export const menuItems: AsideHeaderItem[] = [
     {
         id: 'overview',
         title: 'Overview',
@@ -38,7 +38,6 @@ export const menuItems: MenuItem[] = [
         title: 'Create smth',
         type: 'action',
         icon: Plus,
-        afterMoreButton: true,
         onItemClick({id, title, current}) {
             alert(JSON.stringify({id, title, current}));
         },