Skip to content

Commit 0dc6bf9

Browse files
ECHOES-1032 Align icons in sidebar collapsed mode
1 parent 4eca027 commit 0dc6bf9

File tree

4 files changed

+31
-16
lines changed

4 files changed

+31
-16
lines changed

src/components/layout/sidebar-navigation/SidebarNavigation.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,7 @@ const SidebarNavigationWrapper = styled.nav`
100100
101101
--sidebar-navigation-width: ${cssVar('layout-sidebar-navigation-sizes-width-open')};
102102
103-
// hover and focus-within pilotes the open state of the sidebar
103+
// hover and focus-within pilots the open state of the sidebar
104104
[data-sidebar-docked='false'] &:not(:hover, :focus-within) {
105105
--sidebar-navigation-width: ${cssVar('layout-sidebar-navigation-sizes-width-closed')};
106106
}

src/components/layout/sidebar-navigation/SidebarNavigationAccordionItem.tsx

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -164,6 +164,11 @@ AccordionItem.displayName = 'AccordionItem';
164164

165165
const AccordionItemPanel = styled.section`
166166
margin-left: ${cssVar('dimension-space-300')};
167+
168+
[data-sidebar-docked='false'] nav:not(:hover, :focus-within) & {
169+
margin-left: ${cssVar('dimension-space-200')};
170+
}
171+
167172
padding-left: ${cssVar('dimension-space-100')};
168173
padding-right: ${cssVar('dimension-space-100')};
169174
border-left: ${cssVar('border-width-default')} solid ${cssVar('color-border-weak')};
@@ -173,21 +178,11 @@ const AccordionItemPanel = styled.section`
173178
--sidebar-navigation-accordion-children-display: flex;
174179
--sidebar-navigation-accordion-children-gap: ${cssVar('dimension-space-50')};
175180
176-
// The next two rules hide the child SidebarNavigationItems when the accordion is closed, and also
177-
// when the sidebar is neither docked nor open (hovered or focused).
181+
// Hide the child SidebarNavigationItems when the accordion is closed
178182
&[data-accordion-open='false'] {
179183
--sidebar-navigation-accordion-children-display: none;
180184
--sidebar-navigation-accordion-children-gap: ${cssVar('dimension-space-0')};
181185
}
182-
183-
[data-sidebar-docked='false'] nav:not(:hover, :focus-within) & {
184-
margin: 0;
185-
padding: 0;
186-
border-left: none;
187-
188-
--sidebar-navigation-accordion-children-display: none;
189-
--sidebar-navigation-accordion-children-gap: ${cssVar('dimension-space-0')};
190-
}
191186
`;
192187

193188
AccordionItemPanel.displayName = 'AccordionItemPanel';
@@ -198,6 +193,10 @@ export const AccordionItemsList = styled.ul`
198193
display: flex;
199194
flex-direction: column;
200195
gap: var(--sidebar-navigation-accordion-children-gap);
196+
197+
[data-sidebar-docked='false'] nav:not(:hover, :focus-within) & > li {
198+
visibility: hidden;
199+
}
201200
`;
202201

203202
AccordionItemsList.displayName = 'AccordionItemsList';

src/components/layout/sidebar-navigation/SidebarNavigationBody.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ SidebarNavigationBodyInner.displayName = 'SidebarNavigationBodyInner';
8282

8383
const SidebarNavigationBottomShadowScroll = styled(BottomShadowScroll)`
8484
[data-sidebar-docked='false'] nav:not(:hover, :focus-within) & {
85-
display: none;
85+
opacity: 0.5;
8686
}
8787
`;
8888
SidebarNavigationBottomShadowScroll.displayName = 'SidebarNavigationBottomShadowScroll';

src/components/layout/sidebar-navigation/SidebarNavigationGroup.tsx

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import styled from '@emotion/styled';
2222
import { forwardRef, PropsWithChildren, useId } from 'react';
2323
import { TextNode } from '~types/utils';
2424
import { cssVar } from '~utils/design-tokens';
25+
import { Divider } from '../../divider';
2526
import { Text } from '../../typography';
2627
import { UnstyledListItem } from './SidebarNavigationItemStyles';
2728

@@ -52,9 +53,11 @@ export const SidebarNavigationGroup = forwardRef<
5253
role="group"
5354
{...radixProps}>
5455
<SidebarNavigationGroupLabel id={id}>
55-
<Text isSubtle size="small">
56+
<SidebarNavigationGroupLabelText isSubtle size="small">
5657
{label}
57-
</Text>
58+
</SidebarNavigationGroupLabelText>
59+
60+
<SidebarNavigationGroupLabelDivider />
5861
</SidebarNavigationGroupLabel>
5962
<SidebarNavigationGroupList>{children}</SidebarNavigationGroupList>
6063
</SidebarNavigationGroupContainer>
@@ -76,12 +79,25 @@ const SidebarNavigationGroupLabel = styled.label`
7679
align-items: center;
7780
height: ${cssVar('dimension-height-800')};
7881
padding: 0 ${cssVar('dimension-space-100')};
82+
white-space: nowrap;
83+
`;
84+
SidebarNavigationGroupLabel.displayName = 'SidebarNavigationGroupLabel';
7985

86+
const SidebarNavigationGroupLabelText = styled(Text)`
8087
[data-sidebar-docked='false'] nav:not(:hover, :focus-within) & {
8188
display: none;
8289
}
8390
`;
84-
SidebarNavigationGroupLabel.displayName = 'SidebarNavigationGroupLabel';
91+
SidebarNavigationGroupLabelText.displayName = 'SidebarNavigationGroupLabelText';
92+
93+
const SidebarNavigationGroupLabelDivider = styled(Divider)`
94+
[data-sidebar-docked='true'] &,
95+
nav:hover &,
96+
nav:focus-within & {
97+
display: none;
98+
}
99+
`;
100+
SidebarNavigationGroupLabelDivider.displayName = 'SidebarNavigationGroupLabelDivider';
85101

86102
export const SidebarNavigationGroupList = styled.ul`
87103
all: unset;

0 commit comments

Comments
 (0)