Skip to content

feat: implemented groups and sorting it #487

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 26 commits into
base: v4
Choose a base branch
from
Draft

feat: implemented groups and sorting it #487

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
bf8306f
feat: added scroll for navigation items
Oct 28, 2025
f898ea0
test: updated screenshots
Oct 29, 2025
098d187
feat: group prototype
Nov 3, 2025
5bf625d
feat: added group titles in all pages panel
Nov 4, 2025
8ac09d0
feat: hidden groups
Nov 4, 2025
88ea6dc
refactor: styles
Nov 4, 2025
573297f
refactor: clear code
Nov 4, 2025
1036cf3
feat: hide groups with all hidden items
Nov 4, 2025
749eb41
refactor: using menuItems
Nov 4, 2025
a018f18
fix: scrollable menu items
Nov 4, 2025
511b9db
feat: render items in preview mode for all pages as is
Nov 4, 2025
55148f7
feat: updated mocks
Nov 4, 2025
b177949
fix: visible only group title in preview mode
Nov 4, 2025
1757541
fix: rendering subheader items
Nov 5, 2025
5e984f3
feat: sort group and group items
Nov 6, 2025
d563331
refactor: collapse groups in firstpanel component
Nov 6, 2025
a28a600
fix: group width when it collapses
Nov 6, 2025
28ca582
feat: move action items to the end of the list
Nov 6, 2025
52a38be
fix: groups height when sorting
Nov 6, 2025
ac4f61a
feat: disable group button when all items are hidden
Nov 7, 2025
d4b0c80
fix: sorting items
Nov 7, 2025
aaacd30
feat: updated docs
Nov 7, 2025
b57758a
refactor: removed redundant setDraggingItemTitle handler
Nov 7, 2025
349aa47
fix: hiding action items while editing menu items
Nov 7, 2025
c791253
refactor: remove order props as redundant
Nov 7, 2025
a01a015
feat: remove order from readme
Nov 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion src/components/AsideHeader/AsideHeader.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -205,14 +205,18 @@ $block: '.#{variables.$ns}aside-header';

&__panels {
z-index: var(--gn-aside-header-panel-z-index, 98);

position: fixed;
inset: var(--gn-top-alert-height, 0) 0 0;
overflow: auto;
display: flex;
flex-direction: column;
max-height: calc(100vh - var(--gn-top-alert-height, 0));
}

&__panel {
height: 100%;
flex-grow: 1;
height: auto;
}

