Skip to content

Commit 316e927

Browse files
cleberhenselcleberhensel
authored
Merge pull request #1 from OnoSendae/feat/organizacao-sidebar
Feat/organizacao sidebar
2 parents 0c03541 + b637d92 commit 316e927

8 files changed

Lines changed: 415 additions & 64 deletions

File tree

‎_includes/navigation.html‎

Lines changed: 31 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,41 @@
22
<h2>Módulos</h2>
33
<ul class="modules-list">
44
{% for module in site.data.modules.modules %}
5-
<li>
6-
<a href="{{ '/modules/' | append: module.slug | relative_url }}">
7-
{{ module.title }}
8-
</a>
5+
<li class="module-item">
6+
<div class="module-header">
7+
<button class="toggle-btn module-toggle" aria-label="Expandir ou colapsar módulo" aria-expanded="true">
8+
<span class="toggle-icon">▼</span>
9+
</button>
10+
<a href="{{ '/modules/' | append: module.slug | relative_url }}">
11+
{{ module.title }}
12+
</a>
13+
</div>
914
<ul class="lessons-list">
1015
{% for lesson_id in module.lessons %}
1116
{% assign lesson = site.data.lessons.lessons | where: "id", lesson_id | first %}
1217
{% if lesson %}
13-
<li>
14-
<a href="{{ '/modules/' | append: module.slug | append: '/lessons/' | append: lesson.slug | relative_url }}">
15-
{{ lesson.title }}
16-
</a>
18+
<li class="lesson-item">
19+
<div class="lesson-header">
20+
<button class="toggle-btn lesson-toggle" aria-label="Expandir ou colapsar aula" aria-expanded="false">
21+
<span class="toggle-icon">►</span>
22+
</button>
23+
<a href="{{ '/modules/' | append: module.slug | append: '/lessons/' | append: lesson.slug | relative_url }}">
24+
{{ lesson.title }}
25+
</a>
26+
</div>
27+
<ul class="exercises-list collapsed">
28+
<li class="lesson-link-item">
29+
<a href="{{ '/modules/' | append: module.slug | append: '/lessons/' | append: lesson.slug | relative_url }}">
30+
{{ lesson.title }}
31+
</a>
32+
</li>
33+
{% assign module_exercises = site.data.exercises.exercises | where: "lesson_id", lesson_id | sort: "order" %}
34+
{% for exercise in module_exercises %}
35+
<li>
36+
<a href="{{ exercise.url | relative_url }}">{{ exercise.title }}</a>
37+
</li>
38+
{% endfor %}
39+
</ul>
1740
</li>
1841
{% endif %}
1942
{% endfor %}

‎_layouts/default.html‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -36,15 +36,17 @@
3636
<body>
3737
{% include header.html %}
3838

39-
<div class="container">
39+
<div class="page-wrapper">
4040
<aside class="sidebar">
4141
{% include navigation.html %}
4242
</aside>
4343

44-
<main class="content">
45-
{% include breadcrumbs.html %}
46-
{{ content }}
47-
</main>
44+
<div class="main-container">
45+
<main class="content">
46+
{% include breadcrumbs.html %}
47+
{{ content }}
48+
</main>
49+
</div>
4850
</div>
4951

5052
{% include footer.html %}

‎_sass/_navigation.scss‎

Lines changed: 164 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,20 @@
22
@import 'theme';
33

