@stacksjs/defaults 0.70.54

package/resources/components/Dashboard/Settings/SettingsFormManager.stx

@@ -0,0 +1,181 @@
+<script>
+interface SettingsFormManagerProps {
+  name?: string
+}
+
+const { name = '' } = defineProps<SettingsFormManagerProps>()
+
+import AIForm from './Forms/AIForm.vue'
+import AnalyticsForm from './Forms/AnalyticsForm.vue'
+import AppForm from './Forms/AppForm.vue'
+import CacheForm from './Forms/CacheForm.vue'
+import CliForm from './Forms/CLIForm.vue'
+import CloudForm from './Forms/CloudForm.vue'
+import DatabaseForm from './Forms/DatabaseForm.vue'
+import DNSForm from './Forms/DNSForm.vue'
+import EmailForm from './Forms/EmailForm.vue'
+import FileSystemForm from './Forms/FileSystemForm.vue'
+import HashingForm from './Forms/HashingForm.vue'
+import LibraryForm from './Forms/LibraryForm.vue'
+import QueueForm from './Forms/QueueForm.vue'
+import SearchEngineForm from './Forms/SearchEngineForm.vue'
+import SecurityForm from './Forms/SecurityForm.vue'
+import ServicesForm from './Forms/ServicesForm.vue'
+import StorageForm from './Forms/StorageForm.vue'
+import TeamsForm from './Forms/TeamsForm.vue'
+
+const options = [
+  {
+    key: 'ai',
+    label: 'AI',
+  },
+  {
+    key: 'analytics',
+    label: 'Analytics',
+  },
+  {
+    key: 'app',
+    label: 'App',
+  },
+  {
+    key: 'cache',
+    label: 'Cache',
+  },
+  {
+    key: 'cli',
+    label: 'CLI',
+  },
+  {
+    key: 'cloud',
+    label: 'Cloud',
+  },
+  {
+    key: 'database',
+    label: 'Database',
+  },
+  {
+    key: 'dns',
+    label: 'DNS',
+  },
+  {
+    key: 'email',
+    label: 'Email',
+  },
+  {
+    key: 'file-system',
+    label: 'File System',
+  },
+  {
+    key: 'hashing',
+    label: 'Hashing',
+  },
+  {
+    key: 'languages',
+    label: 'Languages',
+  },
+  {
+    key: 'library',
+    label: 'Library',
+  },
+  {
+    key: 'native',
+    label: 'Native',
+  },
+  {
+    key: 'mail',
+    label: 'Mail',
+  },
+  {
+    key: 'queue',
+    label: 'Queue',
+  },
+  {
+    key: 'search-engine',
+    label: 'Search Engine',
+  },
+  {
+    key: 'security',
+    label: 'Security',
+  },
+  {
+    key: 'services',
+    label: 'Services',
+  },
+  {
+    key: 'storage',
+    label: 'Storage',
+  },
+  {
+    key: 'team',
+    label: 'Team',
+  },
+  {
+    key: 'ui',
+    label: 'UI',
+  },
+]
+function pageTitle() { return options.find(option => option.key === name }?.label || name)
+</script>
+<main>
+  <div class="md:col-span-2 px-4 py-6 sm:px-6 lg:px-8 bg-white ring-1 ring-gray-900/5 sm:rounded-xl shadow-sm">
+    <h2 class="font-semibold leading-7 text-base text-gray-900">
+      {{ pageTitle }} Configuration
+    </h2>
+    <p class="mt-1 leading-6 text-gray-600 text-sm">
+      This configuration defines all of your {{ pageTitle }} options.
+    </p>
+
+    <div class="mt-10">
+      @if(name === 'ai')
+        <AIForm />
+      @elseif(name === 'analytics')
+        <AnalyticsForm />
+      @elseif(name === 'app')
+        <AppForm />
+      @elseif(name === 'cache')
+        <CacheForm />
+      @elseif(name === 'cli')
+        <CliForm />
+      @elseif(name === 'cloud')
+        <CloudForm />
+      @elseif(name === 'database')
+        <DatabaseForm />
+      @elseif(name === 'dns')
+        <DNSForm />
+      @elseif(name === 'email')
+        <EmailForm />
+      @elseif(name === 'file-system')
+        <FileSystemForm />
+      @elseif(name === 'hashing')
+        <HashingForm />
+      @elseif(name === 'library')
+        <LibraryForm />
+      @elseif(name === 'queue')
+        <QueueForm />
+      @elseif(name === 'search-engine')
+        <SearchEngineForm />
+      @elseif(name === 'security')
+        <SecurityForm />
+      @elseif(name === 'services')
+        <ServicesForm />
+      @elseif(name === 'storage')
+        <StorageForm />
+      @elseif(name === 'team')
+        <TeamsForm />
+      @else
+        <div class="text-center">
+          <div class="h-12 w-12 text-gray-400 dark:text-neutral-200 duration-150 ease-in-out transition-all i-hugeicons-cog-8-tooth" />
+          <h3 class="mt-2 font-semibold text-gray-900 text-sm">
+            Settings <span class="font-bold">{{ pageTitle }}</span> Form not created yet
+          </h3>
+          <p class="mt-1 text-gray-500 text-sm">
+            Please ask the maintenance team to fix.
+          </p>
+        </div>
+      @endif
+    </div>
+  </div>
+</main>
+<style scoped>
+
+</style>

