feature/completed navbar/header functionality

This commit is contained in:
Joaquin committed 2025-05-05 16:24:25 -07:00
1 parent 02a8374a58
commit 7fa75457c9
10 files changed
+158 -127

No files matched your search

+28 -35
View File
@@ -1,37 +1,30 @@
<div class="fixed bottom-0 left-0 z-50 lg:hidden w-full h-16 bg-white border-t border-gray-200 dark:bg-gray-400">
<form method="GET" class="h-16">
<div class="grid h-full max-w-lg grid-cols-4 mx-auto font-medium">
<button formaction="/home" type="submit" class="inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M11.293 3.293a1 1 0 0 1 1.414 0l6 6 2 2a1 1 0 0 1-1.414 1.414L19 12.414V19a2 2 0 0 1-2 2h-3a1 1 0 0 1-1-1v-3h-2v3a1 1 0 0 1-1 1H7a2 2 0 0 1-2-2v-6.586l-.293.293a1 1 0 0 1-1.414-1.414l2-2 6-6Z" clip-rule="evenodd"/>
</svg>
<span class="text-sm text-black">Home</span>
</button>
<button formaction="/assets" type="submit" class="inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group">
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="30" height="30" fill="url(#pattern0_102_91)"/>
<defs>
<pattern id="pattern0_102_91" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_102_91" transform="scale(0.0104167)"/>
</pattern>
<image id="image0_102_91" width="96" height="96" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAACXBIWXMAAAsTAAALEwEAmpwYAAAGXUlEQVR4nO2ca4hVVRTHf+OjB6lpmGRUkkbvl6Z9KIJeEPoly5EeWtGD6IFZIWhmakWFpoZFD+lFkmUUSWql9SEMK0olyxR62YMoTUd7k9XMiS1rZLrds9c9c9c+e2bYP1hfZu7/7rX3Pmfftdfa50AikUgkEolEIpFIJBKJRCKRSCQSiUT9DAAagRnA88A6YDOwA/hLbIf8zf3vOWA6MEa0lRwGjAceA76NoO8UjADmARuAFiBrp7XId8wFhldppxswDJgMfBhB36HoA0wCNtUx4JliG6WN3jk+nAjMB36LpI/CAcCdchtnJdkOYCbQL8en/sBdwM+R9KXQAFwO/FjiwGcV1gRMlKWkGgcBC4DmSPpgHAG8E3HgswpbDQzx+HsG8HVEvSkXeW7NIrYFuLaNTanz+34Cxnr87gu8EFFfN+42e8Dwqv20Snho8b1zlSVhqhKZhda3i70kPs46wQRkwCKgp6c/FwO7IuoLD/6rxoMfegIyYLkyCBcCf0fU10S3AFd+WROQAc9KtOb7PWuOqFexXPNjTEAG3K/08bbIeu/sWg+Gu1reACYAJ1S0tw9wPbBCuaraYy4XlYe7QhdH1OfG+RahZltzA390je0fD7xl2LYLEQd72nOpha8i6v83o5abrBbJnxSlO3CvoR9vK+vxWcqdF1q/h6uNr/zrqI/5hr5cobS1ILJ+d2Jtm2GHX6Z+ugHvG/mzVXa0eHI/v0TU784AWg3+H+KQBafXWVdoa67Y4mN6LH0f45Ty04qjvYH7gKXATTVs31cY+dWk5PPdFfprDP0kw8F3NloZ0NcrPj9H+fxlhr7dqrT1YAy9dSXrEI+Dw6p8/h/ZjOVxsKFvrszo48iy9SOMB3+XEnJNyNFNVDr2vaGPQ5W21papn2c8AdsV5/J+7J9RdKsNfdRSBJPL1G8wngAXivnIK76sVHRLDX1cr7R1TFn6AYYhXqu57+vhcW5kju6LiipZpa0x9LFZiu95NCj1bjN9o/Hgt5ov99FDsqFZZHM5fR9LytDPCNS5cYpzp0iSKuYE3FHnpspEH6rg4r5X4+QAvz9FzBVMfFxahl4Ll+oJRQfWMAl7S9bTV2MNZR8ovp1aht533qVec4WKWhkELAwQEPhscw0+BddvD9zJGynGmcBnJU2Ay/xq2eHg+tC3vgu3bi44CfsCswKUJivtzxpOhATXl7X2LpFbsgijJa3dpScg9BLU1n6X0Gy/ApNwviTquuwSFPJH2NfwZFlqamFWV/4RDhWG1mLf1LCbRCbqh64ahobaiBWxR2qoiFmWSzvURixUKqKozVE6c1JXTUWM6QCDn0nIeZxyTsj6sNgFdSbTTPTW6eg3JdGWZ9WeRszE7lY69JHxhGvp5G1l6T827Jg7lu1juUf7oqK1PK7oLgQfx5aptyxJvqs49oRH+5qiXWno52ylrSll6ocbdkzbnFzl0T6paN8z9NOlwn2sK1u/0bBzvpTDAM+D0OOUTm0x8k87VnJUDL3lwaxrFAdvqaJZozzSc6ihf9rBqodi6HsbHk10R7E1GoFX5Mihi372Vz5/g5FvLvfVy9NOP+VoYVD9TMOr7DTs6GZYutQ2TzNj6vsZvnpgraRjLZhk5NMW5U4bqFy9ofW7udLwLnhKdrD1MELy5hb+uHdbtDdELkO/ZwdneQRwkRTe28O5ygMPRWyVcl71HCUjEFr/H4YYn9lxh7DOKzDwBwKPGhZidgKHe9rro9RFQuurMtZwAlptk2RfR1apig2R59MWGy45mVyVvppDg6RAYum9zA0wCa02qqKtZYHacdU0H7dH1qvh36JOPAELlXX3EuXkRWh9TfQM9LKOUYEnYJmys25UXrYRWl+InlI+6ywTsFDp/Hh5XWUsfbtokKc6OvIEtMiam3fbN0iZsCWS3oQxRiHq57JbbrV6v3OnEm24MzovRdSbMlgSblkHsVVKnH22vCU3lj7oayu3Rhz4Jnl0qcGTm/GduA6tL4W+si42lTjw2yWruL+n6HOPJ40RWh+FXlJo+CTgwG+QYk4vzwPgD3sO9IbWdxiGSsS0vs4j5s1yemB2Tg22u2RLp+bUC0LrOwX9JTqYJrtqV3r8UpasXWJN8rc1st+YJoeWqp27GSTvjXgc+C6CPpFIJBKJRCKRSCQSiUQikUgkEolEgiL8CztiOUrGBr4DAAAAAElFTkSuQmCC"/>
</defs>
</svg>
<span class="text-sm text-black">Assets</span>
</button>
<button formaction="/plans" type="submit" class="inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" viewBox="0 0 24 24">
<path d="M13.09 3.294c1.924.95 3.422 1.69 5.472.692a1 1 0 0 1 1.438.9v9.54a1 1 0 0 1-.562.9c-2.981 1.45-5.382.24-7.25-.701a38.739 38.739 0 0 0-.622-.31c-1.033-.497-1.887-.812-2.756-.77-.76.036-1.672.357-2.81 1.396V21a1 1 0 1 1-2 0V4.971a1 1 0 0 1 .297-.71c1.522-1.506 2.967-2.185 4.417-2.255 1.407-.068 2.653.453 3.72.967.225.108.443.216.655.32Z"/>
</svg>
<span class="text-sm text-black">Plans</span>
</button>
<button formaction="/more" type="submit" class="inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group">
<svg height="30" width="30" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 17 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"></path>
</svg>
<span class="text-sm text-black">More</span>
</button>
</div>
</form>
<div class="fixed bottom-0 left-0 z-50 lg:hidden w-full h-16 bg-gray-100 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 text-gray-500 dark:text-gray-400 text-sm">
<div class="grid h-16 max-w-lg grid-cols-4 mx-auto font-medium">
<a href="/home" class="inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M11.293 3.293a1 1 0 0 1 1.414 0l6 6 2 2a1 1 0 0 1-1.414 1.414L19 12.414V19a2 2 0 0 1-2 2h-3a1 1 0 0 1-1-1v-3h-2v3a1 1 0 0 1-1 1H7a2 2 0 0 1-2-2v-6.586l-.293.293a1 1 0 0 1-1.414-1.414l2-2 6-6Z" clip-rule="evenodd"/>
</svg>
<span class="text-gray-500 dark:text-gray-400 text-sm">Dashboard</span>
</a>
<a href="/assets" class="inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M10.464 8.746c.227-.18.497-.311.786-.394v2.795a2.252 2.252 0 0 1-.786-.393c-.394-.313-.546-.681-.546-1.004 0-.323.152-.691.546-1.004ZM12.75 15.662v-2.824c.347.085.664.228.921.421.427.32.579.686.579.991 0 .305-.152.671-.579.991a2.534 2.534 0 0 1-.921.42Z" />
<path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25ZM12.75 6a.75.75 0 0 0-1.5 0v.816a3.836 3.836 0 0 0-1.72.756c-.712.566-1.112 1.35-1.112 2.178 0 .829.4 1.612 1.113 2.178.502.4 1.102.647 1.719.756v2.978a2.536 2.536 0 0 1-.921-.421l-.879-.66a.75.75 0 0 0-.9 1.2l.879.66c.533.4 1.169.645 1.821.75V18a.75.75 0 0 0 1.5 0v-.81a4.124 4.124 0 0 0 1.821-.749c.745-.559 1.179-1.344 1.179-2.191 0-.847-.434-1.632-1.179-2.191a4.122 4.122 0 0 0-1.821-.75V8.354c.29.082.559.213.786.393l.415.33a.75.75 0 0 0 .933-1.175l-.415-.33a3.836 3.836 0 0 0-1.719-.755V6Z" clip-rule="evenodd" />
</svg>
<span class="text-gray-500 dark:text-gray-400 text-sm">Assets</span>
</a>
<a href="/plans" class="inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" viewBox="0 0 24 24">
<path d="M13.09 3.294c1.924.95 3.422 1.69 5.472.692a1 1 0 0 1 1.438.9v9.54a1 1 0 0 1-.562.9c-2.981 1.45-5.382.24-7.25-.701a38.739 38.739 0 0 0-.622-.31c-1.033-.497-1.887-.812-2.756-.77-.76.036-1.672.357-2.81 1.396V21a1 1 0 1 1-2 0V4.971a1 1 0 0 1 .297-.71c1.522-1.506 2.967-2.185 4.417-2.255 1.407-.068 2.653.453 3.72.967.225.108.443.216.655.32Z"/>
</svg>
<span class="text-gray-500 dark:text-gray-400 text-sm">Plans</span>
</a>
<a href="/more" class="inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group">
<svg height="30" width="30" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 17 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"></path>
</svg>
<span class="text-gray-500 dark:text-gray-400 text-sm">More</span>
</a>
</div>
</div>