✨ New global menu & profile

democraftmc · Dec 1, 2024 · e82f394 · e82f394
1 parent d95fef0
commit e82f394
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 13 deletions.
diff --git a/public/PixelPerfect.ttf b/public/PixelPerfect.ttf
diff --git a/public/PixelPerfect.woff b/public/PixelPerfect.woff
diff --git a/public/PixelPerfect.woff2 b/public/PixelPerfect.woff2
diff --git a/public/fixes.css b/public/fixes.css
@@ -22,4 +22,18 @@
    .home-hero {
       min-height: 85vh;
    }
-}
+}
+
+@font-face {
+   font-family: 'Pixel Perfect';
+   src: url('PixelPerfect.woff2') format('woff2'),
+        url('PixelPerfect.woff') format('woff'),
+        url('PixelPerfect.ttf') format('truetype');
+   font-weight: normal;
+   font-style: normal;
+   font-display: swap;
+}
+
+.pixel {
+   font-family: 'Pixel Perfect', sans-serif;
+}
diff --git a/src/components/Menu.astro b/src/components/Menu.astro
@@ -9,11 +9,16 @@
   });
 </script>
 <dialog id="menu_modal" class="modal">
-  <div class="modal-box">
-    <h3 class="text-lg font-bold">Hello!</h3>
-    <p class="py-4">Press ESC key or click outside to close</p>
+  <div class="modal-box bg-transparent shadow-none relative min-w-full">
+    <h3 class="text-lg pixel -translate-y-5 absolute left-28">MENU</h3>
+    <div class="bg-base-100 rounded-lg grid max-h-96 overflow-scroll p-4 gap-4">
+      <div class="bg-primary rounded-lg min-h-32"></div>
+      <div class="bg-primary rounded-lg min-h-32"></div>
+      <div class="bg-primary rounded-lg min-h-32"></div>
+      <div class="bg-primary rounded-lg min-h-32"></div>
+    </div>
+    <form method="dialog" class="modal-backdrop">
+      <button>close</button>
+    </form>
   </div>
-  <form method="dialog" class="modal-backdrop">
-    <button>close</button>
-  </form>
 </dialog>
diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
@@ -8,10 +8,52 @@
     ><i class="fa-solid fa-shapes fa-xl"></i></button
   >
   <a><i class="fa-solid fa-basket-shopping fa-xl"></i></a>
-  <a>
-    <img
-      class="rounded-lg w-10 h-10"
-      src="https://api.creepernation.net/avatar/Funasitien"
-    />
-  </a>
+  <button onclick="profile.showModal();"
+    ><img class="rounded-lg w-10 h-10" src="/avatar.png" /></button
+  >
 </div>
+
+<dialog id="profile" class="modal">
+  <div
+    class="modal-box bg-transparent shadow-none flex flex-row justify-center">
+    <h3 class="text-lg pixel text-center absolute -translate-y-5 translate-x-2">
+      Profil
+    </h3>
+    <div class="bg-base-100 p-2 rounded-lg min-w-full">
+      <div class="modal-action">
+        <div class="inline-block relative mr-2 w-10">
+          <button
+            data-toggle-theme="light,dark"
+            class="relative flex items-center justify-center w-10 h-10 btn-ghost rounded">
+            <!-- First SVG icon (bottom layer) -->
+            <svg
+              class="opacity-0 dark:opacity-100 absolute fill-current w-6 h-6 transition-all duration-500"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              ><path
+                d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z"
+              ></path></svg
+            >
+
+            <!-- Second SVG icon (top layer) -->
+            <svg
+              class="absolute dark:opacity-0 opacity-100 fill-current w-6 h-6 transition-all duration-500"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              ><path
+                d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z"
+              ></path></svg
+            >
+          </button>
+        </div>
+        <form method="dialog">
+          <!-- if there is a button in form, it will close the modal -->
+          <button class="btn">X</button>
+        </form>
+      </div>
+    </div>
+  </div>
+  <form method="dialog" class="modal-backdrop">
+    <button>close</button>
+  </form>
+</dialog>