Skip to content

Commit 3a2a7ac

Browse files
mansonamansona
authored
Merge pull request #369 from ember-learn/nickschot/sidebar-component
add es-sidebar component & sidebar-container styles
2 parents 63487ee + 32368fc commit 3a2a7ac

File tree

11 files changed

+302
-0
lines changed

11 files changed

+302
-0
lines changed

‎addon/components/es-sidebar.js

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import Component from '@glimmer/component';
2+
import { tracked } from '@glimmer/tracking';
3+
import { action } from '@ember/object';
4+
import { inject as service } from '@ember/service';
5+
6+
export default class EsSidebarComponent extends Component {
7+
@service router;
8+
9+
@tracked isOpen = false;
10+
11+
constructor() {
12+
super(...arguments);
13+
14+
this.router.on('routeDidChange', this.close);
15+
}
16+
17+
willDestroy() {
18+
this.router.off('routeDidChange', this.close);
19+
20+
super.willDestroy(...arguments);
21+
}
22+
23+
@action
24+
toggle() {
25+
this.isOpen = !this.isOpen;
26+
}
27+
28+
@action
29+
close() {
30+
if (this.isOpen) {
31+
this.isOpen = false;
32+
}
33+
}
34+
}

‎addon/styles/addon.css

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
@import 'layout.css';
1313
@import 'grid.css';
1414
@import 'icon.css';
15+
@import 'sidebar-container.css';
1516
@import 'well.css';
1617

1718
/* Helpers */
@@ -23,3 +24,4 @@
2324
@import 'components/es-footer.css';
2425
@import 'components/es-header.css';
2526
@import 'components/es-note.css';
27+
@import 'components/es-sidebar.css';

‎addon/styles/components/es-sidebar.css

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
:root {
2+
--es-sidebar-padding: 1rem;
3+
--es-sidebar-shadow: 0 0 1px 0 rgba(73, 79, 95, 0.6), 0 2px 10px -5px rgba(73, 79, 95, 0.55), 0 3px 30px -15px rgba(73, 79, 95, 0.8), 0 0 50px -5px rgba(73, 79, 95, 0.5);
4+
--es-sidebar-transition-duration: .3s;
5+
}
6+
7+
.es-sidebar-toggle,
8+
.es-sidebar-close {
9+
display: none;
10+
}
11+
12+
@media (max-width: 768px) {
13+
.es-sidebar-toggle {
14+
position: fixed;
15+
bottom: 30px;
16+
right: 30px;
17+
18+
display: flex;
19+
justify-content: center;
20+
align-items: center;
21+
height: 60px;
22+
width: 60px;
23+
padding: 0;
24+
25+
border-radius: 30px;
26+
box-shadow: var(--es-sidebar-shadow);
27+
}
28+
29+
@keyframes es-sidebar-in {
30+
0% {
31+
display: block;
32+
opacity: 0;
33+
transform: scale(0.01);
34+
}
35+
100% {
36+
display: block;
37+
opacity: 1;
38+
transform: scale(1);
39+
}
40+
}
41+
42+
.es-sidebar {
43+
box-sizing: border-box;
44+
display: none;
45+
position: fixed;
46+
top: var(--es-sidebar-padding);
47+
left: var(--es-sidebar-padding);
48+
height: calc(100% - var(--es-sidebar-padding) * 2);
49+
width: calc(100vw - var(--es-sidebar-padding) * 2);
50+
overflow-y: auto;
51+
52+
padding: 1rem;
53+
background: #FFF;
54+
border-radius: var(--radius);
55+
box-shadow: none;
56+
57+
transform-origin: bottom right;
58+
transition: box-shadow var(--es-sidebar-transition-duration);
59+
}
60+
61+
.es-sidebar[aria-expanded=true] {
62+
display: block;
63+
animation: var(--es-sidebar-transition-duration) es-sidebar-in ease-out forwards;
64+
box-shadow: var(--es-sidebar-shadow);
65+
}
66+
67+
.es-sidebar-content {
68+
margin-top: var(--spacing-5);
69+
}
70+
71+
.es-sidebar-close {
72+
display: inline-flex;
73+
float: right;
74+
position: sticky;
75+
top: 0;
76+
z-index: 1;
77+
padding: var(--spacing-1);
78+
background: #FFF;
79+
}
80+
81+
.es-sidebar-close svg path {
82+
fill: currentColor;
83+
}
84+
}

