Skip to content

Commit b44a604

Browse files
berezinantberezinant
committed
feat: reworked navbar component
1 parent c58c76d commit b44a604

File tree

7 files changed

+767
-170
lines changed

7 files changed

+767
-170
lines changed

‎dokka-subprojects/plugin-base-frontend/src/main/ui-kit/index.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,4 @@
33
*/
44

55
@import 'tabs/styles';
6+
@import 'navbar/styles';

‎dokka-subprojects/plugin-base-frontend/src/main/ui-kit/index.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
/*
22
* Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license.
33
*/
4+
import * as navbar from './navbar/index';
45
import * as tabs from './tabs/index';
56

6-
export { tabs };
7+
export { navbar, tabs };

‎dokka-subprojects/plugin-base-frontend/src/main/ui-kit/navbar/index.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/*
2+
* Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license.
3+
*/
4+
5+
import './styles.scss';

‎dokka-subprojects/plugin-base-frontend/src/main/ui-kit/navbar/styles.scss

Lines changed: 182 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,182 @@
1+
/*!
2+
* Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license.
3+
*/
4+
@import '../tokens/index';
5+
6+
.navigation {
7+
z-index: 4;
8+
9+
display: flex;
10+
justify-content: space-between;
11+
12+
height: var(--size-l1);
13+
margin-right: 0;
14+
15+
/* Reset margin and use padding for border */
16+
17+
margin-left: 0;
18+
padding: 10px var(--horizontal-spacing-for-content);
19+
20+
color: var(--color-text-white);
21+
background-color: var(--color-nav-bar);
22+
}
23+
24+
.navigation--inner {
25+
display: flex;
26+
flex: 1 1 auto;
27+
flex-wrap: wrap;
28+
justify-content: space-between;
29+
}
30+
31+
.navigation--inner,
32+
.navigation-title {
33+
min-height: 40px;
34+
}
35+
36+
.navigation-title,
37+
.filter-section {
38+
align-items: center;
39+
}
40+
41+
.navigation-title {
42+
display: flex;
43+
align-items: center;
44+
}
45+
46+
/* --- Navigation MENU --- */
47+
.menu-toggle {
48+
z-index: 5;
49+
50+
margin-right: 16px;
51+
padding: 0;
52+
53+
transition: margin 0.2s ease-out;
54+
text-indent: -9999px;
55+
56+
color: var(--background-color);
57+
border: none;
58+
outline: none;
59+
60+
background: transparent;
61+
62+
font-size: 0;
63+
line-height: 0;
64+
}
65+
66+
@media (width >= 760px) {
67+
.menu-toggle {
68+
display: none;
69+
}
70+
}
71+
72+
.menu-toggle::before {
73+
display: block;
74+
75+
width: 28px;
76+
height: 28px;
77+
78+
content: '';
79+
80+
background: url('../images/burger.svg') no-repeat center;
81+
}
82+
83+
/* /--- Navigation MENU --- */
84+
85+
.library-version {
86+
position: relative;
87+
top: -4px;
88+
89+
margin-left: 3px;
90+
91+
color: rgba(255, 255, 255, 0.7);
92+
93+
font-size: 13px;
94+
font-weight: normal;
95+
line-height: 16px;
96+
}
97+
98+
.filter-section {
99+
z-index: 0;
100+
}
101+
102+
.no-js .filter-section {
103+
display: none;
104+
}
105+
106+
@media (width >= 760px) {
107+
.filter-section {
108+
padding: 5px 0;
109+
}
110+
}
111+
112+
/* --- Navigation controls --- */
113+
.navigation-controls {
114+
display: flex;
115+
116+
margin-left: 4px;
117+
}
118+
119+
@media (width >= 760px) {
120+
.navigation-controls {
121+
align-items: center;
122+
}
123+
}
124+
125+
.no-js .navigation-controls {
126+
display: none;
127+
}
128+
129+
.navigation-controls--btn {
130+
display: inline-flex;
131+
align-items: center;
132+
justify-content: center;
133+
134+
width: 40px;
135+
height: 40px;
136+
padding: 0;
137+
138+
cursor: pointer;
139+
transition: background-color 200ms ease-in-out;
140+
141+
border: none;
142+
border-radius: 50%;
143+
background-color: inherit;
144+
background-position: 50% 50%;
145+
146+
font-size: 0;
147+
line-height: 0;
148+
will-change: background-color;
149+
}
150+
151+
.navigation-controls--btn:hover {
152+
background-color: var(--white-10);
153+
}
154+
155+
.navigation-controls--theme {
156+
background-image: url('../images/theme-toggle.svg');
157+
background-repeat: no-repeat;
158+
}
159+
160+
@media (width <= 759px) {
161+
.navigation-controls--theme {
162+
display: none;
163+
}
164+
}
165+
166+
.navigation-controls--homepage {
167+
background-image: url('../images/homepage.svg');
168+
background-repeat: no-repeat;
169+
background-size: 24px 24px;
170+
}
171+
172+
@media (width <= 759px) {
173+
.navigation-controls--homepage {
174+
display: none;
175+
}
176+
}
177+
178+
.navigation .platform-selector:not([data-active]) {
179+
color: #fff;
180+
}
181+
182+
/* /--- Navigation controls --- */

