Skip to content

Commit f0293a5

Browse files
crikfilippocrikfilippo
committed
close #14 
1 parent 9160057 commit f0293a5

File tree

6 files changed

+290
-1
lines changed

6 files changed

+290
-1
lines changed

‎css/components/navbar.css‎

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
:root {
2+
--nav-size-base: calc(clamp(40px,4vw,60px) / 1.2) ;
3+
}
4+
5+
6+
.nav-logo img {
7+
width: auto;
8+
height: 100%;
9+
}
10+
11+
.nav-logo {
12+
height: calc(var(--nav-size-base) * 1.3 );
13+
max-width: calc(var(--nav-size-base) * 4 );
14+
}
15+
16+
17+
18+
nav.header-navbar {
19+
width: 100%;
20+
height: auto;
21+
position: sticky;
22+
top: 0;
23+
left: 0;
24+
z-index: 2;
25+
display: flex;
26+
flex-direction: row;
27+
align-content: center;
28+
align-items: center;
29+
flex-wrap: nowrap;
30+
backdrop-filter: blur(4px);
31+
-webkit-backdrop-filter: blur(4px);
32+
justify-content: space-between;
33+
}
34+
35+
nav.header-navbar:before {
36+
content: "";
37+
display: block;
38+
position: absolute;
39+
top: 0;
40+
left: 0;
41+
width: 100%;
42+
height: 100%;
43+
opacity: 0.9;
44+
z-index: -1;
45+
background: var(--neutral-50);
46+
box-shadow: var(--shadow-md);
47+
48+
}
49+
50+
.nav-toggle {
51+
width: var(--nav-size-base);
52+
height: var(--nav-size-base);
53+
gap: calc(var(--nav-size-base) / 12);
54+
display: flex;
55+
flex-direction: column;
56+
flex-wrap: nowrap;
57+
align-items: center;
58+
justify-content: center;
59+
cursor: pointer;
60+
}
61+
62+
span.nav-line {
63+
display: block;
64+
width: 90%;
65+
height: calc(var(--nav-size-base)/5);
66+
background: var(--neutral-600);
67+
border-radius: 5px;
68+
transition: 50ms;
69+
position: relative;
70+
top: 0;
71+
}
72+
73+
.nav-toggle.show {
74+
gap: 0;
75+
}
76+
77+
.nav-toggle.show #nav-line-3 {
78+
opacity: 0;
79+
top: 20px;
80+
height: 0;
81+
}
82+
83+
.nav-toggle.show #nav-line-1 {
84+
transform: translate(0px, 50%) rotate(45deg);
85+
transform-origin: center;
86+
}
87+
88+
.nav-toggle.show #nav-line-2 {
89+
/* background: var(--neutral-700); */
90+
transform: translate(0px, -50%) rotate(-45deg);
91+
transform-origin: center;
92+
}
93+
94+
.nav-menu {
95+
display: flex;
96+
position: absolute;
97+
top: 100%;
98+
right: 0;
99+
margin: calc(var(--nav-size-base) / 3);
100+
background: var(--neutral-50);
101+
border-radius: 10px;
102+
box-shadow: var(--shadow-md);
103+
align-items: center;
104+
justify-content: center;
105+
/* min-width: 170px; */
106+
max-height: 0;
107+
opacity: 0;
108+
overflow: hidden;
109+
transition: opacity 100ms, max-height 2s 0ms;
110+
}
111+
112+
.nav-menu ul li a {
113+
text-decoration: none;
114+
list-style: none;
115+
padding: calc(var(--nav-size-base) / 6) calc(var(--nav-size-base) / 1.5);
116+
display: block;
117+
}
118+
119+
120+
.nav-menu ul {
121+
width: 100%;
122+
height: 100%;
123+
display: flex;
124+
flex-direction: column;
125+
}
126+
127+
.nav-toggle.show ~ .nav-menu {
128+
max-height: 1000px;
129+
opacity: 1;
130+
transition: max-height 0s 0ms, opacity 100ms;
131+
}
132+
133+
.nav-menu ul li:first-child a {
134+
padding-top: calc(var(--nav-size-base) / 3);
135+
}
136+
137+
.nav-menu ul li:last-child a {
138+
padding-bottom: calc(var(--nav-size-base) / 3);
139+
}
140+
141+
.nav-menu ul li a.nav-current,.nav-menu ul li:hover a {
142+
background: var(--neutral-100);
143+
}
144+

‎css/main.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,5 +42,6 @@
4242
@import './components/fab.css';
4343
@import './components/stepper.css';
4444
@import './components/calendar.css';
45+
@import './components/navbar.css';
4546

4647

‎demo.html‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,22 @@
99
<style>
1010
</style>
1111
</head>
12-
<body class="dark-mode">
12+
<body class="">
1313

14+
<!--main header nav menu-->
15+
<nav id="nav-main" class="p-3">
16+
17+
<!--logo-->
18+
<img src="./images/dummy-logo.png">
19+
20+
<!--menu links-->
21+
<a href="#">Home</a>
22+
<a href="#">About</a>
23+
<a href="#">Contacts</a>
24+
25+
</nav>
26+
27+
1428
<section class="p-4 bg-neutral-50 shadow-md rounded my-6">
1529
<h2 class="font-lg text-primary my-4">Alert Component Showcase</h2>
1630

