From de37a2a19c6ac0438a6cf8562b92f9604bb303be Mon Sep 17 00:00:00 2001
From: Skillers3 <ntahsp@gmail.com>
Date: Sat, 20 Jan 2024 18:18:36 +0200
Subject: [PATCH] Added "withSearchBar" navbar example. Also fixes #63 (#62)

* Added "withSearchBar" navbar example

* typo fix

* Fixes #63

* change some details

- input color
- select instead of dropdown

---------

Co-authored-by: Willian Pinheiro <willpinhaaa@gmail.com>
---
 src/examples/footer/compact.html       |  6 ++-
 src/examples/footer/contentHeavy.html  |  4 +-
 src/examples/footer/simple.html        |  4 +-
 src/examples/navbar/withSearchBar.html | 73 ++++++++++++++++++++++++++
 4 files changed, 81 insertions(+), 6 deletions(-)
 create mode 100644 src/examples/navbar/withSearchBar.html

diff --git a/src/examples/footer/compact.html b/src/examples/footer/compact.html
index 61e2996..74422a6 100644
--- a/src/examples/footer/compact.html
+++ b/src/examples/footer/compact.html
@@ -2,8 +2,10 @@
 
     <!-- Brand -->
     <aside>
-        <span class="fa-brands fa-superpowers mr-2 text-4xl align-center text-primary"></span>
-        <p class="text-2xl">Company</p>
+        <p class="text-3xl flex items-center gap-2">
+            <img alt="Logo" src="/logo.svg" class="inline w-6" />
+            Company
+        </p>
         <small>Copyright © 2024 - All rights reserved</small>
     </aside>
 
diff --git a/src/examples/footer/contentHeavy.html b/src/examples/footer/contentHeavy.html
index e0644b9..7a3429c 100644
--- a/src/examples/footer/contentHeavy.html
+++ b/src/examples/footer/contentHeavy.html
@@ -48,8 +48,8 @@ <h3 class="text-lg footer-title">Company</h3>
     <aside class="flex flex-col sm:flex-row gap-6 justify-center sm:justify-between items-center">
 
         <!-- Brand -->
-        <div class="flex items-center gap-2">
-            <span class="fa-brands fa-superpowers mr-2 text-4xl align-center text-primary"></span>
+        <div class="flex items-center gap-4">
+            <img alt="Logo" src="/logo.svg" class="w-8" />
             <div>
                 <p class="text-2xl">Company</p>
                 <small>Copyright © 2024 - All rights reserved</small>
diff --git a/src/examples/footer/simple.html b/src/examples/footer/simple.html
index 96a2bc5..8f3f2ca 100644
--- a/src/examples/footer/simple.html
+++ b/src/examples/footer/simple.html
@@ -31,8 +31,8 @@
 
     <!-- Brand -->
     <aside class="bg-base-300 py-4 px-8 w-full flex gap-2 flex-wrap justify-between items-center text-sm">
-        <p class="text-xl">
-            <span class="fa-brands fa-superpowers mr-2 text-primary"></span>
+        <p class="text-xl flex items-center gap-2">
+            <img alt="Logo" src="/logo.svg" class="w-4" />
             <span>Company</span>
         </p>
         <p>Copyright © 2024 - All rights reserved</p>
diff --git a/src/examples/navbar/withSearchBar.html b/src/examples/navbar/withSearchBar.html
new file mode 100644
index 0000000..4dac713
--- /dev/null
+++ b/src/examples/navbar/withSearchBar.html
@@ -0,0 +1,73 @@
+<div class="flex flex-col">
+    <!-- Top navbar (always visible) -->
+    <nav class="navbar justify-between gap-4 bg-base-300">
+        <!-- Logo -->
+        <a class="btn btn-ghost text-lg">
+            <img alt="Logo" src="/logo.svg" class="w-4" />
+            Company
+        </a>
+
+        <!-- Search -->
+        <div class="join w-full max-w-xl hidden sm:inline-flex">
+            <!-- Search options -->
+            <select class="select select-sm select-bordered join-item">
+                <option selected>Good potions</option>
+                <option>Bad potions</option>
+                <option>Illegal potions</option>
+            </select>
+
+            <!-- Search input -->
+            <input class="join-item input input-sm input-bordered w-full" type="text" placeholder="Search">
+
+            <!-- Search button -->
+            <button class="join-item btn btn-sm btn-primary text-success-content">
+                <i class="fa fa-search" aria-hidden="true"></i>
+            </button>
+        </div>
+
+        <!-- Menu (Desktop) -->
+        <div class="shrink-0 hidden md:flex gap-2">
+            <a class="btn btn-sm btn-ghost">Create Account</a>
+            <a class="btn btn-sm btn-primary">
+                Log in
+                <i class="fa-solid fa-right-to-bracket" aria-hidden="true"></i>
+            </a>
+        </div>
+
+        <!-- Menu (Mobile) -->
+        <div class="dropdown dropdown-end md:hidden">
+            <button class="btn btn-ghost">
+                <i class="fa-solid fa-bars text-lg"></i>
+            </button>
+
+            <ul tabindex="0" class="dropdown-content menu z-[1] bg-base-200 p-4 rounded-box shadow w-56 gap-2">
+                <li><a>Create Account</a></li>
+                <a class="btn btn-primary btn-sm">
+                    Log in
+                    <i class="fa fa-arrow-right text-xs" aria-hidden="true"></i>
+                </a>
+            </ul>
+        </div>
+    </nav>
+
+    <!-- Botton navbar (mobile only) -->
+    <nav class="navbar sm:hidden bg-base-200 border-neutral">
+        <!-- Search -->
+        <div class="join w-full">
+            <!-- Search options -->
+            <select class="select select-sm select-bordered join-item">
+                <option selected>Good potions</option>
+                <option>Bad potions</option>
+                <option>Illegal potions</option>
+            </select>
+
+            <!-- Search input -->
+            <input class="join-item input input-sm input-bordered w-full" type="text" placeholder="Search">
+
+            <!-- Search button -->
+            <button class="join-item btn btn-sm btn-primary text-success-content">
+                <i class="fa fa-search" aria-hidden="true"></i>
+            </button>
+        </div>
+    </nav>
+</div>