‎addon/styles/sidebar-container.css

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
.sidebar-container {
2+
display: flex;
3+
margin: auto;
4+
max-width: var(--container-width);
5+
padding: var(--spacing-6) var(--grid-margin);
6+
}
7+
8+
@media (max-width: 768px) {
9+
.sidebar-container {
10+
display: block;
11+
padding: var(--spacing-4) var(--grid-margin);
12+
}
13+
}
14+
15+
@media (min-width: 769px) {
16+
.sidebar-container > .es-sidebar {
17+
width: 234px;
18+
margin-right: 32px;
19+
flex-grow: 0;
20+
}
21+
22+
.sidebar-container > *:not(.es-sidebar):not(.es-sidebar-toggle) {
23+
flex-grow: 1;
24+
}
25+
26+
.sidebar-container > * + .es-sidebar {
27+
order: 999;
28+
margin-right: unset;
29+
margin-left: 32px;
30+
}
31+
}

‎addon/templates/components/es-sidebar.hbs

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<nav class="es-sidebar" aria-label="Secondary content navigation" aria-expanded="{{this.isOpen}}" ...attributes>
2+
<EsButton
3+
@secondary={{true}}
4+
class="es-sidebar-close"
5+
aria-label="Close Sidebar"
6+
@type="button"
7+
@onClicked={{this.close}}
8+
>
9+
{{svg-jar "close-icon"}}
10+
</EsButton>
11+
<div class="es-sidebar-content">
12+
{{yield}}
13+
</div>
14+
</nav>
15+
16+
<EsButton
17+
class="es-sidebar-toggle"
18+
aria-label="Toggle Sidebar"
19+
@type="button"
20+
@onClicked={{this.toggle}}
21+
>
22+
{{svg-jar "sidebar-icon" aria-hidden="true"}}
23+
</EsButton>

‎app/components/es-sidebar.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from 'ember-styleguide/components/es-sidebar';

‎app/templates/components/es-sidebar.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from 'ember-styleguide/templates/components/es-sidebar';

‎docs/components/sidebar.md

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
# Sidebar
2+
3+
## Usage
4+
5+
The sidebar component can be used together with the sidebar-container class to add a responsive sidebar to the page. If the sidebar is the first element in the sidebar-container it will display as a left sidebar. Otherwise it will display as a right sidebar.
6+
7+
The sidebar component will automatically switch to the mobile mode once your browser window is smaller than or equal to 768px.
8+
9+
<style>
10+
.sidebar-container {
11+
transform: translateZ(0);
12+
min-height: 300px;
13+
}
14+
15+
.sidebar-container > .example-content {
16+
background: #EEE;
17+
}
18+
19+
.sidebar-container .es-sidebar {
20+
background: #FFF;
21+
}
22+
23+
@media (max-width: 768px) {
24+
.sidebar-container .es-sidebar {
25+
width: calc(100% - var(--es-sidebar-padding) * 2);
26+
}
27+
}
28+
</style>
29+
30+
### Left Sidebar Example
31+
```handlebars
32+
<div class="sidebar-container">
33+
<EsSidebar>
34+
My Left Sidebar Content
35+
</EsSidebar>
36+
<div class="example-content">
37+
My Content
38+
</div>
39+
</div>
40+
```
41+
42+
### Right Sidebar Example
43+
```handlebars
44+
<div class="sidebar-container">
45+
<div class="example-content">
46+
My Content
47+
</div>
48+
<EsSidebar>
49+
My Right Sidebar Content
50+
</EsSidebar>
51+
</div>
52+
```

‎public/images/icons/close-icon.svg

Lines changed: 1 addition & 0 deletions
Loading

‎public/images/icons/sidebar-icon.svg

Lines changed: 1 addition & 0 deletions
Loading

0 commit comments

Comments
 (0)