From c160f9d2145c22e668b9560fb5345adbdccbebb2 Mon Sep 17 00:00:00 2001
From: Peter Stockings <pstockings@jadeworld.com>
Date: Tue, 24 Dec 2024 23:04:31 +1100
Subject: [PATCH] Update navbar style

---
 app/templates/_layout.html | 134 ++++++++++++++++++++++++++-----------
 1 file changed, 96 insertions(+), 38 deletions(-)
diff --git a/app/templates/_layout.html b/app/templates/_layout.html
index adbca6c..8c9be3d 100644
--- a/app/templates/_layout.html
+++ b/app/templates/_layout.html
@@ -10,48 +10,106 @@
 </head>
 
 <body class="bg-gray-100 text-gray-800">
-    <!-- Navbar -->
-    <nav class="bg-blue-600 text-white p-4">
-        <div class="container mx-auto flex justify-between items-center">
-            <!-- Logo -->
-            <a href="/" class="text-2xl font-bold">BP Tracker</a>
+    <nav class="flex items-center justify-between flex-wrap p-6 fixed w-full z-10 top-0" x-data="{ isOpen: false }"
+        @keydown.escape="isOpen = false" :class="{ 'shadow-lg bg-indigo-900' : isOpen , 'bg-gray-800' : !isOpen}">
+        <!--Logo etc-->
+        <div class="flex items-center flex-shrink-0 text-white mr-6">
+            <a class="text-white no-underline hover:text-white hover:no-underline" href="#">
+                <span class="text-2xl pl-2"><i class="em em-grinning"></i> Blood Pressure</span>
+            </a>
+        </div>
 
-            <!-- Navigation Links -->
-            <div class="flex items-center space-x-4">
+        <!--Toggle button (hidden on large screens)-->
+        <button @click="isOpen = !isOpen" type="button"
+            class="block lg:hidden px-2 text-gray-500 hover:text-white focus:outline-none focus:text-white"
+            :class="{ 'transition transform-180': isOpen }">
+            <svg class="h-6 w-6 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                <path x-show="isOpen" fill-rule="evenodd" clip-rule="evenodd"
+                    d="M18.278 16.864a1 1 0 0 1-1.414 1.414l-4.829-4.828-4.828 4.828a1 1 0 0 1-1.414-1.414l4.828-4.829-4.828-4.828a1 1 0 0 1 1.414-1.414l4.829 4.828 4.828-4.828a1 1 0 1 1 1.414 1.414l-4.828 4.829 4.828 4.828z" />
+                <path x-show="!isOpen" fill-rule="evenodd"
+                    d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z" />
+            </svg>
+        </button>
+
+        <!--Menu-->
+        <div class="w-full flex-grow lg:flex lg:items-center lg:w-auto"
+            :class="{ 'block shadow-3xl': isOpen, 'hidden': !isOpen }" @click.away="isOpen = false"
+            x-show.transition="true">
+            <ul class="pt-6 lg:pt-0 list-reset lg:flex justify-end flex-1 items-center">
                 {% if current_user.is_authenticated %}
-                <a rel="prefetch" href="{{ url_for('main.dashboard') }}" class="px-4 py-2 hover:underline">Dashboard</a>
-                <a href="{{ url_for('main.manage_data') }}" class="px-4 py-2 hover:underline">Data</a>
-                <!-- Profile with Photo or Default Icon -->
-                <a rel="prefetch" href="{{ url_for('user.profile') }}"
-                    class="relative flex items-center space-x-2 group">
-                    {% if current_user.profile and current_user.profile.profile_pic %}
-                    <img src="data:image/png;base64,{{ current_user.profile.profile_pic }}" alt="Profile Picture"
-                        class="w-8 h-8 rounded-full border-2 border-white object-cover group-hover:scale-105 transition">
+                <li class="mr-3">
+                    <a class="inline-block py-2 px-4 no-underline 
+                    {% if request.path == url_for('main.dashboard') %}
+                        text-white
                     {% else %}