package/resources/components/Dashboard/SettingsHeader.stx

@@ -0,0 +1,88 @@
+<script>
+interface SettingsHeaderProps {
+  currentPath?: string
+}
+
+const { currentPath = '/settings/ai' } = defineProps<SettingsHeaderProps>()
+</script>
+<header class="border-b border-gray-200 dark:border-neutral-600">
+    <!-- Secondary navigation -->
+    <nav class="flex overflow-x-auto py-4">
+      <ul
+        role="list"
+        class="flex flex-none gap-x-6 px-4 sm:px-6 lg:px-8 min-w-full font-semibold leading-6 text-gray-600 text-sm"
+      >
+        <li>
+          <a href="/settings/ai" class="{{ currentPath == '/settings/ai' ? 'text-blue-600' : '' }}">AI</a>
+        </li>
+        <li>
+          <a href="/settings/analytics" class="{{ currentPath == '/settings/analytics' ? 'text-blue-600' : '' }}">Analytics</a>
+        </li>
+        <li>
+          <a href="/settings/app" class="{{ currentPath == '/settings/app' ? 'text-blue-600' : '' }}">App</a>
+        </li>
+        <li>
+          <a href="/settings/cache" class="{{ currentPath == '/settings/cache' ? 'text-blue-600' : '' }}">Cache</a>
+        </li>
+        <li>
+          <a href="/settings/cli" class="{{ currentPath == '/settings/cli' ? 'text-blue-600' : '' }}">CLI</a>
+        </li>
+        <li>
+          <a href="/settings/cloud" class="{{ currentPath == '/settings/cloud' ? 'text-blue-600' : '' }}">Cloud</a>
+        </li>
+        <li>
+          <a href="/settings/database" class="{{ currentPath == '/settings/database' ? 'text-blue-600' : '' }}">Database</a>
+        </li>
+        <li>
+          <a href="/settings/dns" class="{{ currentPath == '/settings/dns' ? 'text-blue-600' : '' }}">DNS</a>
+        </li>
+        <li>
+          <a href="/settings/email" class="{{ currentPath == '/settings/email' ? 'text-blue-600' : '' }}">Email</a>
+        </li>
+        <li>
+          <a href="/settings/file-systems" class="{{ currentPath == '/settings/file-systems' ? 'text-blue-600' : '' }}">File Systems</a>
+        </li>
+        <li>
+          <a href="/settings/hashing" class="{{ currentPath == '/settings/hashing' ? 'text-blue-600' : '' }}">Hashing</a>
+        </li>
+        <li>
+          <a href="/settings/languages" class="{{ currentPath == '/settings/languages' ? 'text-blue-600' : '' }}">Languages</a>
+        </li>
+        <li>
+          <a href="/settings/library" class="{{ currentPath == '/settings/library' ? 'text-blue-600' : '' }}">Library</a>
+        </li>
+        <li>
+          <a href="/settings/native" class="{{ currentPath == '/settings/native' ? 'text-blue-600' : '' }}">Native</a>
+        </li>
+        <li>
+          <a href="/settings/mail" class="{{ currentPath == '/settings/mail' ? 'text-blue-600' : '' }}">Mail</a>
+        </li>
+        <li>
+          <a href="/settings/queue" class="{{ currentPath == '/settings/queue' ? 'text-blue-600' : '' }}">Queue</a>
+        </li>
+        <li>
+          <a href="/settings/search-engine" class="{{ currentPath == '/settings/search-engine' ? 'text-blue-600' : '' }}">Search Engine</a>
+        </li>
+        <li>
+          <a href="/settings/security" class="{{ currentPath == '/settings/security' ? 'text-blue-600' : '' }}">Security</a>
+        </li>
+        <li>
+          <a href="/settings/services" class="{{ currentPath == '/settings/services' ? 'text-blue-600' : '' }}">Services</a>
+        </li>
+        <li>
+          <a href="/settings/storage" class="{{ currentPath == '/settings/storage' ? 'text-blue-600' : '' }}">Storage</a>
+        </li>
+        <li>
+          <a href="/settings/team" class="{{ currentPath == '/settings/team' ? 'text-blue-600' : '' }}">Team</a>
+        </li>
+        <li>
+          <a href="/settings/ui" class="{{ currentPath == '/settings/ui' ? 'text-blue-600' : '' }}">UI</a>
+        </li>
+      </ul>
+    </nav>
+  </header>
+<style>
+.sidebar-links {
+  @apply text-gray-700 hover:text-blue-600 hover:bg-gray-50 flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold
+}
+</style>

