...

poc_threefold/components/nav.html

@@ -0,0 +1,25 @@
+<div x-data="{ mobileMenuOpen: false }">
+    <nav class="tf_nav">
+        <div class="tf_nav_container">
+            <button class="hamburger-menu" @click="mobileMenuOpen = !mobileMenuOpen">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <line x1="3" y1="12" x2="21" y2="12"></line>
+                    <line x1="3" y1="6" x2="21" y2="6"></line>
+                    <line x1="3" y1="18" x2="21" y2="18"></line>
+                </svg>
+            </button>
+            <a href="#" class="tf_logo">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
+                </svg>
+                <span>ThreeFold</span>
+            </a>
+            <ul class="tf_menu" :class="{ 'active': mobileMenuOpen }">
+                [[navcontent]]
+            </ul>    
+            {% include 'components/login_lightswitch.html' %}
+        </div>
+    </nav>
+
+    <div class="mobile-overlay" :class="{ 'active': mobileMenuOpen }" @click="mobileMenuOpen = false"></div>
+</div>