-                    <!-- Default SVG Icon -->
-                    <div
-                        class="w-8 h-8 bg-gray-300 rounded-full flex items-center justify-center border-2 border-white">
-                        <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="w-5 h-5 text-gray-600"
-                            viewBox="0 0 24 24">
-                            <path
-                                d="M12 12c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
-                        </svg>
-                    </div>
-                    {% endif %}
-                    <span class="hidden sm:inline text-sm font-medium group-hover:underline">Profile</span>
-                </a>
-
-                <a href="{{ url_for('auth.logout') }}" class="px-4 py-2 bg-red-500 rounded hover:bg-red-600">
-                    Logout
-                </a>
+                        text-gray-600 hover:text-gray-200 hover:text-underline
+                    {% endif %}" href="{{ url_for('main.dashboard') }}" @click="isOpen = false">Dashboard
+                    </a>
+                </li>
+                <li class="mr-3">
+                    <a class="inline-block py-2 px-4 no-underline 
+                    {% if request.path == url_for('main.manage_data') %}
+                        text-white
+                    {% else %}
+                        text-gray-600 hover:text-gray-200 hover:text-underline
+                    {% endif %}" href="{{ url_for('main.manage_data') }}" @click="isOpen = false">Data
+                    </a>
+                </li>
+                <li class="mr-3">
+                    <a class="flex items-center gap-2 text-gray-600 no-underline hover:text-gray-200 hover:text-underline py-2 px-4"
+                        href="{{ url_for('user.profile') }}" @click="isOpen = false">
+                        {% if current_user.profile and current_user.profile.profile_pic %}
+                        <img src="data:image/png;base64,{{ current_user.profile.profile_pic }}" alt="Profile Picture"
+                            class="w-8 h-8 rounded-full border-2 border-white object-cover group-hover:scale-105 transition">
+                        {% else %}
+                        <!-- Default SVG Icon -->
+                        <div
+                            class="w-8 h-8 bg-gray-300 rounded-full flex items-center justify-center border-2 border-white">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="w-5 h-5 text-gray-600"
+                                viewBox="0 0 24 24">
+                                <path
+                                    d="M12 12c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
+                            </svg>
+                        </div>
+                        {% endif %}
+                        <span class="hidden sm:inline text-sm font-medium group-hover:underline 
+                        {% if request.path == url_for('user.profile') %}
+                            text-white
+                        {% else %}
+                            text-gray-600 hover:text-gray-200 hover:text-underline
+                        {% endif %}">Profile</span>
+                    </a>
+                </li>
+                <li class="mr-3">
+                    <a class="inline-block py-2 px-4 no-underline 
+                    {% if request.path == url_for('auth.logout') %}
+                        text-white
+                    {% else %}
+                        text-gray-600 hover:text-gray-200 hover:text-underline
+                    {% endif %}" href="{{ url_for('auth.logout') }}" @click="isOpen = false">Logout
+                    </a>
+                </li>
                 {% else %}
-                <a href="{{ url_for('auth.login') }}" class="px-4 py-2 hover:underline">Login</a>
-                <a href="{{ url_for('auth.signup') }}"
-                    class="px-4 py-2 bg-white text-blue-600 rounded hover:bg-gray-200">
-                    Signup
-                </a>
+                <li class="mr-3">
+                    <a class="inline-block py-2 px-4 no-underline 
+                    {% if request.path == url_for('auth.login') %}
+                        text-white
+                    {% else %}
+                        text-gray-600 hover:text-gray-200 hover:text-underline
+                    {% endif %}" href="{{ url_for('auth.login') }}" @click="isOpen = false">Login
+                    </a>
+                </li>
+                <li class="mr-3">
+                    <a class="inline-block py-2 px-4 no-underline 
+                    {% if request.path == url_for('auth.signup') %}
+                        text-white
+                    {% else %}
+                        text-gray-600 hover:text-gray-200 hover:text-underline
+                    {% endif %}" href="{{ url_for('auth.signup') }}" @click="isOpen = false">Signup
+                    </a>
+                </li>
                 {% endif %}
-            </div>
+            </ul>
         </div>
     </nav>
 
@@ -70,7 +128,7 @@
     {% endwith %}
 
     <!-- Main Content -->
-    <main class="container mx-auto mt-6">
+    <main class="container mx-auto mt-24">
         {% block content %}
         <!-- Content goes here -->
         {% endblock %}
