Navbar and carousel updates

Hebs-Web-Design · Sep 13, 2024 · e5a93aa · e5a93aa
1 parent 96b8214
commit e5a93aa
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 35 deletions.
diff --git a/alpinejs/carousel/carousel.ts b/alpinejs/carousel/carousel.ts
@@ -1,20 +1,23 @@
 export default (el: HTMLElement, interval: number = 5000) => ({
     init(): void {
+        console.log("Initialising carousel...")
         if (this.el.hasChildNodes()) {
-            let classes: string[] = [];
+            let classes: string[] = []
 
-            this.items = this.el.children.length;
+            this.items = this.el.children.length
+
+            console.log(`Found ${this.items} items in carousel`)
 
             for (let index = 0; index < this.items; index++) {
                 if (index === 0) {
-                    classes.push("translate-x-0");
+                    classes.push("translate-x-0")
                 } else {
-                    classes.push(`-translate-x-[${(index / this.items) * 100}%]`);
+                    classes.push(`-translate-x-[${(index / this.items) * 100}%]`)
                 }
             }
-            this.classes = classes;
+            this.classes = classes
 
-            this.cycle();
+            this.cycle()
         }
     },
     el: el,
@@ -27,63 +30,63 @@ export default (el: HTMLElement, interval: number = 5000) => ({
     next(): void {
         // get current element
         if (this.el === null || this.el === undefined) {
-            console.log(`Could not find element "${this.position}"`);
-            return;
+            console.log(`Could not find element "${this.position}"`)
+            return
         }
 
         // increment
         if (this.position == (this.items - 1)) {
             // at the end reverse the flow
-            this.pause();
-            this.forward = !this.forward;
-            this.cycle();
+            this.pause()
+            this.forward = !this.forward
+            this.cycle()
 
             return;
         } else {
-            this.position++;
+            this.position++
         }
 
         // change classes
-        console.log(`Changing "${this.classes[this.position - 1]}" to "${this.classes[this.position]}"`);
-        this.el.classList.replace(this.classes[this.position - 1], this.classes[this.position]);
+        console.log(`Changing "${this.classes[this.position - 1]}" to "${this.classes[this.position]}"`)
+        this.el.classList.replace(this.classes[this.position - 1], this.classes[this.position])
     },
     prev(): void {
         // get current element
         if (this.el === null || this.el === undefined) {
-            console.log(`Could not find element "${this.position}"`);
-            return;
+            console.log(`Could not find element "${this.position}"`)
+            return
         }
 
         // increment
         if (this.position == 0) {
             // at the end reverse the flow
-            this.pause();
-            this.forward = !this.forward;
-            this.cycle();
+            this.pause()
+            this.forward = !this.forward
+            this.cycle()
 
             return;
         } else {
-            this.position--;
+            this.position--
         }
 
         // change classes
-        console.log(`Changing "${this.classes[this.position + 1]}" to "${this.classes[this.position]}"`);
-        this.el.classList.replace(this.classes[this.position + 1], this.classes[this.position]);
+        console.log(`Changing "${this.classes[this.position + 1]}" to "${this.classes[this.position]}"`)
+        this.el.classList.replace(this.classes[this.position + 1], this.classes[this.position])
     },
     cycle(): void {
-        let self = this;
+        let self = this
 
         if (this.forward) {
             this.timer = setInterval(() => {
-                self.next();
-            }, self.interval);
+                self.next()
+            }, self.interval)
         } else {
             this.timer = setInterval(() => {
-                self.prev();
-            }, self.interval);
+                self.prev()
+            }, self.interval)
         }
     },
     pause(): void {
-        clearInterval(this.timer);
+        clearInterval(this.timer)
     },
 });
diff --git a/navbar/partial.html b/navbar/partial.html
@@ -5,8 +5,9 @@
 {{- $buttonclass := default "bg-blue-900 text-white font-semibold" .Site.Params.navbar.classes.button }}
 {{- $burgerclass := default "bg-blue-900" .Site.Params.navbar.classes.burger }}
 {{- $dividerclass := default "border-blue-900" .Site.Params.navbar.classes.divider }}
-{{- $dropdownclass := default "top-16 bg-white lg:bg-transparent" .Site.Params.navbar.classes.dropdown }}
+{{- $dropdownclass := default "w-64 top-16 right-0 bg-white lg:bg-transparent border-l-2 border-b-2 rounded-bl-lg absolute z-[999]" .Site.Params.navbar.classes.dropdown }}
 {{- $activeclass := default "font-bold" .Site.Params.navbar.classes.active }}
