From 41eec239ffe97d9e5bcd8f8513828b14f37a9b5d Mon Sep 17 00:00:00 2001
From: Aayush Kumar Sahu <aayushmau5@gmail.com>
Date: Sun, 5 Jan 2025 20:57:56 +0530
Subject: [PATCH] fix UI

---
 .../components/core_components.ex             | 50 ++++++++++---------
 .../components/layouts/note.html.heex         |  2 +-
 2 files changed, 27 insertions(+), 25 deletions(-)

diff --git a/lib/accumulator_web/components/core_components.ex b/lib/accumulator_web/components/core_components.ex
index 7c24a59..e123741 100644
--- a/lib/accumulator_web/components/core_components.ex
+++ b/lib/accumulator_web/components/core_components.ex
@@ -475,11 +475,15 @@ defmodule AccumulatorWeb.CoreComponents do
 
   def navbar(assigns) do
     ~H"""
-    <nav class="relative">
+    <nav class="relative z-50">
       <button
-        phx-click={JS.toggle(to: "#navbar")}
+        phx-click={
+          JS.toggle_attribute({"style", "display: flex;", "display: none;"},
+            to: "#navbar"
+          )
+        }
         type="button"
-        class="absolute right-2 p-2 ml-3 text-sm text-gray-500 rounded-lg focus:outline-none z-20"
+        class="fixed top-0 p-2 ml-3 text-sm text-gray-500 rounded-lg focus:outline-none z-10"
         aria-controls="navbar"
         aria-expanded="false"
       >
@@ -493,33 +497,31 @@ defmodule AccumulatorWeb.CoreComponents do
         </svg>
       </button>
 
-      <div class="hidden w-full bg-slate-500 bg-opacity-10" id="navbar">
-        <ul class="flex flex-col p-4 rounded-lg md:flex-row md:mt-0 md:text-sm md:font-medium">
+      <div
+        class="bg-[#26282a] w-content h-screen fixed flex-col overflow-y-auto justify-between"
+        style="display: none;"
+        id="navbar"
+      >
+        <ul class="p-4 mt-5">
           {render_slot(@inner_block)}
         </ul>
 
-        <ul class="text-right ml-auto mr-2 py-2">
+        <div class="text-right mr-4 mt-auto mb-4">
           <%= if @current_user do %>
-            <li class="text-white">
-              {@current_user.email}
-            </li>
-            <li>
-              <.link
-                href="/logout"
-                method="delete"
-                class="text-white font-semibold hover:text-[#6CFACD]"
-              >
-                Log out
-              </.link>
-            </li>
+            <div>{@current_user.email}</div>
+            <.link
+              href="/logout"
+              method="delete"
+              class="text-white font-semibold hover:text-[#6CFACD]"
+            >
+              Log out
+            </.link>
           <% else %>
-            <li>
-              <.link href="/login" class="text-white font-semibold hover:text-[#6CFACD]">
-                Log in
-              </.link>
-            </li>
+            <.link href="/login" class="text-white font-semibold hover:text-[#6CFACD]">
+              Log in
+            </.link>
           <% end %>
-        </ul>
+        </div>
       </div>
     </nav>
     """
diff --git a/lib/accumulator_web/components/layouts/note.html.heex b/lib/accumulator_web/components/layouts/note.html.heex
index f07c194..02885fc 100644
--- a/lib/accumulator_web/components/layouts/note.html.heex
+++ b/lib/accumulator_web/components/layouts/note.html.heex
@@ -1,4 +1,4 @@
-<main>
+<main class="pt-5">
   <.flash_group flash={@flash} />
   {@inner_content}
 </main>