Skip to content

Commit e1113f2

Browse files
crikfilippocrikfilippo
committed
navbar fixes
remove first inavbar nizialization from main and added to own js
1 parent 13abf71 commit e1113f2

File tree

5 files changed

+47
-32
lines changed

5 files changed

+47
-32
lines changed

‎demo.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
<body class="dark-mode">
1313

1414
<!--main header nav menu-->
15-
<nav class="navbar" id="nav-main" class="p-3">
15+
<nav class="navbar" id="nav-main">
1616

1717
<!--logo-->
1818
<img src="./images/dummy-logo.png">

‎src/css/components/navbar.css‎

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
:root {
2-
--nav-size-base: calc(clamp(40px,4vw,60px) / 1.2) ;
2+
--nav-size-base: calc(clamp(50px,5vw,70px));
33
}
44

55
.nav-logo img {
@@ -8,22 +8,22 @@
88
}
99

1010
.nav-logo {
11-
height: calc(var(--nav-size-base) * 1.3 );
12-
max-width: calc(var(--nav-size-base) * 4 );
11+
height: calc(var(--nav-size-base) / 1.5 );
12+
width: min-content;
1313
display: flex;
1414
flex-direction: row;
1515
flex-wrap: nowrap;
1616
align-items: center;
17-
gap: calc(var(--nav-size-base) / 4);
17+
gap: calc(var(--nav-size-base) / 6);
1818
}
1919