44
.sidebar-navigation {
5-
width: $sidebar-width;
6-
padding: $spacing-lg;
5+
width: 100%;
6+
max-width: 100%;
7+
padding: 1.125rem;
78
background: var(--color-bg-secondary);
89
border-right: 1px solid var(--color-border);
9-
height: calc(100vh - 80px);
10+
height: 100%;
1011
overflow-y: auto;
11-
position: sticky;
12-
top: 80px;
12+
overflow-x: hidden;
13+
box-sizing: border-box;
1314
@include theme-transition-all;
1415

1516
h2 {
16-
font-size: $font-size-h3;
17-
margin-bottom: $spacing-md;
17+
font-size: 1.1rem;
18+
margin-bottom: $spacing-sm;
1819
color: var(--color-text-primary);
1920
@include theme-transition(color);
2021
}
@@ -25,41 +26,173 @@
2526
margin: 0;
2627

2728
> li {
28-
margin-bottom: $spacing-lg;
29+
margin-bottom: 0.875rem;
2930

30-
> a {
31-
font-weight: bold;
32-
color: var(--color-primary);
33-
text-decoration: none;
34-
display: block;
35-
padding: $spacing-sm;
36-
border-radius: 4px;
37-
@include theme-transition-all;
31+
.module-header {
32+
display: flex;
33+
align-items: center;
34+
gap: 0.375rem;
3835

39-
&:hover {
40-
background: var(--color-primary-light);
36+
.toggle-btn {
37+
background: none;
38+
border: none;
39+
cursor: pointer;
40+
padding: 0.125rem 0.25rem;
41+
color: var(--color-text-secondary);
42+
font-size: 0.7rem;
43+
line-height: 1;
44+
display: flex;
45+
align-items: center;
46+
justify-content: center;
47+
min-width: 1rem;
48+
@include theme-transition-all;
49+
50+
&:hover {
51+
color: var(--color-primary);
52+
}
53+
54+
.toggle-icon {
55+
display: inline-block;
56+
transition: transform 0.2s ease;
57+
}
58+
59+
&[aria-expanded="false"] .toggle-icon {
60+
transform: rotate(-90deg);
61+
}
62+
}
63+
64+
> a {
65+
font-weight: bold;
66+
color: var(--color-primary);
67+
text-decoration: none;
68+
flex: 1;
69+
padding: 0.375rem $spacing-sm;
70+
border-radius: 4px;
71+
font-size: 0.95rem;
72+
@include theme-transition-all;
73+
74+
&:hover {
75+
background: var(--color-primary-light);
76+
}
4177
}
4278
}
4379

4480
.lessons-list {
4581
list-style: none;
46-
padding-left: $spacing-md;
47-
margin-top: $spacing-sm;
82+
padding-left: 0.875rem;
83+
margin-top: $spacing-xs;
84+
transition: max-height 0.3s ease, opacity 0.2s ease;
85+
overflow: hidden;
86+
87+
&.collapsed {
88+
max-height: 0;
89+
opacity: 0;
90+
margin-top: 0;
91+
}
4892

4993
li {
50-
margin-bottom: $spacing-xs;
94+
margin-bottom: 0.125rem;
95+
96+
.lesson-header {
97+
display: flex;
98+
align-items: center;
99+
gap: 0.375rem;
100+
101+
.toggle-btn {
102+
background: none;
103+
border: none;
104+
cursor: pointer;
105+
padding: 0.125rem 0.25rem;
106+
color: var(--color-text-secondary);
107+
font-size: 0.65rem;
108+
line-height: 1;
109+
display: flex;
110+
align-items: center;
111+
justify-content: center;
112+
min-width: 0.875rem;
113+
@include theme-transition-all;
114+
115+
&:hover {
116+
color: var(--color-primary);
117+
}
118+
119+
.toggle-icon {
120+
display: inline-block;
121+
transition: transform 0.2s ease;
122+
}
123+
124+
&[aria-expanded="false"] .toggle-icon {
125+
transform: rotate(-90deg);
126+
}
127+
}
128+
129+
> a {
130+
color: var(--color-text-primary);
131+
text-decoration: none;
132+
flex: 1;
133+
padding: 0.375rem 0.5rem;
134+
border-radius: 4px;
135+
font-size: 0.875rem;
136+
@include theme-transition-all;
137+
138+
&:hover {
139+
background: var(--color-primary-light);
140+
}
141+
}
142+
}
51143

52-
a {
53-
color: var(--color-text-primary);
54-
text-decoration: none;
55-
display: block;
56-
padding: $spacing-xs $spacing-sm;
57-
border-radius: 4px;
58-
font-size: $font-size-small;
59-
@include theme-transition-all;
144+
.exercises-list {
145+
list-style: none;
146+
padding-left: 0.875rem;
147+
margin-top: 0.125rem;
148+
max-height: 1000px;
149+
transition: max-height 0.3s ease, opacity 0.2s ease;
150+
overflow: hidden;
151+
152+
&.collapsed {
153+
max-height: 0;
154+
opacity: 0;
155+
margin-top: 0;
156+
}
60157

61-
&:hover {
62-
background: var(--color-primary-light);
158+
li {
159+
margin-bottom: 0.125rem;
160+
161+
&.lesson-link-item {
162+
margin-bottom: 0.25rem;
163+
padding-bottom: 0.25rem;
164+
border-bottom: 1px solid var(--color-border);
165+
166+
a {
167+
color: var(--color-text-primary);
168+
font-size: 0.85rem;
169+
font-weight: 500;
170+
opacity: 1;
171+
}
172+
}
173+
174+
a {
175+
color: var(--color-text-secondary);
176+
text-decoration: none;
177+
display: block;
178+
padding: 0.3rem 0.5rem;
179+
border-radius: 4px;
180+
font-size: 0.8rem;
181+
opacity: 0.85;
182+
@include theme-transition-all;
183+
184+
&:hover {
185+
background: var(--color-primary-light);
186+
opacity: 1;
187+
}
188+
189+
&.active {
190+
background: var(--color-primary-light);
191+
color: var(--color-primary);
192+
opacity: 1;
193+
font-weight: 500;
194+
}
195+
}
63196
}
64197
}
65198
}

‎_sass/_variables.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,6 @@ $spacing-xl: 2rem;
1515
$breakpoint-mobile: 768px;
1616
$breakpoint-tablet: 1024px;
1717

18-
$sidebar-width: 280px;
18+
$sidebar-width: 330px;
1919
$container-max-width: 1200px;
2020

0 commit comments

Comments
 (0)