‎dokka-subprojects/plugin-base/src/main/resources/dokka/styles/style.css

Lines changed: 0 additions & 164 deletions
Original file line numberDiff line numberDiff line change
@@ -249,170 +249,6 @@ td:first-child {
249249
height: 100%;
250250
}
251251

252-
/* --- Navigation styles --- */
253-
.navigation {
254-
display: flex;
255-
justify-content: space-between;
256-
257-
color: #fff;
258-
background-color: var(--color-dark);
259-
font-family: var(--default-font-family);
260-
letter-spacing: -0.1px;
261-
262-
/* Reset margin and use padding for border */
263-
margin-left: 0;
264-
margin-right: 0;
265-
padding: 10px var(--horizontal-spacing-for-content);
266-
267-
z-index: 4;
268-
}
269-
270-
.navigation--inner {
271-
display: flex;
272-
flex-wrap: wrap;
273-
justify-content: space-between;
274-
flex: 1 1 auto;
275-
}
276-
277-
.navigation--inner, .navigation-title {
278-
min-height: 40px;
279-
}
280-
281-
.navigation-title, .filter-section {
282-
align-items: center;
283-
}
284-
285-
.navigation-title {
286-
display: flex;
287-
align-items: center;
288-
}
289-
290-
/* --- Navigation MENU --- */
291-
.menu-toggle {
292-
color: var(--background-color);
293-
line-height: 0;
294-
font-size: 0;
295-
text-indent: -9999px;
296-
297-
background: transparent;
298-
border: none;
299-
padding: 0;
300-
margin-right: 16px;
301-
outline: none;
302-
303-
transition: margin .2s ease-out;
304-
z-index: 5;
305-
}
306-
307-
@media (min-width: 760px) {
308-
.menu-toggle {
309-
display: none;
310-
}
311-
}
312-
313-
.menu-toggle::before {
314-
display: block;
315-
content: '';
316-
background: url('../images/burger.svg') no-repeat center;
317-
height: 28px;
318-
width: 28px;
319-
}
320-
321-
/* /--- Navigation MENU --- */
322-
323-
.library-version {
324-
position: relative;
325-
top: -4px;
326-
margin-left: 3px;
327-
328-
color: rgba(255, 255, 255, .7);
329-
font-size: 13px;
330-
font-weight: normal;
331-
line-height: 16px;
332-
}
333-
334-
.filter-section {
335-
z-index: 0;
336-
}
337-
338-
.no-js .filter-section {
339-
display: none;
340-
}
341-
342-
@media (min-width: 760px) {
343-
.filter-section {
344-
padding: 5px 0 5px;
345-
}
346-
}
347-
348-
/* --- Navigation controls --- */
349-
.navigation-controls {
350-
display: flex;
351-
margin-left: 4px;
352-
}
353-
354-
@media (min-width: 760px) {
355-
.navigation-controls {
356-
align-items: center;
357-
}
358-
}
359-
360-
.no-js .navigation-controls {
361-
display: none;
362-
}
363-
364-
.navigation-controls--btn {
365-
display: inline-flex;
366-
align-items: center;
367-
justify-content: center;
368-
width: 40px;
369-
height: 40px;
370-
border-radius: 50%;
371-
background-color: inherit;
372-
background-position: 50% 50%;
373-
padding: 0;
374-
border: none;
375-
cursor: pointer;
376-
font-size: 0;
377-
line-height: 0;
378-
transition: background-color 200ms ease-in-out;
379-
will-change: background-color;
380-
}
381-
382-
.navigation-controls--btn:hover {
383-
background-color: var(--white-10);
384-
}
385-
386-
.navigation-controls--theme {
387-
background-image: url("../images/theme-toggle.svg");
388-
background-repeat: no-repeat;
389-
}
390-
391-
@media (max-width: 759px) {
392-
.navigation-controls--theme {
393-
display: none;
394-
}
395-
}
396-
397-
.navigation-controls--homepage {
398-
background-image: url("../images/homepage.svg");
399-
background-repeat: no-repeat;
400-
background-size: 24px 24px;
401-
}
402-
403-
@media (max-width: 759px) {
404-
.navigation-controls--homepage {
405-
display: none;
406-
}
407-
}
408-
409-
.navigation .platform-selector:not([data-active]) {
410-
color: #fff;
411-
}
412-
413-
/* /--- Navigation controls --- */
414-
/* /--- Navigation styles --- */
415-
416252
/* --- Layout styles --- */
417253

418254
#container {

0 commit comments

Comments
 (0)