‎images/dummy-logo.png‎

160 KB
Loading

‎js/components/navbar.js‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
export class Navbar {
2+
3+
constructor(id = 'nav-main', siteTitle = ('x' == 'x' ? undefined : 'x')){
4+
5+
//get navbar container
6+
this.id = id;
7+
this.nav = document.getElementById(id);
8+
if(!this.nav){ throw new Error(`element "${id}" not found`); }
9+
this.nav.classList.add('header-navbar');
10+
11+
//get logo path/text and remove previous element
12+
this.hasLogo = (this.nav.querySelector('img') && this.nav.querySelector('img').src) ? true : false;
13+
this.logoPath = this.hasLogo ? this.nav.querySelector('img').src : undefined;
14+
this.siteTitle = document.querySelector('head title');
15+
this.siteTitle = siteTitle ?? (this.siteTitle ?? 'Lorem Ipsum');
16+
if(this.nav.querySelector('img')){this.nav.querySelector('img').remove();}
17+
18+
//get menu items
19+
this.hasMenu = this.nav.querySelector('a') ? true : false;
20+
this.pages = [];
21+
this.nav.querySelectorAll('a').forEach((a)=>{
22+
23+
var page = {};
24+
page.href = a.href ?? '#';
25+
page.text = a.innerText ?? 'Page';
26+
this.pages.push(page);
27+
28+
29+
});
30+
31+
//remove anything else in navbar container
32+
this.nav.innerHTML = "";
33+
34+
//add logo or simple text with site title
35+
this.addLogo();
36+
37+
//add menu toggle and list
38+
if(this.hasMenu){
39+
40+
this.addToggle();
41+
this.addMenu();
42+
43+
44+
}
45+
46+
47+
48+
}
49+
50+
addLogo(){
51+
52+
var logo_cnt = document.createElement('div');
53+
logo_cnt.classList.add('nav-logo');
54+
55+
if(this.hasLogo){
56+
57+
var logo_img = document.createElement('img');
58+
logo_img.src = this.logoPath;
59+
logo_img.alt = this.siteTitle;
60+
logo_cnt.appendChild(logo_img);
61+
62+
63+
}else{
64+
65+
logo_cnt.innerText = this.siteTitle;
66+
67+
}
68+
69+
this.nav.appendChild(logo_cnt);
70+
71+
}
72+
73+
74+
addToggle(){
75+
76+
77+
var toggle = document.createElement('div');
78+
79+
80+
toggle.classList.add('nav-toggle');
81+
toggle.addEventListener('click',function(){if(this.classList.contains('show')){this.classList.remove('show');}else{this.classList.add('show');}});
82+
83+
for(var i = 1; i <= 3; i++){
84+
85+
var line = document.createElement('span');
86+
line.id = ('nav-line-'+i);
87+
line.classList.add('nav-line');
88+
toggle.appendChild(line);
89+
90+
}
91+
92+
this.nav.appendChild(toggle);
93+
94+
95+
}
96+
97+
addMenu(){
98+
99+
var menu = document.createElement('div');
100+
menu.classList.add('nav-menu');
101+
var ul = document.createElement('ul');
102+
103+
for(var i = 0; i < this.pages.length; i++){
104+
105+
var li = document.createElement('li')
106+
var a = document.createElement('a');
107+
a.href = this.pages[i].href;
108+
a.innerText = this.pages[i].text;
109+
li.appendChild(a);
110+
ul.appendChild(li);
111+
112+
}
113+
114+
menu.appendChild(ul);
115+
this.nav.appendChild(menu);
116+
117+
118+
}
119+
120+
121+
}
122+
123+

‎js/main.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { DateTimePicker } from './components/datetime-picker.js';
99
import { Slideshow } from './components/slideshow.js';
1010
import { initializeRatingComponents } from './components/rating.js';
1111
import { initializeCalendarComponents } from './components/calendar.js';
12+
import { Navbar } from './components/navbar.js';
1213

1314
document.addEventListener("DOMContentLoaded", () => {
1415
// Initialize rating components
@@ -28,6 +29,10 @@ document.addEventListener("DOMContentLoaded", () => {
2829
});
2930
});
3031
});
32+
33+
//initialize navbar
34+
let navMain = new Navbar('nav-main');
35+
3136
});
3237

3338
// Export functions globally if needed
@@ -43,5 +48,7 @@ window.closeToastHistory = closeToastHistory;
4348
window.Modal = Modal;
4449
window.MultiSelect = MultiSelect;
4550
window.DateTimePicker = DateTimePicker;
51+
window.Slideshow = Slideshow;
4652
window.initializeRatingComponents = initializeRatingComponents;
4753
window.initializeCalendarComponents = initializeCalendarComponents;
54+
window.Navbar = Navbar;

0 commit comments

Comments
 (0)