admin and vendor backends features

static/js/vendor/vendor-layout-templates.js

@@ -0,0 +1,67 @@
+/**
+ * Vendor Layout Templates
+ * Header and Sidebar specific to Vendor Dashboard
+ */
+
+window.vendorLayoutTemplates = {
+
+    /**
+     * Vendor Header
+     */
+    header: () => `
+        <header class="vendor-header">
+            <div class="header-left">
+                <button @click="toggleMenu()" class="menu-toggle">
+                    <i class="fas fa-bars"></i>
+                </button>
+                <h1 class="header-title">Vendor Dashboard</h1>
+            </div>
+            <div class="header-right">
+                <span class="user-name" x-text="vendor?.name || 'Vendor'"></span>
+                <button @click="confirmLogout()" class="btn-logout">
+                    <i class="fas fa-sign-out-alt"></i> Logout
+                </button>
+            </div>
+        </header>
+    `,
+
+    /**
+     * Vendor Sidebar
+     */
+    sidebar: () => `
+        <aside class="vendor-sidebar" :class="{ 'open': menuOpen }">
+            <nav class="sidebar-nav">
+                <a href="/vendor/dashboard.html"
+                   class="nav-item"
+                   :class="{ 'active': isActive('dashboard') }">
+                    <i class="fas fa-tachometer-alt"></i>
+                    <span>Dashboard</span>
+                </a>
+                <a href="/vendor/products.html"
+                   class="nav-item"
+                   :class="{ 'active': isActive('products') }">
+                    <i class="fas fa-box"></i>
+                    <span>Products</span>
+                </a>
+                <a href="/vendor/orders.html"
+                   class="nav-item"
+                   :class="{ 'active': isActive('orders') }">
+                    <i class="fas fa-shopping-bag"></i>
+                    <span>Orders</span>
+                </a>
+                <a href="/vendor/customers.html"
+                   class="nav-item"
+                   :class="{ 'active': isActive('customers') }">
+                    <i class="fas fa-users"></i>
+                    <span>Customers</span>
+                </a>
+                <a href="/vendor/settings.html"
+                   class="nav-item"
+                   :class="{ 'active': isActive('settings') }">
+                    <i class="fas fa-cog"></i>
+                    <span>Settings</span>
+                </a>
+            </nav>
+        </aside>
+    `
+};