Skip to content

Commit 582c775

Browse files
aliosoalioso
authored
Merge pull request linode#23 from linode/DLC-159
Display Endpoint Menu on Mobile
2 parents 536d461 + df99a8e commit 582c775

File tree

2 files changed

+180
-94
lines changed

2 files changed

+180
-94
lines changed

‎src/components/2_molecules/sidemenu.js

Lines changed: 115 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,15 @@ class SideMenu extends React.Component {
104104
}
105105
};
106106

107+
toggleMobileMenu = e => {
108+
const menu = document.querySelector(".mobile-sidebar");
109+
if (menu && menu.classList.contains("is-expanded")) {
110+
menu.classList.remove("is-expanded");
111+
} else if (menu) {
112+
menu.classList.add("is-expanded");
113+
}
114+
};
115+
107116
render() {
108117
const { activePage } = this.state;
109118
const groups = this.props.data.allPaths.group;
@@ -138,104 +147,120 @@ class SideMenu extends React.Component {
138147
<ul className="p-0 mb-4">
139148
<TopMenu />
140149
</ul>
141-
{groups.map((group, i) => {
142-
return (
143-
<div className="list-container" key={i}>
144-
<button
145-
onClick={this.toggleActive}
146-
className="sidemenu-button"
147-
>
148-
<span className="mt-0">
149-
<b>{group.fieldValue}</b>
150-
</span>
151-
<span className="caret ml-2">
152-
<Caret />
153-
</span>
154-
</button>
155-
<div
156-
id={_.kebabCase(group.fieldValue)}
157-
className="list-group"
158-
>
159-
{group.edges.map((link, i) => {
160-
const n = link.node;
161-
return (
162-
<ul key={i} className="p-0">
163-
{n.get && (
164-
<li className="list-reset">
165-
<Link
166-
to={`/api/v4/${_.kebabCase(n.name)}`}
167-
className={`${
168-
_.kebabCase(n.name) + "/" === activePage
169-
? "active-item"
170-
: null
171-
}
150+
<div className="mobile-sidebar">
151+
<div className="mobile-sidebar__header-wrapper md:hidden">
152+
<div onClick={this.toggleMobileMenu}>
153+
<p className="mobile-sidebar__header">Endpoints</p>
154+
</div>
155+
<span className="mobile-sidebar__caret ml-2">
156+
<Caret />
157+
</span>
158+
</div>
159+
<div className="mobile-sidebar__list">
160+
{groups.map((group, i) => {
161+
return (
162+
<div className="list-container" key={i}>
163+
<button
164+
onClick={this.toggleActive}
165+
className="sidemenu-button"
166+
>
167+
<span className="mt-0">
168+
<b>{group.fieldValue}</b>
169+
</span>
170+
<span className="caret ml-2">
171+
<Caret />
172+
</span>
173+
</button>
174+
<div
175+
id={_.kebabCase(group.fieldValue)}
176+
className="list-group"
177+
>
178+
{group.edges.map((link, i) => {
179+
const n = link.node;
180+
return (
181+
<ul key={i} className="p-0">
182+
{n.get && (
183+
<li className="list-reset">
184+
<Link
185+
to={`/api/v4/${_.kebabCase(n.name)}`}
186+
className={`${
187+
_.kebabCase(n.name) + "/" === activePage
188+
? "active-item"
189+
: null
190+
}
172191
api-link
173192
`}
174-
onClick={this.toggleActiveLink}
175-
>
176-
{n.get.summary}
177-
</Link>
178-
</li>
179-
)}
180-
{n.post && (
181-
<li className="list-reset">
182-
<Link
183-
to={`/api/v4/${_.kebabCase(n.name)}/#post`}
184-
className={`${
185-
_.kebabCase(n.name) + "/#post" === activePage
186-
? "active-item"
187-
: null
188-
}
193+
onClick={this.toggleActiveLink}
194+
>
195+
{n.get.summary}
196+
</Link>
197+
</li>
198+
)}
199+
{n.post && (
200+
<li className="list-reset">
201+
<Link
202+
to={`/api/v4/${_.kebabCase(n.name)}/#post`}
203+
className={`${
204+
_.kebabCase(n.name) + "/#post" ===
205+
activePage
206+
? "active-item"
207+
: null
208+
}
189209
api-link
190210
`}
191-
onClick={this.toggleActiveLink}
192-
>
193-
{n.post.summary}
194-
</Link>
195-
</li>
196-
)}
197-
{n.put && (
198-
<li className="list-reset">
199-
<Link
200-
to={`/api/v4/${_.kebabCase(n.name)}/#put`}
201-
className={`${
202-
_.kebabCase(n.name) + "/#put" === activePage
203-
? "active-item"
204-
: null
205-
}
211+
onClick={this.toggleActiveLink}
212+
>
213+
{n.post.summary}
214+
</Link>
215+
</li>
216+
)}
217+
{n.put && (
218+
<li className="list-reset">
219+
<Link
220+
to={`/api/v4/${_.kebabCase(n.name)}/#put`}
221+
className={`${
222+
_.kebabCase(n.name) + "/#put" ===
223+
activePage
224+
? "active-item"
225+
: null
226+
}
206227
api-link
207228
`}
208-
onClick={this.toggleActiveLink}
209-
>
210-
{n.put.summary}
211-
</Link>
212-
</li>
213-
)}
214-
{n.delete && (
215-
<li className="list-reset">
216-
<Link
217-
to={`/api/v4/${_.kebabCase(n.name)}/#delete`}
218-
className={`${
219-
_.kebabCase(n.name) + "/#delete" ===
220-
activePage
221-
? "active-item"
222-
: null
223-
}
229+
onClick={this.toggleActiveLink}
230+
>
231+
{n.put.summary}
232+
</Link>
233+
</li>
234+
)}
235+
{n.delete && (
236+
<li className="list-reset">
237+
<Link
238+
to={`/api/v4/${_.kebabCase(
239+
n.name
240+
)}/#delete`}
241+
className={`${
242+
_.kebabCase(n.name) + "/#delete" ===
243+
activePage
244+
? "active-item"
245+
: null
246+
}
224247
api-link
225248
`}
226-
onClick={this.toggleActiveLink}
227-
>
228-
{n.delete.summary}
229-
</Link>
230-
</li>
231-
)}
232-
</ul>
233-
);
234-
})}
235-
</div>
236-
</div>
237-
);
238-
})}
249+
onClick={this.toggleActiveLink}
250+
>
251+
{n.delete.summary}
252+
</Link>
253+
</li>
254+
)}
255+
</ul>
256+
);
257+
})}
258+
</div>
259+
</div>
260+
);
261+
})}
262+
</div>
263+
</div>
239264
</div>
240265
</div>
241266
</div>

