From 6c463ed3456efe79e7e1fd20f322b59e2c5f095d Mon Sep 17 00:00:00 2001
From: Eero Holmala <eero.holmala@hotmail.com>
Date: Sat, 1 Jun 2024 13:55:18 +0300
Subject: [PATCH] Frontend: Improve navbar component

---
 .../src/app/(auth)/login/page.tsx             |  9 +-
 .../src/components/ui/navbar.tsx              | 82 ++++++++++++++-----
 2 files changed, 70 insertions(+), 21 deletions(-)

diff --git a/wretched-machines-frontend/src/app/(auth)/login/page.tsx b/wretched-machines-frontend/src/app/(auth)/login/page.tsx
index 165e30b..55c6e5e 100644
--- a/wretched-machines-frontend/src/app/(auth)/login/page.tsx
+++ b/wretched-machines-frontend/src/app/(auth)/login/page.tsx
@@ -13,7 +13,14 @@ const Login = () => {
     });
 
     const handleAction = (formData: FormData) => {
-        console.log(formData.get("email") + " " + formData.get("password"));
+        const email= formData.get("email")!.toString();
+        const password = formData.get("password")!.toString();
+        console.log({
+            "email": btoa(email),
+            "password": btoa(password),
+        });
+        
+         
     }
 
     const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
diff --git a/wretched-machines-frontend/src/components/ui/navbar.tsx b/wretched-machines-frontend/src/components/ui/navbar.tsx
index e5606af..69ec604 100644
--- a/wretched-machines-frontend/src/components/ui/navbar.tsx
+++ b/wretched-machines-frontend/src/components/ui/navbar.tsx
@@ -4,28 +4,70 @@ import { cn } from "@/lib/utils"
 
 const Break = ()=> <hr className={cn("w-100")}></hr>
 
-const Navbar = () => {
-    return (
+// const Navbar = () => {
+//     return (
+//         <div className={cn("bg-666666 pt-1 pb-1")}>
+//             <Break/>
+//             <div className={cn("flex h-20 text-white justify-around items-center")}>
+//                 <Link href="/">
+//                     <div>Home</div>
+//                 </Link>
+//                 <Link href="/blog">
+//                     <div>Blog</div>
+//                 </Link>
+//                 <Link href="/tools">
+//                     <div>Tools</div>
+//                 </Link>
+//                 <Link href="/demos">
+//                     <div>Demos</div>
+//                 </Link>
+//                 <Link href="/login">
+//                     <div>Login</div>
+//                 </Link>
+//                 <br></br>
+//             </div>
+//             <Break/>
+//         </div>
+//     );
+// }
+
+
+
+const Navbar = ()=>{
+    return(
         <div className={cn("bg-666666 pt-1 pb-1")}>
             <Break/>
-            <div className={cn("flex h-20 text-white justify-around items-center")}>
-                <Link href="/">
-                    <div>Home</div>
-                </Link>
-                <Link href="/blog">
-                    <div>Blog</div>
-                </Link>
-                <Link href="/tools">
-                    <div>Tools</div>
-                </Link>
-                <Link href="/demos">
-                    <div>Demos</div>
-                </Link>
-                <Link href="/login">
-                    <div>Login</div>
-                </Link>
-                <br></br>
-            </div>
+            <nav className="flex items-center justify-between flex-wrap bg-666666 p-6">
+                <div className="flex items-center flex-shrink-0 text-white mr-6">
+                    <svg className="fill-current h-8 w-8 mr-2" width="54" height="54" viewBox="0 0 110 108" xmlns="http://www.w3.org/2000/svg"><path fill="#817e6f" stroke="#817e6f" d="M44.041 3.733C19.347 8.36 1.002 35.479 4.889 61.612c6.132 41.231 55.737 58.121 86.414 29.423 28.694-26.841 16.128-76.613-21.838-86.502-5.508-1.435-19.66-1.88-25.424-.8" fill-rule="evenodd"/><path fill="#4f4b42" stroke="#4f4b42" d="M29.315 46.985C22.272 49.893 24.796 61 32.5 61c3.81 0 7.5-3.702 7.5-7.524 0-4.839-5.941-8.448-10.685-6.491M77 46.709C69.367 49.516 70.885 61 78.889 61c7.002 0 10.016-8.104 4.712-12.667-2.736-2.354-3.862-2.631-6.601-1.624m-57.403 6.135c-.346.56-.142 1.319.453 1.687 1.538.95 2.53-.351 1.246-1.635-.718-.718-1.277-.735-1.699-.052m23.986.022c-.431.697-.513 1.537-.183 1.867.895.895 1.871-.421 1.387-1.871-.338-1.016-.574-1.016-1.204.004M66 54c0 .55.675 1 1.5 1s1.5-.45 1.5-1-.675-1-1.5-1-1.5.45-1.5 1m23.5 0c.34.55 1.041 1 1.559 1s.941-.45.941-1-.702-1-1.559-1-1.281.45-.941 1" fill-rule="evenodd"/></svg>
+                    <span className="font-semibold text-xl tracking-tight">Wretched Machines</span>
+                </div>
+                <div className="block lg:hidden">
+                    <button className="flex items-center px-3 py-2 border rounded text-gray-200 border-gray-400 hover:text-white hover:border-white">
+                    <svg className="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
+                    </button>
+                </div>
+                <div className="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
+                    <div className="text-md lg:flex-grow">
+                        <Link href="/" className="block mt-4 lg:inline-block lg:mt-0 text-gray-200 hover:text-white mr-4">
+                            Home
+                        </Link>
+                        <Link href="/blog" className="block mt-4 lg:inline-block lg:mt-0 text-gray-200 hover:text-white mr-4">
+                            Blog
+                        </Link>
+                        <Link href="/tools" className="block mt-4 lg:inline-block lg:mt-0 text-gray-200 hover:text-white mr-4">
+                            Tools
+                        </Link>
+                        <Link href="/demos" className="block mt-4 lg:inline-block lg:mt-0 text-gray-200 hover:text-white mr-4">
+                            Demos
+                        </Link>
+                    </div>
+                    <div>
+                        <Link href="/login" className="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal-500 hover:bg-white mt-4 lg:mt-0">Login</Link>
+                        <Link href="/register" className="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal-500 hover:bg-white mt-4 lg:mt-0">Register</Link>
+                    </div>
+                </div>
+            </nav>
             <Break/>
         </div>
     );