Skip to content

feat: compact mode #536

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

Merged
kkirik merged 30 commits into from
Jan 14, 2026
Merged

feat: compact mode #536

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
172de88
refactor: use global variable for items height
Dec 30, 2025
5a5ae06
feat(AsideHeader): add isCompactMode prop infrastructure
Jan 5, 2026
a2c7473
feat(AsideHeader): add compact item height support
Jan 5, 2026
f760686
feat(AsideHeader): add compact collapsed width (40px)
Jan 5, 2026
8ad898e
feat(AsideHeader): add compact margin-inline (6px)
Jan 5, 2026
cbc1025
feat(AsideHeader): add compact border-radius and header divider
Jan 5, 2026
85a35e6
docs(AsideHeader): add isCompactMode documentation and story
Jan 5, 2026
5b00a07
fix: items height
Jan 9, 2026
4b045f6
refactor: extract getCollapsedWidth utility function
Jan 9, 2026
f4be484
feat: add compact divider icon for 40px navigation width
Jan 9, 2026
7f04de3
refactor: move compact-mode CSS variables to aside container
Jan 9, 2026
b87ae37
feat: add compact mode support for CollapseButton and update stories
Jan 9, 2026
9527df7
feat: use css variable to set --_--item-collapsed-radius
Jan 12, 2026
1a1003e
feat: added new test case for navigation with compact mode
Jan 12, 2026
71bf7b4
test: renamed test files with collapsed mode
Jan 12, 2026
02a0ebd
fix: wrong margin between items
Jan 12, 2026
1dd2afc
feat: updated font size and line height in navigation
Jan 12, 2026
f790efb
feat: adjust logo size by compact mode
Jan 12, 2026
de62acc
test: update screenshots
Jan 12, 2026
ec91703
feat: remove unused code
Jan 12, 2026
ce49ac0
fix: gaps calculation
Jan 13, 2026
3c92749
fix: css issue with icon margin
Jan 13, 2026
1423e0b
refactor: renamed some test cases and stories
Jan 13, 2026
deabf72
refactor: remove commented commented code
Jan 13, 2026
4da2228
refactor: renamed some variables for better readability
Jan 13, 2026
e25324b
fix: add default value for logo place when variable --_--item-height …
Jan 13, 2026
95c1a63
test: updated screenshot with default logo width
Jan 13, 2026
5ade186
feat: get back logo size for footer
Jan 14, 2026
f78d6cc
feat: use correct margins in logo component
Jan 14, 2026
c823d98
test: updated screenshots
Jan 14, 2026
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
9 changes: 3 additions & 6 deletions src/components/AsideHeader/AsideHeader.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ $block: '.#{variables.$ns}aside-header';
$class: &;
--gn-aside-header-min-width: 56px;

--_--item-icon-background-size: 36px;
Copy link
Collaborator

@DarkGenius DarkGenius Jan 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is this variable no longer needed?

Copy link
Contributor Author

@kkirik kkirik Jan 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Because I use the --_--item-height instead

--_--item-height: #{variables.$item-height};
--_--background-color: var(--g-color-base-background);
--_--decoration-collapsed-background-color: var(--g-color-base-warning-light);
--_--decoration-expanded-background-color: var(--g-color-base-warning-light);
Expand Down Expand Up @@ -232,11 +232,8 @@ $block: '.#{variables.$ns}aside-header';
}

&__logo-button &__logo-icon-place {
height: var(
--gn-aside-header-item-icon-background-size,
var(--_--item-icon-background-size)
);
width: var(--_--item-icon-background-size);
height: var(--_--item-height);
width: var(--_--item-height);
}

&__menu-items {
Expand Down
2 changes: 1 addition & 1 deletion src/components/AsideHeader/components/CompositeBar/CompositeBar.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ $block: '.#{variables.$ns}composite-bar';

&__menu-group-header,
&__menu-group-item {
height: 36px;
height: var(--_--item-height);
}

&__menu-group-item {
Expand Down
11 changes: 2 additions & 9 deletions ...omponents/AsideHeader/components/CompositeBar/HighlightedItem/HighlightedItem.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ $block: '.#{variables.$ns}composite-bar-highlighted-item';

#{$block} {
--_--background-color: var(--g-color-base-background);
--_--item-icon-background-size: 38px;
--_--item-background-color-hover: var(--g-color-base-selection-hover);
--_--item-selected-background-color-active: var(--g-color-base-selection);

Expand All @@ -14,14 +13,8 @@ $block: '.#{variables.$ns}composite-bar-highlighted-item';
justify-content: center;

&__icon {
width: var(
--gn-aside-header-item-icon-background-size,
var(--_--item-icon-background-size)
);
height: var(
--gn-aside-header-item-icon-background-size,
var(--_--item-icon-background-size)
);
width: var(--_--item-height);
height: var(--_--item-height);
border-radius: 7px;
cursor: pointer;
background-color: var(--gn-aside-header-background-color, var(--_--background-color));
Expand Down
13 changes: 3 additions & 10 deletions src/components/AsideHeader/components/CompositeBar/Item/Item.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ $actionLeftRightMargin: 10px;

$class: &;
--gn-composite-bar-item-action-size: 36px;
--_--item-icon-background-size: 36px;

--_--horizontal-divider-line-color: var(--g-color-line-generic);

Expand Down Expand Up @@ -109,14 +108,8 @@ $actionLeftRightMargin: 10px;
top: 50%;
left: 50%;
z-index: -1;
width: var(
--gn-aside-header-item-icon-background-size,
var(--_--item-icon-background-size)
);
height: var(
--gn-aside-header-item-icon-background-size,
var(--_--item-icon-background-size)
);
width: var(--_--item-height);
height: var(--_--item-height);
margin-top: -18px;
margin-left: -18px;
border-radius: var(
Expand Down Expand Up @@ -157,7 +150,7 @@ $actionLeftRightMargin: 10px;

&__icon-place {
flex-shrink: 0;
width: var(--_--item-icon-background-size, 36px);
width: var(--_--item-height);
display: flex;
align-items: center;
justify-content: center;
Expand Down
2 changes: 1 addition & 1 deletion src/components/AsideHeader/components/FooterItem/FooterItem.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ $block: '.#{variables.$ns}footer-item';
$class: &;

width: 100%;
height: 36px;
height: var(--_--item-height);

border-radius: var(--gn-aside-header-item-expanded-radius);
margin-bottom: 2px;
Expand Down
1 change: 1 addition & 0 deletions src/components/variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
$ns: 'gn-';
$item-height: 36px;