Skip to content

Commit 993ea2e

Browse files
dustinuseydustinusey
committed
support for collapsable left panel
1 parent 1295f6e commit 993ea2e

File tree

8 files changed

+112
-34
lines changed

8 files changed

+112
-34
lines changed

‎frontend/dist/images/panel-toggle.png

354 Bytes
Loading

‎frontend/dist/scripts/app.js

Lines changed: 29 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -112,10 +112,38 @@ darkTheme.addEventListener('click', () => {
112112
*/
113113

114114
// variables
115+
const techdegreePanel = document.getElementById('techdegreePanel');
115116
const techdegreeHeader = document.getElementById('techdegreeHeader');
116117
const techdegreeDropdown = document.getElementById('techdegreeDropdown');
117-
const techdegreeDropdownArrow = techdegreeHeader.querySelector('i');
118118
const dropdownLoader = techdegreeDropdown.querySelector('.loader');
119+
const panelToggle = document.querySelectorAll('[data-panel-toggle]');
120+
let isPanelHidden = false;
121+
122+
panelToggle.forEach(toggle => {
123+
toggle.addEventListener('click', () => {
124+
togglePanel();
125+
})
126+
});
127+
128+
function togglePanel() {
129+
if (!isPanelHidden) {
130+
isPanelHidden = true;
131+
} else {
132+
isPanelHidden = false;
133+
}
134+
const toggleList = document.querySelectorAll('[data-toggle]');
135+
136+
techdegreePanel.classList.toggle('hide');
137+
138+
toggleList.forEach(item => {
139+
item.classList.toggle('active');
140+
});
141+
}
142+
143+
// panelToggle.addEventListener('click', () => {
144+
// techdegreePanel.classList.toggle('show');
145+
// panelToggle.querySelector('i').classList.toggle('rotate');
146+
// })
119147

120148
/* initially, the dropdown is hidden (closed) so calling this function
121149
on page-load gives a subtle animation of the dropdown opening */
@@ -128,10 +156,6 @@ fetch('https://grading-tool-api.herokuapp.com/api/techdegrees')
128156

129157
// ** event listeners **
130158

131-
// toggles dropdown hide/show on techdegreeHeader click
132-
techdegreeHeader.addEventListener('click', () => {
133-
toggleDropdown();
134-
});
135159

136160
techdegreeDropdown.addEventListener('click', e => {
137161
let tds = document.querySelectorAll('[data-dropdown-td-name]');
@@ -153,15 +177,13 @@ function toggleDropdown() {
153177
if (techdegreeDropdown.hasAttribute('active')) {
154178
techdegreeDropdown.removeAttribute('active');
155179
techdegreeDropdown.style.animation = 'bounceOutUp 1s ease-in-out forwards'
156-
techdegreeDropdownArrow.style.transform = 'rotate(0deg)'
157180
setTimeout(() => {
158181
techdegreeDropdown.style.display = 'none';
159182
}, 600)
160183
} else {
161184
techdegreeDropdown.setAttribute('active', '');
162185
techdegreeDropdown.style.display = 'block';
163186
techdegreeDropdown.style.animation = 'bounceInDown 1s ease-out forwards'
164-
techdegreeDropdownArrow.style.transform = 'rotate(180deg)'
165187
}
166188
}
167189

‎frontend/dist/styles/app.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/src/images/panel-toggle.png

354 Bytes
Loading

‎frontend/src/scripts/app.js

Lines changed: 29 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -112,10 +112,38 @@ darkTheme.addEventListener('click', () => {
112112
*/
113113

114114
// variables
115+
const techdegreePanel = document.getElementById('techdegreePanel');
115116
const techdegreeHeader = document.getElementById('techdegreeHeader');
116117
const techdegreeDropdown = document.getElementById('techdegreeDropdown');
117-
const techdegreeDropdownArrow = techdegreeHeader.querySelector('i');
118118
const dropdownLoader = techdegreeDropdown.querySelector('.loader');
119+
const panelToggle = document.querySelectorAll('[data-panel-toggle]');
120+
let isPanelHidden = false;
121+
122+
panelToggle.forEach(toggle => {
123+
toggle.addEventListener('click', () => {
124+
togglePanel();
125+
})
126+
});
127+
128+
function togglePanel() {
129+
if (!isPanelHidden) {
130+
isPanelHidden = true;
131+
} else {
132+
isPanelHidden = false;
133+
}
134+
const toggleList = document.querySelectorAll('[data-toggle]');
135+
136+
techdegreePanel.classList.toggle('hide');
137+
138+
toggleList.forEach(item => {
139+
item.classList.toggle('active');
140+
});
141+
}
142+
143+
// panelToggle.addEventListener('click', () => {
144+
// techdegreePanel.classList.toggle('show');
145+
// panelToggle.querySelector('i').classList.toggle('rotate');
146+
// })
119147

120148
/* initially, the dropdown is hidden (closed) so calling this function
121149
on page-load gives a subtle animation of the dropdown opening */
@@ -128,10 +156,6 @@ fetch('https://grading-tool-api.herokuapp.com/api/techdegrees')
128156

129157
// ** event listeners **
130158

131-
// toggles dropdown hide/show on techdegreeHeader click
132-
techdegreeHeader.addEventListener('click', () => {
133-
toggleDropdown();
134-
});
135159

136160
techdegreeDropdown.addEventListener('click', e => {
137161
let tds = document.querySelectorAll('[data-dropdown-td-name]');
@@ -153,15 +177,13 @@ function toggleDropdown() {
153177
if (techdegreeDropdown.hasAttribute('active')) {
154178
techdegreeDropdown.removeAttribute('active');
155179
techdegreeDropdown.style.animation = 'bounceOutUp 1s ease-in-out forwards'
156-
techdegreeDropdownArrow.style.transform = 'rotate(0deg)'
157180
setTimeout(() => {
158181
techdegreeDropdown.style.display = 'none';
159182
}, 600)
160183
} else {
161184
techdegreeDropdown.setAttribute('active', '');
162185
techdegreeDropdown.style.display = 'block';
163186
techdegreeDropdown.style.animation = 'bounceInDown 1s ease-out forwards'
164-
techdegreeDropdownArrow.style.transform = 'rotate(180deg)'
165187
}
166188
}
167189

‎frontend/src/styles/components/_global.scss

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,7 @@
44
section {
55
@include flex(column, nowrap, flex-start, stretch);
66
&.techdegree-panel {
7-
@include strict-width($techdegree-panel-width);
8-
@include theme-transition;
7+
// in _header.scss
98
}
109
&.view-container {
1110
@include size(100%, $view-container-width);

‎frontend/src/styles/components/techdegree-panel/_header.scss

Lines changed: 40 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,58 @@
1+
.panel-toggle-view {
2+
@include bg(var(--td-header-bg));
3+
@include flex(row, nowrap, center, flex-start);
4+
@include size(100%, 50px);
5+
@include strict-width(50px);
6+
animation: fadeInLeft 0.4s ease forwards;
7+
display: none;
8+
&.active {
9+
display: flex;
10+
}
11+
img {
12+
margin-top: 1rem;
13+
cursor: pointer;
14+
}
15+
}
16+
117
.techdegree-panel {
18+
width: 0;
19+
min-width: 0;
20+
221
header {
322
@include theme-transition;
423
@include bg(var(--td-header-bg));
524
@include flex(row, nowrap, flex-start, center);
25+
position: relative;
626
z-index: 100;
727
color: var(--td-header-color);
828
padding: 0.5rem 1rem;
9-
cursor: pointer;
10-
&:hover {
11-
@include bg(var(--td-header-bg-hover));
12-
}
13-
img {
14-
max-width: 50px;
29+
img.logo {
30+
max-width: 40px;
1531
margin-right: 1rem;
1632
filter: brightness(100);
1733
}
1834
p {
1935
margin: auto auto auto 0.25rem;
2036
font-size: 0.9rem;
2137
}
22-
i {
23-
margin-left: 1rem;
24-
transition: transform 0.3s 0.3s ease-in-out;
38+
}
39+
40+
img.panel-toggle {
41+
width: 22px;
42+
cursor: pointer;
43+
}
44+
45+
.toggle-item {
46+
display: none !important;
47+
&.active {
48+
display: block !important;
2549
}
50+
&.flex.active {
51+
display: flex !important;
52+
}
53+
}
54+
55+
&.active {
56+
@include strict-width($techdegree-panel-width);
2657
}
2758
}

‎index.html

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -32,28 +32,32 @@ <h1> Hold up!</h1>
3232
<!-- gradingtool -->
3333
<main class="gradingtool desktop">
3434

35+
<div class="panel-toggle-view toggle-item" data-toggle>
36+
<img data-panel-toggle class="panel-toggle" src="./frontend/dist/images/panel-toggle.png" alt="">
37+
</div>
38+
3539
<!-- left panel -->
36-
<section class="panel techdegree-panel">
40+
<section class="panel techdegree-panel active toggle-item" data-toggle id="techdegreePanel">
3741
<!-- header -->
38-
<header id="techdegreeHeader">
39-
<img data-td-logo src="./frontend/dist/images/fewd.png" alt="">
42+
<header id="techdegreeHeade" data-toggle class="active toggle-item flex">
43+
<img data-td-logo class="logo" src="./frontend/dist/images/fewd.png" alt="">
4044
<p data-td-name></p>
41-
<i class="fa-solid fa-angle-down"></i>
45+
<img data-panel-toggle class="panel-toggle" src="./frontend/dist/images/panel-toggle.png" alt="">
4246
</header>
4347
<!-- td list -->
44-
<div class="techdegree-dropdown" id="techdegreeDropdown">
48+
<div class="techdegree-dropdown toggle-item active" id="techdegreeDropdown" data-toggle>
4549
<div class="loader"></div>
4650
</div>
4751
<!-- project list -->
48-
<ul class="td-project-list" id="tdProjectList">
52+
<ul class="td-project-list toggle-item active" id="tdProjectList" data-toggle>
4953
<div class="loader"></div>
5054
<!-- <li data-project-id="1" style="">My Personal Profile Page</li><li data-project-id="2">Mobile-first Responsive Layout</li><li data-project-id="3">An Online Registration Form</li><li data-project-id="4">Web Style Guide</li><li data-project-id="5">An Interactive Photo Gallery</li><li data-project-id="6">Game Show App</li><li data-project-id="7">WebApp Dashboard</li><li data-project-id="8">Use an API to Create an Employee Directory</li><li data-project-id="9">Capstone Portfolio</li> -->
5155
</ul>
5256
<!-- resources -->
53-
<ul class="resource-list" id="resourceList">
57+
<ul class="resource-list toggle-item active" id="resourceList" data-toggle>
5458
<!-- dynamic -->
5559
</ul>
56-
<div class="meet-the-noobs">
60+
<div class="meet-the-noobs toggle-item active" data-toggle>
5761
<!-- <header>Developed by <i class="fa-solid fa-chevron-down"></i></header> -->
5862
<details>
5963
<summary>Developed by</summary>

0 commit comments

Comments
 (0)