Skip to content

Commit b65ba59

Browse files
EranNLEranNL
committed
WIP
1 parent e7ca3e1 commit b65ba59

File tree

6 files changed

+85
-45
lines changed

6 files changed

+85
-45
lines changed

‎src/components/Navigation/Vertical/ListItem.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,9 @@ const NavigationListItem = React.forwardRef<HTMLDivElement, NavigationListItemPr
2929
{icon}
3030
</div>
3131
)}
32-
{children}
32+
<span className="vertical-navigation-list-item-text">
33+
{children}
34+
</span>
3335
</div>
3436
));
3537

‎src/components/Navigation/Vertical/VerticalNavigationScope.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export interface VerticalNavigationScope {
2+
collapsed: boolean;
3+
collapse: () => void;
4+
}

‎src/components/Navigation/VerticalNavigation.tsx

Lines changed: 30 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import NavigationTop from '@/components/Navigation/Vertical/Top';
77
import NavigationList from '@/components/Navigation/Vertical/List';
88
import NavigationListItem from '@/components/Navigation/Vertical/ListItem';
99
import NavigationDivider from '@/components/Navigation/Vertical/Divider';
10+
import { useState } from 'react';
11+
import { VerticalNavigationScope } from './Vertical/VerticalNavigationScope';
1012

1113
export interface VerticalNavigationStatics {
1214
Top: typeof NavigationTop;
@@ -17,6 +19,8 @@ export interface VerticalNavigationStatics {
1719

1820
export interface SideNavigationProps extends React.HTMLAttributes<HTMLDivElement> {
1921
variant?: Variant | string;
22+
collapsable?: boolean;
23+
children: React.ReactNode | ((scope: VerticalNavigationScope) => React.ReactNode);
2024
}
2125

2226
// @ts-ignore
@@ -28,18 +32,32 @@ const VerticalNavigation: ForwardComponentWithStatics<HTMLDivElement, SideNaviga
2832
variant
2933
},
3034
ref
31-
): React.ReactElement => (
32-
<div
33-
ref={ref}
34-
className={clsx(
35-
'vertical-navigation-container',
36-
variant && `navigation-${variant}`,
37-
className
38-
)}
39-
>
40-
{children}
41-
</div>
42-
));
35+
): React.ReactElement => {
36+
const [collapsed, setCollapsed] = useState<boolean>(false);
37+
38+
const makeScope = (): VerticalNavigationScope => ({
39+
collapsed,
40+
collapse: () => setCollapsed(!collapsed)
41+
});
42+
43+
children = typeof children === 'function'
44+
? (children as (scope: VerticalNavigationScope) => React.ReactNode)(makeScope())
45+
: children;
46+
47+
return (
48+
<div
49+
ref={ref}
50+
className={clsx(
51+
'vertical-navigation-container',
52+
collapsed && 'is-collapsed',
53+
variant && `navigation-${variant}`,
54+
className
55+
)}
56+
>
57+
{children}
58+
</div>
59+
)
60+
});
4361

4462
VerticalNavigation.displayName = 'VerticalNavigation';
4563
VerticalNavigation.propTypes = {

‎src/style/base/_variables.scss

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -579,9 +579,11 @@ $form-field-font-size: 1rem;
579579
* 9. Navigation
580580
*/
581581
$vertical-navigation-border-color: hsl(0, 0%, 88%);
582-
$vertical-navigation-active-item-background-color: rgba(0, 0, 0, .05);
582+
$vertical-navigation-hover-item-background-color: rgba(0, 0, 0, .05);
583+
$vertical-navigation-active-item-background-color: rgba(0, 0, 0, .1);
583584

584585
:root {
585586
--vertical-navigation-border-color: #{$vertical-navigation-border-color};
587+
--vertical-navigation-hover-item-background-color: #{$vertical-navigation-hover-item-background-color};
586588
--vertical-navigation-active-item-background-color: #{$vertical-navigation-active-item-background-color};
587589
}

‎src/style/components/_navigation.scss

Lines changed: 27 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,10 @@
4040
background: var(--vertical-navigation-hover-item-background-color);
4141
}
4242

43+
&:active {
44+
background: var(--vertical-navigation-active-item-background-color);
45+
}
46+
4347
.vertical-navigation-list-item-icon {
4448
margin-right: var(--base-gutter);
4549
font: {
@@ -51,24 +55,36 @@
5155
color: #fff;
5256
background: var(--primary-color);
5357
border-radius: var(--base-border-radius);
54-
55-
//&:before {
56-
// content: '';
57-
// position: absolute;
58-
// height: 100%;
59-
// width: 3px;
60-
// background: var(--primary-color);
61-
// border-radius: 0 var(--base-border-radius) var(--base-border-radius) 0;
62-
// left: 0;
63-
// top: 0;
64-
//}
6558
}
6659

6760
&:not(:last-child) {
6861
margin-bottom: var(--base-gutter);
6962
}
7063
}
7164
}
65+
66+
&.is-collapsed {
67+
min-width: auto;
68+
69+
.vertical-navigation-list-item {
70+
position: relative;
71+
.vertical-navigation-list-item-icon {
72+
margin-right: 0;
73+
}
74+
75+
.vertical-navigation-list-item-text {
76+
display: none;
77+
}
78+
79+
&:hover {
80+
white-space: nowrap;
81+
82+
.vertical-navigation-list-item-text {
83+
display: block;
84+
}
85+
}
86+
}
87+
}
7288
}
7389

7490
.navigation-primary {

‎www/src/index.tsx

Lines changed: 18 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -35,26 +35,24 @@ const TestControllable = () => {
3535
ReactDom.render(
3636
<Page>
3737
<Page.Left fixed>
38-
<VerticalNavigation>
39-
<VerticalNavigation.Top className="justify-content-center mb-4">
40-
<img src={logo} width={160} className="mb-8" />
41-
<Button
42-
iconLeft={<Icon icon="" />}
43-
variant={Variant.PRIMARY_GHOST}
44-
block
45-
>
46-
Download now
47-
</Button>
48-
</VerticalNavigation.Top>
49-
<VerticalNavigation.Divider />
50-
<VerticalNavigation.List>
51-
<VerticalNavigation.Item active icon={<Icon icon="home" />}>
52-
Home
53-
</VerticalNavigation.Item>
54-
<VerticalNavigation.Item icon={<Icon icon="user" />}>
55-
User
56-
</VerticalNavigation.Item>
57-
</VerticalNavigation.List>
38+
<VerticalNavigation collapsable>
39+
{({ collapse }) => (
40+
<>
41+
<VerticalNavigation.Top className="justify-content-center mb-4">
42+
<button onClick={collapse}></button>
43+
<img src={logo} width={160} className="mb-8" />
44+
</VerticalNavigation.Top>
45+
<VerticalNavigation.Divider />
46+
<VerticalNavigation.List>
47+
<VerticalNavigation.Item active icon={<Icon icon="home" />}>
48+
Home
49+
</VerticalNavigation.Item>
50+
<VerticalNavigation.Item icon={<Icon icon="user" />}>
51+
User
52+
</VerticalNavigation.Item>
53+
</VerticalNavigation.List>
54+
</>
55+
)}
5856
</VerticalNavigation>
5957
</Page.Left>
6058
<Page.Main>

0 commit comments

Comments
 (0)