20-
nav.header-navbar {
20+
nav.navbar {
2121
width: 100%;
22-
height: auto;
22+
height: var(--nav-size-base);
2323
position: sticky;
2424
top: 0;
2525
left: 0;
26-
z-index: 2;
26+
z-index: 3;
2727
display: flex;
2828
flex-direction: row;
2929
align-content: center;
@@ -32,9 +32,11 @@ nav.header-navbar {
3232
backdrop-filter: blur(4px);
3333
-webkit-backdrop-filter: blur(4px);
3434
justify-content: space-between;
35+
box-sizing: border-box;
36+
padding: calc(var(--nav-size-base) / 6);
3537
}
3638

37-
nav.header-navbar:before {
39+
nav.navbar:before {
3840
content: "";
3941
display: block;
4042
position: absolute;
@@ -50,9 +52,9 @@ nav.header-navbar:before {
5052
}
5153

5254
.nav-toggle {
53-
width: var(--nav-size-base);
54-
height: var(--nav-size-base);
55-
gap: calc(var(--nav-size-base) / 12);
55+
width: calc(var(--nav-size-base) / 1.4);
56+
height: calc(var(--nav-size-base) / 1.5);
57+
gap: 10%;
5658
display: flex;
5759
flex-direction: column;
5860
flex-wrap: nowrap;
@@ -63,10 +65,10 @@ nav.header-navbar:before {
6365

6466
span.nav-line {
6567
display: block;
66-
width: 90%;
67-
height: calc(var(--nav-size-base)/5);
68-
background: var(--neutral-600);
69-
border-radius: 5px;
68+
width: 100%;
69+
height: 25%;
70+
background: var(--neutral-700);
71+
border-radius: 2px;
7072
transition: 50ms;
7173
position: relative;
7274
top: 0;
@@ -78,7 +80,7 @@ span.nav-line {
7880

7981
.nav-toggle.show #nav-line-3 {
8082
opacity: 0;
81-
top: 20px;
83+
/* top: 20px; */
8284
height: 0;
8385
}
8486

@@ -142,5 +144,4 @@ span.nav-line {
142144

143145
.nav-menu ul li a.nav-current,.nav-menu ul li:hover a {
144146
background: var(--neutral-100);
145-
}
146-
147+
}

‎src/css/utils/typography.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
*{
2-
font-size: clamp(0.875rem, 1vw + 0.5rem, 1.125rem);
3-
line-height: calc(clamp(0.875rem, 1vw + 0.5rem, 1.125rem) + 5px);
2+
font-size: clamp(0.875rem, 1.4vw, 1.125rem);
3+
line-height: calc(clamp(0.875rem, 1.4vw, 1.125rem) + 3px);
44
-webkit-text-size-adjust: 100%;
55
font-family: var(--font-sans);
66
color: var(--neutral-800);

‎src/js/components/navbar.js‎

Lines changed: 24 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export class Navbar {
77
requires basic preexisting html structure with desired data, such as:
88
99
<!--main header nav menu-->
10-
<nav id="nav-main" class="p-3">
10+
<nav id="nav-main">
1111
1212
<!--logo img-->
1313
<img src="./images/dummy-logo.png">
@@ -27,13 +27,15 @@ export class Navbar {
2727
this.id = id;
2828
this.nav = document.getElementById(id);
2929
if(!this.nav){ throw new Error(`element "${id}" not found`); }
30-
this.nav.classList.add('header-navbar');
30+
if(this.nav.classList.contains('kromaNav')){ throw new Error(`navbar already set.`); }
31+
this.nav.classList.add('navbar');
32+
this.nav.classList.add('kromaNav');
3133

3234
//get logo path/text
3335
this.hasLogo = (this.nav.querySelector('img') && this.nav.querySelector('img').src) ? true : false;
3436
this.logoPath = this.hasLogo ? this.nav.querySelector('img').src : undefined;
3537
this.siteTitle = document.querySelector('head title');
36-
this.siteTitle = siteTitle ?? (this.siteTitle.innerText ?? 'Lorem Ipsum');
38+
this.siteTitle = siteTitle ?? (this.siteTitle.innerText ?? '');
3739

3840

3941
//get menu items
@@ -42,7 +44,7 @@ export class Navbar {
4244
this.nav.querySelectorAll('a').forEach((a)=>{
4345

4446
var page = {};
45-
page.href = a.href ?? '#';
47+
page.href = a.href ?? '';
4648
page.text = a.innerText ?? 'Page';
4749
this.pages.push(page);
4850

@@ -124,9 +126,9 @@ export class Navbar {
124126

125127
for(var i = 0; i < this.pages.length; i++){
126128

127-
var li = document.createElement('li')
129+
var li = document.createElement('li');
128130
var a = document.createElement('a');
129-
a.href = this.pages[i].href;
131+
if(this.pages[i].href.length > 0){ a.href = this.pages[i].href; }
130132
a.innerText = this.pages[i].text;
131133
li.appendChild(a);
132134
ul.appendChild(li);
@@ -143,3 +145,19 @@ export class Navbar {
143145
}
144146

145147

148+
149+
150+
//initialize first available
151+
document.addEventListener("DOMContentLoaded", () => {
152+
153+
window.Navbar = Navbar;
154+
if(!window.kromaNavs){ window.kromaNavs = []; }
155+
var domNavs = document.querySelectorAll('.navbar:not(.kromaNav)');
156+
if(domNavs && domNavs[0]){
157+
158+
domNavs[0].id = domNavs[0].id ?? ( 'nav_' + window.kromaNavs.length );
159+
window.kromaNavs[window.kromaNavs.length] = new Navbar( domNavs[0].id );
160+
161+
}
162+
163+
});

‎src/js/main.js‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,6 @@ document.addEventListener("DOMContentLoaded", () => {
2828

2929
initializeCodeblock();
3030

31-
//inizializeNavbar();
32-
3331
// Initialize other components, if applicable
3432
document.querySelectorAll('.alert .alert-close').forEach(button => {
3533
button.addEventListener('click', event => {
@@ -42,8 +40,6 @@ document.addEventListener("DOMContentLoaded", () => {
4240
});
4341
});
4442

45-
//initialize navbar
46-
let navMain = new Navbar('nav-main');
4743

4844
});
4945

@@ -61,4 +57,4 @@ window.DateTimePicker = DateTimePicker;
6157
window.Slideshow = Slideshow;
6258
window.initializeRatingComponents = initializeRatingComponents;
6359
window.initializeCalendarComponents = initializeCalendarComponents;
64-
window.Navbar = Navbar;
60+

0 commit comments

Comments
 (0)