Skip to content

Commit 50f524c

Browse files
committed
sidebar highlight
1 parent 0f67254 commit 50f524c

2 files changed

Lines changed: 87 additions & 11 deletions

File tree

modules/client/head/sidebar.js

Lines changed: 50 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ document.addEventListener('click', onClick);
33

44
document.addEventListener('keydown', onKeyDown);
55

6+
initSidebarHighlight();
7+
68
function toggle() {
79

810
let pageWrapper = document.querySelector('.page-wrapper');
@@ -11,11 +13,15 @@ function toggle() {
1113

1214
pageWrapper && pageWrapper.classList.toggle('page-wrapper_sidebar_on');
1315

14-
if (document.querySelector('.page').classList.contains('page_sidebar_on')) {
15-
delete localStorage.noSidebar;
16-
} else {
17-
localStorage.noSidebar = 1;
18-
}
16+
window.acceptGdpr(accepted => {
17+
if (document.querySelector('.page').classList.contains('page_sidebar_on')) {
18+
delete localStorage.noSidebar;
19+
} else {
20+
if (accepted) {
21+
localStorage.noSidebar = 1;
22+
}
23+
}
24+
});
1925

2026
}
2127

@@ -45,3 +51,42 @@ function onKeyDown(event) {
4551
event.preventDefault();
4652

4753
}
54+
55+
function initSidebarHighlight() {
56+
57+
function highlight() {
58+
59+
let current = document.getElementsByClassName('sidebar__navigation-link_active');
60+
if (current[0]) current[0].classList.remove('sidebar__navigation-link_active');
61+
62+
//debugger;
63+
let h2s = document.getElementsByTagName('h2');
64+
let i;
65+
for (i = 0; i < h2s.length; i++) {
66+
let h2 = h2s[i];
67+
// first in-page header
68+
// >1, because when visiting http://javascript.local/native-prototypes#native-prototype-change,
69+
// top may be 0.375 or kind of...
70+
if (h2.getBoundingClientRect().top > 1) break;
71+
}
72+
i--; // we need the one before it (currently reading)
73+
74+
if (i >= 0) {
75+
let href = h2s[i].firstElementChild && h2s[i].firstElementChild.getAttribute('href');
76+
let li = document.querySelector('.sidebar__navigation-link a[href="' + href + '"]');
77+
if (href && li) {
78+
li.classList.add('sidebar__navigation-link_active');
79+
}
80+
}
81+
82+
}
83+
84+
document.addEventListener('DOMContentLoaded', function() {
85+
highlight();
86+
87+
window.addEventListener('scroll', highlight);
88+
});
89+
90+
91+
}
92+

modules/styles/blocks/sidebar/sidebar.styl

Lines changed: 37 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,9 @@
1111
margin 23px 30px 0
1212
position relative
1313

14+
&_profile &__content
15+
margin-top 30px
16+
1417
//- модификатор _sticky-footer делает последнюю секцию всегда прижатой к низу сайдбара
1518
&_sticky-footer &__content
1619
min-height calc(100% - 85px)
@@ -20,6 +23,10 @@
2023
position absolute
2124
bottom 0
2225

26+
&_profile
27+
background #f7f7f7
28+
border-right 0
29+
2330
& &__toggle
2431
@extend $button-reset
2532

@@ -59,7 +66,6 @@
5966
&__toggle::before
6067
@extend $font-menu
6168

62-
6369
&__section
6470
margin 22px 0
6571
padding 0 2px
@@ -86,6 +92,9 @@
8692
&__link
8793
color navigation_link_color
8894

95+
&_profile &__link
96+
color #000
97+
8998
&__link:hover
9099
text-decoration none
91100

@@ -96,14 +105,13 @@
96105
&_active
97106
color link_hover_color
98107

108+
&_profile &__navigation-link
109+
&_active
110+
color link_hover_color
111+
99112
&__share
100113
margin 8px 20px 0 0
101114

102-
103-
@media tablet
104-
&__toggle
105-
display none
106-
107115
&_compact &__section
108116
margin 15px 0
109117

@@ -122,6 +130,29 @@
122130
line-height 1.1
123131
margin 8px 0
124132

133+
@media tablet
134+
&__toggle
135+
display none
136+
137+
&_profile &__content
138+
margin 24px 16px 0
139+
140+
&_profile &__navigation-links
141+
display flex
142+
flex-wrap wrap
143+
justify-content center
144+
margin 0 -10px
145+
146+
&_profile &__navigation-link
147+
padding 0 10px
148+
margin 5px 0
149+
150+
&_profile &__navigation-link:last-child
151+
margin-right 0
152+
153+
&_profile &__navigation
154+
display none
155+
125156
@media short_window
126157
&_sticky-footer &__content
127158
padding-bottom 38px

0 commit comments

Comments
 (0)