‎src/css/components/4_pages/api-page.css

Lines changed: 65 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,6 @@
4040
.active-group .list-group {
4141
max-height: 100%;
4242
visibility: visible;
43-
border-left: 1px solid #ddd;
4443
@apply mt-2 mb-4 ml-2 pl-2;
4544
}
4645

@@ -50,7 +49,7 @@
5049
}
5150

5251
.active-group .list-group li {
53-
@apply my-2;
52+
@apply py-3;
5453
}
5554

5655
.caret {
@@ -88,13 +87,53 @@
8887
@apply text-BaseBlackFull font-bold no-underline;
8988
}
9089

91-
.list-container {
90+
.mobile-sidebar {
91+
width: 100%;
92+
border: 1px solid #606469;
93+
cursor: pointer;
94+
}
95+
96+
.mobile-sidebar__header-wrapper {
97+
position: relative;
98+
padding: 0.5rem;
99+
}
100+
101+
.mobile-sidebar__header {
102+
margin: 0;
103+
}
104+
105+
.mobile-sidebar__caret {
106+
@apply text-BaseBlackFull;
107+
position: absolute;
108+
top: 40%;
109+
right: 10px;
110+
width: 10px;
111+
height: 10px;
112+
display: inline-flex;
113+
align-items: center;
114+
justify-content: center;
115+
transition: transform 0.2s ease-in-out;
116+
transform: rotate(90deg);
117+
}
118+
119+
.mobile-sidebar__list {
92120
display: none;
93121
}
94122

123+
.is-expanded .mobile-sidebar__caret {
124+
transform: rotate(-90deg);
125+
}
126+
127+
.is-expanded .mobile-sidebar__list {
128+
display: block;
129+
}
130+
131+
.list-container {
132+
}
133+
95134
.sidemenu-button {
96135
width: 100%;
97-
padding: 6px 0;
136+
padding: 10px;
98137
/* margin: 0 6px; */
99138
text-align: left;
100139
display: flex;
@@ -166,10 +205,24 @@
166205
width: auto;
167206
}
168207

208+
.sidemenu-button {
209+
padding: 6px 0;
210+
}
211+
169212
.api-content-wrapper {
170213
margin-left: 300px;
171214
}
172215

216+
.mobile-sidebar {
217+
width: auto;
218+
border: none;
219+
cursor: auto;
220+
}
221+
222+
.mobile-sidebar__list {
223+
display: block;
224+
}
225+
173226
.list-container {
174227
display: block;
175228
margin-bottom: 0;
@@ -185,6 +238,14 @@
185238
box-shadow: none;
186239
background-color: none;
187240
}
241+
242+
.active-group .list-group {
243+
border-left: 1px solid #ddd;
244+
}
245+
246+
.active-group .list-group li {
247+
@apply py-2;
248+
}
188249
}
189250

190251
@screen lg {

0 commit comments

Comments
 (0)