Merge PR #5 from dev-branch

Add some simple dropdown designs

Author: Michaelninder

components/dropdowns/glass-user-menu.html

@@ -0,0 +1,41 @@
+<div class="relative inline-block text-left">
+  <button
+    type="button"
+    class="flex size-10 items-center justify-center rounded-full border border-white/20 bg-white/10 shadow-lg backdrop-blur-md transition-all hover:bg-white/20"
+  >
+    <img
+      src="https://ui-avatars.com/api/?name=FT&background=random"
+      alt="User"
+      class="size-8 rounded-full"
+    />
+  </button>
+
+  <div
+    class="absolute right-0 z-50 mt-3 w-64 origin-top-right overflow-hidden rounded-3xl border border-white/20 bg-white/80 shadow-2xl backdrop-blur-xl dark:border-gray-700/50 dark:bg-gray-900/80"
+  >
+    <div class="bg-gradient-to-br from-primary-500/10 to-transparent p-4">
+      <p class="text-xs font-semibold uppercase tracking-wider text-gray-500">
+        Account
+      </p>
+      <p class="mt-1 text-sm font-bold text-gray-900 dark:text-white">
+        Fabian Ternis
+      </p>
+    </div>
+    <div class="space-y-0.5 p-2">
+      <a
+        href="#"
+        class="group flex items-center justify-between rounded-2xl px-4 py-2.5 text-sm transition-all hover:bg-white dark:hover:bg-gray-800"
+      >
+        <span class="text-gray-700 dark:text-gray-300">Profile Settings</span>
+        <div class="size-1.5 rounded-full bg-primary-500 opacity-0 group-hover:opacity-100"></div>
+      </a>
+      <a
+        href="#"
+        class="group flex items-center justify-between rounded-2xl px-4 py-2.5 text-sm transition-all hover:bg-white dark:hover:bg-gray-800"
+      >
+        <span class="text-gray-700 dark:text-gray-300">Notifications</span>
+        <span class="rounded-md bg-gray-100 px-1.5 py-0.5 text-[10px] dark:bg-gray-700">12</span>
+      </a>
+    </div>
+  </div>
+</div>

components/dropdowns/simple-profile-dropdown.html

@@ -0,0 +1,53 @@
+<div class="relative inline-block text-left">
+  <button
+    type="button"
+    class="group flex items-center gap-2 rounded-xl border border-gray-200 bg-white p-1.5 pr-3 transition-all hover:border-gray-300 dark:border-gray-800 dark:bg-gray-900 dark:hover:border-gray-700"
+  >
+    <img
+      src="https://ui-avatars.com/api/?name=Fabian+Ternis&background=0D8ABC&color=fff"
+      alt="Avatar"
+      class="size-7 rounded-lg object-cover"
+    />
+    <span class="text-sm font-medium text-gray-700 dark:text-gray-200"
+      >Fabian</span
+    >
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="2"
+      stroke="currentColor"
+      class="size-3.5 text-gray-400 transition-transform group-hover:translate-y-0.5"
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="m19.5 8.25-7.5 7.5-7.5-7.5"
+      />
+    </svg>
+  </button>
+
+  <div
+    class="absolute right-0 z-50 mt-2 w-48 origin-top-right rounded-2xl border border-gray-200 bg-white p-1.5 shadow-2xl dark:border-gray-800 dark:bg-gray-900"
+  >
+    <a
+      href="#"
+      class="flex items-center gap-2 rounded-xl px-3 py-2 text-sm text-gray-600 transition-colors hover:bg-gray-50 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-100"
+    >
+      My Account
+    </a>
+    <a
+      href="#"
+      class="flex items-center gap-2 rounded-xl px-3 py-2 text-sm text-gray-600 transition-colors hover:bg-gray-50 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-100"
+    >
+      Billing
+    </a>
+    <div class="my-1 border-t border-gray-100 dark:border-gray-800"></div>
+    <button
+      type="button"
+      class="flex w-full items-center gap-2 rounded-xl px-3 py-2 text-sm font-medium text-red-500 transition-colors hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20"
+    >
+      Logout
+    </button>
+  </div>
+</div>

config.php

@@ -1,6 +1,6 @@
 <?php
 
 return [
-    'APP_VERSION' => '1.4.0',
+    'APP_VERSION' => '1.4.1',
     'BRAND_NAME' => 'mtex.dev',
 ];

data/components.json

@@ -17,19 +17,36 @@
     "id": "810e1094-5d30-4d4f-8921-db3407c8f98c",
     "category": "Dropdowns",
     "name": "Actions Dropdown",
-    "path": "components/dropdowns/actions-dropdown.html"
+    "path": "components/dropdowns/actions-dropdown.html",
+    "is_full": false
   },
   {
     "id": "66557385-e525-402e-a3e4-d3caeebbd227",
     "category": "Dropdowns",
     "name": "Status Dropdown",
-    "path": "components/dropdowns/status-dropdown.html"
+    "path": "components/dropdowns/status-dropdown.html",
+    "is_full": false
   },
   {
     "id": "fdd532a9-b851-45f0-80df-eb0c2eb0d902",
     "category": "Dropdowns",
     "name": "Organizations Dropdown",
-    "path": "components/dropdowns/organizations-dropdown.html"
+    "path": "components/dropdowns/organizations-dropdown.html",
+    "is_full": false
+  },
+  {
+    "id": "14f8a26b-28f0-4d62-921d-9e6b54130093",
+    "category": "Dropdowns",
+    "name": "Simple Profile Dropdown",
+    "path": "components/dropdowns/simple-profile-dropdown.html",
+    "is_full": false
+  },
+  {
+    "id": "b3c5a6d7-e8f9-4a1b-bc2d-3e4f5a6b7c8d",
+    "category": "Dropdowns",
+    "name": "Glass User Menu",
+    "path": "components/dropdowns/glass-user-menu.html",
+    "is_full": false
   },
   {
     "id": "6e64699d-f807-4aeb-adf2-fb4f84623665",