package/resources/components/Dashboard/SettingsSidebar.stx

@@ -0,0 +1,234 @@
+<script>
+interface SettingsSidebarProps {
+  currentPath?: string
+}
+
+const { currentPath = 'ai' } = defineProps<SettingsSidebarProps>()
+</script>
+<header class="p-4 sm:p-6 lg:p-8 lg:w-92 border-b border-gray-200 dark:border-neutral-600">
+    <div class="p-4 w-full bg-white rounded-lg shadow-sm">
+      <h3 class="font-semibold text-gray-700 md:text-sm">
+        Stacks Settings
+      </h3>
+      <p class="mt-2 text-gray-500 text-sm">
+        List of available settings
+      </p>
+    </div>
+    <!-- Side navigation -->
+    <nav class="flex flex-1 flex-col mt-4 p-4 w-full bg-white rounded-lg shadow-sm">
+      <ul role="list" class="-mx-2 mt-2 space-y-1">
+        <li>
+          <a href="/settings/ai" class="group sidebar-links flex items-center justify-between {{ currentPath == 'ai' ? 'text-blue-600' : '' }}">
+            <div class="flex gap-x-2 items-center">
+              <div class="h-5 w-5 text-gray-500 dark:text-neutral-200 group-hover:text-gray-700 duration-150 ease-in-out transition i-hugeicons-sparkles"></div>
+              AI
+            </div>
+            <div class="self-end h-5 w-5 text-gray-500 dark:text-neutral-200 group-hover:text-gray-700 duration-150 ease-in-out transition i-hugeicons-arrow-right-01"></div>
+          </a>
+        </li>
+        <li>
+          <a href="/settings/analytics" class="sidebar-links group flex items-center justify-between {{ currentPath == 'analytics' ? 'text-blue-600' : '' }}">
+            <div class="flex gap-x-2 items-center">
+              <div class="h-5 w-5 text-gray-500 dark:text-neutral-200 group-hover:text-gray-700 duration-150 ease-in-out transition i-hugeicons-chart-bar"></div>
+              Analytics
+            </div>
+            <div class="self-end h-5 w-5 text-gray-500 dark:text-neutral-200 group-hover:text-gray-700 duration-150 ease-in-out transition i-hugeicons-arrow-right-01"></div>
+          </a>
+        </li>
+        <li>
+          <a href="/settings/app" class="sidebar-links group flex items-center justify-between {{ currentPath == 'app' ? 'text-blue-600' : '' }}">
+            <div class="flex gap-x-2 items-center">
+              <div class="h-5 w-5 text-gray-500 dark:text-neutral-200 group-hover:text-gray-700 duration-150 ease-in-out transition i-hugeicons-cog-6-tooth"></div>
+              App
+            </div>
+            <div class="self-end h-5 w-5 text-gray-500 dark:text-neutral-200 group-hover:text-gray-700 duration-150 ease-in-out transition i-hugeicons-arrow-right-01"></div>
+          </a>
+        </li>
+        <li>
+          <a href="/settings/billing" class="sidebar-links group flex items-center justify-between {{ currentPath == 'billing' ? 'text-blue-600' : '' }}">
+            <div class="flex gap-x-2 items-center">
+              <div class="h-5 w-5 text-gray-500 dark:text-neutral-200 group-hover:text-gray-700 duration-150 ease-in-out transition i-hugeicons-credit-card"></div>
+              Billing
+            </div>
+            <div class="self-end h-5 w-5 text-gray-500 dark:text-neutral-200 group-hover:text-gray-700 duration-150 ease-in-out transition i-hugeicons-arrow-right-01"></div>
+          </a>
+        </li>
+        <li>
+          <a href="/settings/cache" class="sidebar-links group flex items-center justify-between {{ currentPath == 'cache' ? 'text-blue-600' : '' }}">
+            <div class="flex gap-x-2 items-center">
+              <div class="h-5 w-5 text-gray-500 dark:text-neutral-200 group-hover:text-gray-700 duration-150 ease-in-out transition i-hugeicons-server"></div>
+              Cache
+            </div>
+            <div class="self-end h-5 w-5 text-gray-500 dark:text-neutral-200 group-hover:text-gray-700 duration-150 ease-in-out transition i-hugeicons-arrow-right-01"></div>
+          </a>
+        </li>
+        <li>
+          <a href="/settings/cli" class="sidebar-links group flex items-center justify-between {{ currentPath == 'cli' ? 'text-blue-600' : '' }}">
+            <div class="flex gap-x-2 items-center">
+              <div class="h-5 w-5 text-gray-500 dark:text-neutral-200 group-hover:text-gray-700 duration-150 ease-in-out transition i-hugeicons-command-line"></div>
+              CLI
+            </div>
+            <div class="self-end h-5 w-5 text-gray-500 dark:text-neutral-200 group-hover:text-gray-700 duration-150 ease-in-out transition i-hugeicons-arrow-right-01"></div>
+          </a>
+        </li>
+        <li>
+          <a href="/settings/cloud" class="sidebar-links group flex items-center justify-between {{ currentPath == 'cloud' ? 'text-blue-600' : '' }}">
+            <div class="flex gap-x-2 items-center">
+              <div class="h-5 w-5 text-gray-500 dark:text-neutral-200 group-hover:text-gray-700 duration-150 ease-in-out transition i-hugeicons-cloud"></div>
+              Cloud
+            </div>
+            <div class="self-end h-5 w-5 text-gray-500 dark:text-neutral-200 group-hover:text-gray-700 duration-150 ease-in-out transition i-hugeicons-arrow-right-01"></div>
+          </a>
+        </li>
+        <li>
+          <a href="/settings/database" class="sidebar-links group flex items-center justify-between {{ currentPath == 'database' ? 'text-blue-600' : '' }}">
+            <div class="flex gap-x-2 items-center">
+              <div class="h-5 w-5 text-gray-500 dark:text-neutral-200 group-hover:text-gray-700 duration-150 ease-in-out transition i-hugeicons-circle-stack"></div>
+              Database
+            </div>
+            <div class="self-end h-5 w-5 text-gray-500 dark:text-neutral-200 group-hover:text-gray-700 duration-150 ease-in-out transition i-hugeicons-arrow-right-01"></div>
+          </a>
+        </li>
+        <li>
+          <a href="/settings/dns" class="sidebar-links group flex items-center justify-between {{ currentPath == 'dns' ? 'text-blue-600' : '' }}">
+            <div class="flex gap-x-2 items-center">
+              <div class="h-5 w-5 text-gray-500 dark:text-neutral-200 group-hover:text-gray-700 duration-150 ease-in-out transition i-hugeicons-window"></div>
+              DNS
+            </div>
+            <div class="self-end h-5 w-5 text-gray-500 dark:text-neutral-200 group-hover:text-gray-700 duration-150 ease-in-out transition i-hugeicons-arrow-right-01"></div>
+          </a>
+        </li>
+        <li>
+          <a href="/settings/email" class="sidebar-links group flex items-center justify-between {{ currentPath == 'email' ? 'text-blue-600' : '' }}">
+            <div class="flex gap-x-2 items-center">
+              <div class="h-5 w-5 text-gray-500 dark:text-neutral-200 group-hover:text-gray-700 duration-150 ease-in-out transition i-hugeicons-at-symbol"></div>
+              Email
+            </div>
+            <div class="self-end h-5 w-5 text-gray-500 dark:text-neutral-200 group-hover:text-gray-700 duration-150 ease-in-out transition i-hugeicons-arrow-right-01"></div>
+          </a>
+        </li>
+        <li>
+          <a href="/settings/file-system" class="sidebar-links group flex items-center justify-between {{ currentPath == 'file-system' ? 'text-blue-600' : '' }}">
+            <div class="flex gap-x-2 items-center">
+              <div class="h-5 w-5 text-gray-500 dark:text-neutral-200 group-hover:text-gray-700 duration-150 ease-in-out transition i-hugeicons-folder"></div>
+              File System
+            </div>
+            <div class="self-end h-5 w-5 text-gray-500 dark:text-neutral-200 group-hover:text-gray-700 duration-150 ease-in-out transition i-hugeicons-arrow-right-01"></div>
+          </a>
+        </li>
+        <li>
+          <a href="/settings/hashing" class="sidebar-links group flex items-center justify-between {{ currentPath == 'hashing' ? 'text-blue-600' : '' }}">
+            <div class="flex gap-x-2 items-center">
+              <div class="h-5 w-5 text-gray-500 dark:text-neutral-200 group-hover:text-gray-700 duration-150 ease-in-out transition i-hugeicons-hashtag"></div>
+              Hashing
+            </div>
+            <div class="self-end h-5 w-5 text-gray-500 dark:text-neutral-200 group-hover:text-gray-700 duration-150 ease-in-out transition i-hugeicons-arrow-right-01"></div>
+          </a>
+        </li>
+        <li>
+          <a href="/settings/languages" class="sidebar-links group flex items-center justify-between {{ currentPath == 'languages' ? 'text-blue-600' : '' }}">
+            <div class="flex gap-x-2 items-center">
+              <div class="h-5 w-5 text-gray-500 dark:text-neutral-200 group-hover:text-gray-700 duration-150 ease-in-out transition i-hugeicons-language"></div>
+              Languages
+            </div>
+            <div class="self-end h-5 w-5 text-gray-500 dark:text-neutral-200 group-hover:text-gray-700 duration-150 ease-in-out transition i-hugeicons-arrow-right-01"></div>
+          </a>
+        </li>
+        <li>
+          <a href="/settings/library" class="sidebar-links group flex items-center justify-between {{ currentPath == 'library' ? 'text-blue-600' : '' }}">
+            <div class="flex gap-x-2 items-center">
+              <div class="h-5 w-5 text-gray-500 dark:text-neutral-200 group-hover:text-gray-700 duration-150 ease-in-out transition i-hugeicons-book-open"></div>
+              Library
+            </div>
+            <div class="self-end h-5 w-5 text-gray-500 dark:text-neutral-200 group-hover:text-gray-700 duration-150 ease-in-out transition i-hugeicons-arrow-right-01"></div>
+          </a>
+        </li>
+        <li>
+          <a href="/settings/native" class="sidebar-links group flex items-center justify-between {{ currentPath == 'native' ? 'text-blue-600' : '' }}">
+            <div class="flex gap-x-2 items-center">
+              <div class="h-5 w-5 text-gray-500 dark:text-neutral-200 group-hover:text-gray-700 duration-150 ease-in-out transition i-hugeicons-viewfinder-circle"></div>
+              Native
+            </div>
+            <div class="self-end h-5 w-5 text-gray-500 dark:text-neutral-200 group-hover:text-gray-700 duration-150 ease-in-out transition i-hugeicons-arrow-right-01"></div>
+          </a>
+        </li>
+        <li>
+          <a href="/settings/mail" class="sidebar-links group flex items-center justify-between {{ currentPath == 'mail' ? 'text-blue-600' : '' }}">
+            <div class="flex gap-x-2 items-center">
+              <div class="h-5 w-5 text-gray-500 dark:text-neutral-200 group-hover:text-gray-700 duration-150 ease-in-out transition i-hugeicons-envelope"></div>
+              Mail
+            </div>
+            <div class="self-end h-5 w-5 text-gray-500 dark:text-neutral-200 group-hover:text-gray-700 duration-150 ease-in-out transition i-hugeicons-arrow-right-01"></div>
+          </a>
+        </li>
+        <li>
+          <a href="/settings/queue" class="sidebar-links group flex items-center justify-between {{ currentPath == 'queue' ? 'text-blue-600' : '' }}">
+            <div class="flex gap-x-2 items-center">
+              <div class="h-5 w-5 text-gray-500 dark:text-neutral-200 group-hover:text-gray-700 duration-150 ease-in-out transition i-hugeicons-queue-02"></div>
+              Queue
+            </div>
+            <div class="self-end h-5 w-5 text-gray-500 dark:text-neutral-200 group-hover:text-gray-700 duration-150 ease-in-out transition i-hugeicons-arrow-right-01"></div>
+          </a>
+        </li>
+        <li>
+          <a href="/settings/search-engine" class="sidebar-links group flex items-center justify-between {{ currentPath == 'search-engine' ? 'text-blue-600' : '' }}">
+            <div class="flex gap-x-2 items-center">
+              <div class="h-5 w-5 text-gray-500 dark:text-neutral-200 group-hover:text-gray-700 duration-150 ease-in-out transition i-hugeicons-search-01"></div>
+              Search Engine
+            </div>
+            <div class="self-end h-5 w-5 text-gray-500 dark:text-neutral-200 group-hover:text-gray-700 duration-150 ease-in-out transition i-hugeicons-arrow-right-01"></div>
+          </a>
+        </li>
+        <li>
+          <a href="/settings/security" class="sidebar-links group flex items-center justify-between {{ currentPath == 'security' ? 'text-blue-600' : '' }}">
+            <div class="flex gap-x-2 items-center">
+              <div class="h-5 w-5 text-gray-500 dark:text-neutral-200 group-hover:text-gray-700 duration-150 ease-in-out transition i-hugeicons-shield-check"></div>
+              Security
+            </div>
+            <div class="self-end h-5 w-5 text-gray-500 dark:text-neutral-200 group-hover:text-gray-700 duration-150 ease-in-out transition i-hugeicons-arrow-right-01"></div>
+          </a>
+        </li>
+        <li>
+          <a href="/settings/services" class="sidebar-links group flex items-center justify-between {{ currentPath == 'services' ? 'text-blue-600' : '' }}">
+            <div class="flex gap-x-2 items-center">
+              <div class="h-5 w-5 text-gray-500 dark:text-neutral-200 group-hover:text-gray-700 duration-150 ease-in-out transition i-hugeicons-briefcase"></div>
+              Services
+            </div>
+            <div class="self-end h-5 w-5 text-gray-500 dark:text-neutral-200 group-hover:text-gray-700 duration-150 ease-in-out transition i-hugeicons-arrow-right-01"></div>
+          </a>
+        </li>
+        <li>
+          <a href="/settings/storage" class="sidebar-links group flex items-center justify-between {{ currentPath == 'storage' ? 'text-blue-600' : '' }}">
+            <div class="flex gap-x-2 items-center">
+              <div class="h-5 w-5 text-gray-500 dark:text-neutral-200 group-hover:text-gray-700 duration-150 ease-in-out transition i-hugeicons-circle-stack"></div>
+              Storage
+            </div>
+            <div class="self-end h-5 w-5 text-gray-500 dark:text-neutral-200 group-hover:text-gray-700 duration-150 ease-in-out transition i-hugeicons-arrow-right-01"></div>
+          </a>
+        </li>
+        <li>
+          <a href="/settings/team" class="sidebar-links group flex items-center justify-between {{ currentPath == 'team' ? 'text-blue-600' : '' }}">
+            <div class="flex gap-x-2 items-center">
+              <div class="h-5 w-5 text-gray-500 dark:text-neutral-200 group-hover:text-gray-700 duration-150 ease-in-out transition i-hugeicons-user-group"></div>
+              Team
+            </div>
+            <div class="self-end h-5 w-5 text-gray-500 dark:text-neutral-200 group-hover:text-gray-700 duration-150 ease-in-out transition i-hugeicons-arrow-right-01"></div>
+          </a>
+        </li>
+        <li>
+          <a href="/settings/ui" class="sidebar-links group flex items-center justify-between {{ currentPath == 'ui' ? 'text-blue-600' : '' }}">
+            <div class="flex gap-x-2 items-center">
+              <div class="h-5 w-5 text-gray-500 dark:text-neutral-200 group-hover:text-gray-700 duration-150 ease-in-out transition i-hugeicons-rectangle-group"></div>
+              UI
+            </div>
+            <div class="self-end h-5 w-5 text-gray-500 dark:text-neutral-200 group-hover:text-gray-700 duration-150 ease-in-out transition i-hugeicons-arrow-right-01"></div>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </header>
+<style>
+.sidebar-links {
+  @apply text-gray-700 hover:text-blue-600 hover:bg-gray-50 flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold
+}
+</style>

package/resources/components/Dashboard/Sidebar.stx

@@ -0,0 +1,23 @@
+<!--
+  Stacks Dashboard sidebar.
+
+  The actual sidebar is rendered inline by the dashboard layout
+  (`storage/framework/defaults/views/dashboard/layouts/default.stx`)
+  using the helper at `resources/functions/dashboard/sidebar.ts`. We
+  bypass the component-boundary path because in the STX version this
+  framework ships with, prop bindings on component invocations
+  (`<Sidebar :nav-html="…" />`) silently arrive as undefined regardless
+  of how the expression is shaped — so the layout builds the chunk of
+  HTML server-side and drops it in via raw triple-brace interpolation.
+
+  This file is kept (empty) rather than deleted because the components
+  directory is auto-scanned and a referenced-but-missing component
+  would surface as a runtime error in any view that still does
+  `<Sidebar />` (e.g. the older `DashboardLayout.stx`). An empty
+  template is a no-op render: safe, unobtrusive, and doesn't drag any
+  stale markup into pages that DO use the layout's inline sidebar.
+
+  See the helper module for the SVG icons + section structure + the
+  user-model discovery that wires `Booking`, `Car`, `Roadtrip`, etc.
+  into the Data section automatically.
+-->