+{{- $mobileclass := default "w-full h-full fixed top-0 left-0 z-[998] bg-transparent" .Site.Params.navbar.classes.mobile }}
 {{- $collapseBreakpoint := default "lg" .Site.Params.navbar.collapse }}
 {{- $menu := index .Site.Menus (default "main" .Site.Params.navbar.menu) }}
 {{- $transitionEnter := default "transition ease-out duration-300" .Site.Params.navbar.transitions.enter }}
@@ -105,7 +106,7 @@
     <!-- start mobile menu -->
     {{- $transitionClasses := split (delimit (slice $transitionEnter $transitionEnterStart $transitionEnterEnd $transitionLeave $transitionLeaveStart $transitionLeaveEnd) " ") " " | uniq }}
     <div class="hidden {{ delimit $transitionClasses " " }}"><!-- extra classes --></div>
-    <div class="{{ $collapseBreakpoint }}:hidden w-full h-full overflow-y-auto fixed top-0 left-0 z-[998] bg-transparent"
+    <div class="{{ $collapseBreakpoint }}:hidden overflow-y-auto {{ $mobileclass }}"
       x-show="open"
       x-transition:enter="{{ $transitionEnter }}"
       x-transition:enter-start="{{ $transitionEnterStart }}"
@@ -114,19 +115,21 @@
       x-transition:leave-start="{{ $transitionLeaveStart }}"
       x-transition:leave-end="{{ $transitionLeaveEnd }}"
       x-cloak>
-    <ul class="flex flex-col w-64 self-center justify-evenly border-l-2 border-b-2 rounded-bl-lg absolute right-0 {{ $dropdownclass }} z-[999]" x-trap.noscroll="open" @click.outside="close">
+    <ul class="flex flex-col self-center justify-evenly {{ $dropdownclass }}" x-trap.noscroll="open" @click.outside="close">
       {{- range $menu }}
       <li class="px-4 py-2{{ if .Params.button }} pt-4 pb-6 place-self-center{{ end }}">
         {{- if .HasChildren }}
         <ul class="flex flex-col">
           <li class="{{ $textclass }}">
             {{- if .Page }}
             <a class="{{ $textclass }} focus:outline-none{{ if or ($currentPage.IsMenuCurrent .Menu .) ($currentPage.HasMenuCurrent .Menu .) }} {{ $activeclass }}{{ end }}" href="{{ .URL }}">
+              {{- with .Params.icon }}{{ partial "b-icon" (dict "icon" . "class" "inline mr-1" "width" "20" "height" "20") }}{{ end -}}
               {{- .Title -}}
             </a>
             {{- else }}
             <span{{ if $currentPage.HasMenuCurrent .Menu . }} class="{{ $activeclass }}"{{ end }}>
-              {{- .Title }}
+              {{- with .Params.icon }}{{ partial "b-icon" (dict "icon" . "class" "inline mr-1" "width" "20" "height" "20") }}{{ end -}}
+              {{- .Title -}}
             </span>
             {{- end }}
           </li>
@@ -135,7 +138,8 @@
               {{- range .Children }}
               <li class="py-2 text-sm">
                 <a class="{{ $textclass }} focus:outline-none transition{{ if $currentPage.IsMenuCurrent .Menu . }} {{ $activeclass }}{{ end }}" href="{{ .URL }}">
-                  {{ .Title }}
+                  {{- with .Params.icon }}{{ partial "b-icon" (dict "icon" . "class" "inline mr-1" "width" "20" "height" "20") }}{{ end -}}
+                  {{- .Title -}}
                 </a>
               </li>
               {{- end }}
@@ -144,11 +148,13 @@
         </ul>
         {{- else if .Params.button }}
         <a class="{{ $buttonclass }} min-w-max rounded-full px-2 py-4 transition hover:brightness-110 hover:drop-shadow-lg no-underline" href="{{ .URL }}">
-          {{ .Title }}
+          {{- with .Params.icon }}{{ partial "b-icon" (dict "icon" . "class" "inline mr-1" "width" "20" "height" "20") }}{{ end -}}
+          {{- .Title -}}
         </a>
         {{- else }}
         <a class="{{ $textclass }} focus:outline-none transition{{ if $currentPage.IsMenuCurrent .Menu . }} font-bold{{ end }}" href="{{ .URL }}">
-          {{ .Title }}
+          {{- with .Params.icon }}{{ partial "b-icon" (dict "icon" . "class" "inline mr-1" "width" "20" "height" "20") }}{{ end -}}
+          {{- .Title -}}
         </a>
         {{- end}}
       </li>