&__pane-container {
Expand Down
6 changes: 6 additions & 0 deletions src/components/AsideHeader/AsideHeaderContext.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,16 @@
import React from 'react';

import {MenuGroup} from '../types';

import {AsideHeaderInnerProps, AsideHeaderItem} from './types';

export interface AsideHeaderInnerContextType extends AsideHeaderInnerProps {
menuItems: AsideHeaderItem[];
menuGroups?: MenuGroup[];
defaultMenuItems?: AsideHeaderItem[];
defaultMenuGroups?: MenuGroup[];
onMenuGroupsChanged?: (groups: MenuGroup[]) => void;
onToggleMenuGroupVisibility?: (groupId: string) => void;
allPagesIsAvailable: boolean;
onItemClick: (
item: AsideHeaderItem,
Expand Down
17 changes: 16 additions & 1 deletion src/components/AsideHeader/README-ru.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -207,8 +207,8 @@ export const Aside: FC = () => {
| href | HTML-атрибут `href`. | `string` | |
| onItemClick | Обратный вызов, срабатывающий при клике по элементу. Параметр `collapsed` указывает на состояние: `false` для обычных элементов, `true` для элементов в свернутом попапе или клике на кнопку "еще". | `(item: MenuItem, collapsed: boolean, event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void` | |
| onItemClickCapture | Обратный вызов, срабатывающий при клике по элементу. | ` (event: React.SyntheticEvent) => void` | |
| order | Определяет порядок отображения в элементе навигации. | `number` | |
| pinned | Запрещает скрытие элемента меню в `AllPagesPanel`. | `boolean` | `false` |
| preventUserRemoving | Запрещает пользователю скрывать/показывать элемент меню в режиме редактирования. | `boolean` | |
| rightAdornment | Настраивает правую часть элемента меню. | `React.ReactNode` | |
| title | Заголовок элемента меню. | `React.ReactNode` | |
| tooltipText | Содержимое тултипа. | `React.ReactNode` | |
Expand All @@ -224,6 +224,21 @@ export const Aside: FC = () => {
| ~~popupKeepMounted~~ | ⚠️ **Устарело**: Используйте `itemWrapper` для создания всплывающих окон. Всплывающее окно не будет удалено из DOM при скрытии. | `boolean` | `false` |
| ~~renderPopupContent~~ | ⚠️ **Устарело**: Используйте `itemWrapper` для создания всплывающих окон. Функция отвечает за отрисовку контента во всплывающем окне. | `() => React.ReactNode` | |
| ~~onOpenChangePopup~~ | ⚠️ **Устарело**: Используйте `itemWrapper` для создания всплывающих окон. Обратный вызов для изменения состояния popupVisible, например, при отклонении. | [`PopupProps['onOpenChange']`](https://github.com/gravity-ui/uikit/blob/7748aaeec8dc7414487f7c06c899f16b275b25ef/src/components/Popup/Popup.tsx#L61) | |
| groupId | Идентификатор группы, к которой принадлежит элемент меню. Используется для группировки элементов меню | `string` | |

### `MenuGroup`

Позволяют организовать элементы меню в сворачиваемые группы. Каждая группа может иметь свою иконку, заголовок и состояние свернутости.

| Имя | Описание | Тип | Значение по умолчанию |
| :----------------- | :------------------------------------------------------------ | :-------------------------------------------------------------------------------------------------: | :-------------------: |
| id | Идентификатор группы | `string` | |
| title | Заголовок группы | `string` | |
| icon | Иконка группы на основе компонента `Icon` из фреймворка UIKit | [`IconProps['data']`](https://github.com/gravity-ui/uikit/tree/main/src/components/Icon#properties) | |
| hidden | Скрывает группу из отображения | `boolean` | `false` |
| collapsible | Разрешает сворачивание группы через интерфейс | `boolean` | |
| collapsedByDefault | Начальное состояние свернутости, когда collapsible равно true | `boolean` | |
| collapsed | Текущее состояние свернутости | `boolean` | |

### `TopAlert`

Expand Down
17 changes: 16 additions & 1 deletion src/components/AsideHeader/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -208,8 +208,8 @@ export const Aside: FC = () => {
| href | HTML href attribute | `string` | |
| onItemClick | Callback will be called when clicking on the item. The `collapsed` parameter indicates state: `false` for regular items, `true` for items in collapsed popup or when clicking the "more" button. | `(item: AsideHeaderItem, collapsed: boolean, event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void` | |
| onItemClickCapture | Callback will be called when clicking on the item | ` (event: React.SyntheticEvent) => void` | |
| order | Determine the display order in the navigation | `number` | |
| pinned | The parameter restricts hiding menu item in the `AllPagesPanel` | `boolean` | `false` |
| preventUserRemoving | Prevents the user from hiding/showing the menu item in edit mode | `boolean` | |
| rightAdornment | Customize right side of the menu item | `React.ReactNode` | |
| title | The menu item title | `React.ReactNode` | |
| tooltipText | Tooltip content | `React.ReactNode` | |
Expand All @@ -225,6 +225,21 @@ export const Aside: FC = () => {
| ~~popupKeepMounted~~ | ⚠️ **Deprecated**: Use `itemWrapper` for popup functionality. The pop-up window will not be removed from the DOM when it is opened. | `boolean` | `false` |
| ~~renderPopupContent~~ | ⚠️ **Deprecated**: Use `itemWrapper` for popup functionality. This function is responsible for rendering content in a pop-up window. | `() => React.ReactNode` | |
| ~~onOpenChangePopup~~ | ⚠️ **Deprecated**: Use `itemWrapper` for popup functionality. A callback for changing the popupVisible state, such as when it is dismissed. | [`PopupProps['onOpenChange']`](https://github.com/gravity-ui/uikit/blob/7748aaeec8dc7414487f7c06c899f16b275b25ef/src/components/Popup/Popup.tsx#L61) | |
| groupId | The group ID to which the menu item belongs. Used for grouping menu items | `string` | |

### `MenuGroup`

Menu groups allow you to organize menu items into collapsible groups. Each group can have its own icon, title, and collapsed state.

| Name | Description | Type | Default |
| :----------------- | :----------------------------------------------- | :-------------------------------------------------------------------------------------------------: | :-----: |
| id | The group identifier | `string` | |
| title | The group title | `string` | |
| icon | Group icon based on the uikit `Icon` component | [`IconProps['data']`](https://github.com/gravity-ui/uikit/tree/main/src/components/Icon#properties) | |
| hidden | Hide the group from display | `boolean` | `false` |
| collapsible | Allow collapsing the group via UI | `boolean` | |
| collapsedByDefault | Initial collapsed state when collapsible is true | `boolean` | |
| collapsed | Current collapsed state | `boolean` | |

### `TopAlert`

Expand Down
Binary file modified ...test.tsx-snapshots/AsideHeader-render-story-HeaderAlert-dark-chromium-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...l.test.tsx-snapshots/AsideHeader-render-story-HeaderAlert-dark-webkit-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...est.tsx-snapshots/AsideHeader-render-story-HeaderAlert-light-chromium-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ....test.tsx-snapshots/AsideHeader-render-story-HeaderAlert-light-webkit-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Loading