adding developer tools in admin panel, adding vendor management

app/templates/partials/sidebar.html

@@ -1,4 +1,4 @@
-<!-- app/templates/partials/sidebar.html -->
+{# app/templates/partials/sidebar.html #}
 <!-- Desktop sidebar -->
 <aside class="z-20 hidden w-64 overflow-y-auto bg-white dark:bg-gray-800 md:block flex-shrink-0">
     <div class="py-4 text-gray-500 dark:text-gray-400">
@@ -6,6 +6,7 @@
             Admin Portal
         </a>
         <ul class="mt-6">
+            <!-- Dashboard -->
             <li class="relative px-6 py-3">
                 <span x-show="currentPage === 'dashboard'" class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg" aria-hidden="true"></span>
                 <a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
@@ -16,7 +17,10 @@
                 </a>
             </li>
         </ul>
+
+        <!-- Main Navigation -->
         <ul>
+            <!-- Vendors -->
             <li class="relative px-6 py-3">
                 <span x-show="currentPage === 'vendors'" class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg" aria-hidden="true"></span>
                 <a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
@@ -26,27 +30,88 @@
                     <span class="ml-4">Vendors</span>
                 </a>
             </li>
+
+            <!-- Users -->
             <li class="relative px-6 py-3">
+                <span x-show="currentPage === 'users'" class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg" aria-hidden="true"></span>
                 <a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
+                   :class="currentPage === 'users' ? 'text-gray-800 dark:text-gray-100' : ''"
                    href="/admin/users">
                     <span x-html="$icon('users')"></span>
                     <span class="ml-4">Users</span>
                 </a>
             </li>
+
+            <!-- Import Jobs -->
             <li class="relative px-6 py-3">
+                <span x-show="currentPage === 'imports'" class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg" aria-hidden="true"></span>
                 <a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
-                   href="#">
+                   :class="currentPage === 'imports' ? 'text-gray-800 dark:text-gray-100' : ''"
+                   href="/admin/imports">
                     <span x-html="$icon('cube')"></span>
                     <span class="ml-4">Import Jobs</span>
                 </a>
             </li>
         </ul>
+
+        <!-- Developer Tools Section -->
         <div class="px-6 my-6">
-            <button class="flex items-center justify-between w-full px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple">
-                Create vendor
-                <span class="ml-2" aria-hidden="true">+</span>
-            </button>
+            <hr class="border-gray-200 dark:border-gray-700" />
         </div>
+        <p class="px-6 text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase tracking-wider">
+            Developer Tools
+        </p>
+        <ul class="mt-3">
+            <!-- Components -->
+            <li class="relative px-6 py-3">
+                <span x-show="currentPage === 'components'" class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg" aria-hidden="true"></span>
+                <a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
+                   :class="currentPage === 'components' ? 'text-gray-800 dark:text-gray-100' : ''"
+                   href="/admin/components">
+                    <span x-html="$icon('view-grid')"></span>
+                    <span class="ml-4">Components</span>
+                </a>
+            </li>
+
+            <!-- Icons -->
+            <li class="relative px-6 py-3">
+                <span x-show="currentPage === 'icons'" class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg" aria-hidden="true"></span>
+                <a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
+                   :class="currentPage === 'icons' ? 'text-gray-800 dark:text-gray-100' : ''"
+                   href="/admin/icons">
+                    <span x-html="$icon('photograph')"></span>
+                    <span class="ml-4">Icons</span>
+                </a>
+            </li>
+
+            <!-- Testing Hub -->
+            <li class="relative px-6 py-3">
+                <span x-show="currentPage === 'testing'" class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg" aria-hidden="true"></span>
+                <a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
+                   :class="currentPage === 'testing' ? 'text-gray-800 dark:text-gray-100' : ''"
+                   href="/admin/testing">
+                    <span x-html="$icon('beaker')"></span>
+                    <span class="ml-4">Testing Hub</span>
+                </a>
+            </li>
+        </ul>
+
+        <!-- Settings Section -->
+        <div class="px-6 my-6">
+            <hr class="border-gray-200 dark:border-gray-700" />
+        </div>
+        <ul>
+            <!-- Settings -->
+            <li class="relative px-6 py-3">
+                <span x-show="currentPage === 'settings'" class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg" aria-hidden="true"></span>
+                <a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
+                   :class="currentPage === 'settings' ? 'text-gray-800 dark:text-gray-100' : ''"
+                   href="/admin/settings">
+                    <span x-html="$icon('cog')"></span>
+                    <span class="ml-4">Settings</span>
+                </a>
+            </li>
+        </ul>
     </div>
 </aside>
 
@@ -75,6 +140,7 @@
             Admin Portal
         </a>
         <ul class="mt-6">
+            <!-- Dashboard -->
             <li class="relative px-6 py-3">
                 <span x-show="currentPage === 'dashboard'" class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg" aria-hidden="true"></span>
                 <a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
@@ -85,7 +151,10 @@
                 </a>
             </li>
         </ul>
+
+        <!-- Main Navigation -->
         <ul>
+            <!-- Vendors -->
             <li class="relative px-6 py-3">
                 <span x-show="currentPage === 'vendors'" class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg" aria-hidden="true"></span>
                 <a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
@@ -95,26 +164,87 @@
                     <span class="ml-4">Vendors</span>
                 </a>
             </li>
+
+            <!-- Users -->
             <li class="relative px-6 py-3">
+                <span x-show="currentPage === 'users'" class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg" aria-hidden="true"></span>
                 <a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
+                   :class="currentPage === 'users' ? 'text-gray-800 dark:text-gray-100' : ''"
                    href="/admin/users">
                     <span x-html="$icon('users')"></span>
                     <span class="ml-4">Users</span>
                 </a>
             </li>
+
+            <!-- Import Jobs -->
             <li class="relative px-6 py-3">
+                <span x-show="currentPage === 'imports'" class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg" aria-hidden="true"></span>
                 <a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
-                   href="#">
+                   :class="currentPage === 'imports' ? 'text-gray-800 dark:text-gray-100' : ''"
+                   href="/admin/imports">
                     <span x-html="$icon('cube')"></span>
                     <span class="ml-4">Import Jobs</span>
                 </a>
             </li>
         </ul>
+
+        <!-- Developer Tools Section -->
         <div class="px-6 my-6">
-            <button class="flex items-center justify-between px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple">
-                Create vendor
-                <span class="ml-2" aria-hidden="true">+</span>
-            </button>
+            <hr class="border-gray-200 dark:border-gray-700" />
         </div>
+        <p class="px-6 text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase tracking-wider">
+            Developer Tools
+        </p>
+        <ul class="mt-3">
+            <!-- Components -->
+            <li class="relative px-6 py-3">
+                <span x-show="currentPage === 'components'" class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg" aria-hidden="true"></span>
+                <a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
+                   :class="currentPage === 'components' ? 'text-gray-800 dark:text-gray-100' : ''"
+                   href="/admin/components">
+                    <span x-html="$icon('view-grid')"></span>
+                    <span class="ml-4">Components</span>
+                </a>
+            </li>
+
+            <!-- Icons -->
+            <li class="relative px-6 py-3">
+                <span x-show="currentPage === 'icons'" class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg" aria-hidden="true"></span>
+                <a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
+                   :class="currentPage === 'icons' ? 'text-gray-800 dark:text-gray-100' : ''"
+                   href="/admin/icons">
+                    <span x-html="$icon('photograph')"></span>
+                    <span class="ml-4">Icons</span>
+                </a>
+            </li>
+
+            <!-- Testing Hub -->
+            <li class="relative px-6 py-3">
+                <span x-show="currentPage === 'testing'" class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg" aria-hidden="true"></span>
+                <a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
+                   :class="currentPage === 'testing' ? 'text-gray-800 dark:text-gray-100' : ''"
+                   href="/admin/testing">
+                    <span x-html="$icon('beaker')"></span>
+                    <span class="ml-4">Testing Hub</span>
+                </a>
+            </li>
+        </ul>
+
+        <!-- Settings Section -->
+        <div class="px-6 my-6">
+            <hr class="border-gray-200 dark:border-gray-700" />
+        </div>
+        <ul>
+            <!-- Settings -->
+            <li class="relative px-6 py-3">
+                <span x-show="currentPage === 'settings'" class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg" aria-hidden="true"></span>
+                <a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
+                   :class="currentPage === 'settings' ? 'text-gray-800 dark:text-gray-100' : ''"
+                   href="/admin/settings">
+                    <span x-html="$icon('cog')"></span>
+                    <span class="ml-4">Settings</span>
+                </a>
+            </li>
+        </ul>
     </div>
 </aside>