Icons

Author: tatevikg1

assets/images/logo-48.png

@@ -11,15 +11,12 @@
         />
       </nav>
     </div>
-
-    <SidebarCapacityCard class="sidebar__bottom" />
   </aside>
 </template>
 
 <script setup>
 import SidebarLogo from './SidebarLogo.vue'
 import SidebarNavSection from './SidebarNavSection.vue'
-import SidebarCapacityCard from './SidebarCapacityCard.vue'
 
 const sections = [
   {
@@ -35,15 +32,15 @@ const sections = [
     id: 'marketing',
     label: 'Marketing',
     items: [
-      { label: 'Campaigns', icon: 'paper-plane', route: '/campaigns', badge: 3 },
+      { label: 'Campaigns', icon: 'plane', route: '/campaigns' },
       { label: 'Templates', icon: 'layout', route: '/templates' },
     ],
   },
   {
     id: 'analytics',
     label: 'Analytics',
     items: [
-      { label: 'Bounces & Reports', icon: 'chart-bar', route: '/reports' },
+      { label: 'Bounces & Reports', icon: 'chart', route: '/reports' },
     ],
   },
   {

assets/vue/App.vue

@@ -11,15 +11,12 @@
         />
       </nav>
     </div>
-
-    <SidebarCapacityCard class="sidebar__bottom" />
   </aside>
 </template>
 
 <script setup>
 import SidebarLogo from './SidebarLogo.vue'
 import SidebarNavSection from './SidebarNavSection.vue'
-import SidebarCapacityCard from './SidebarCapacityCard.vue'
 
 const sections = [
   {
@@ -35,7 +32,7 @@ const sections = [
     id: 'marketing',
     label: 'Marketing',
     items: [
-      { label: 'Campaigns', icon: 'paper-plane', route: '/campaigns', badge: 3 },
+      { label: 'Campaigns', icon: 'plane', route: '/campaigns', badge: 3 },
       { label: 'Templates', icon: 'layout', route: '/templates' },
     ],
   },

assets/vue/AppSidebar.vue

@@ -1,8 +1,11 @@
 <template>
   <RouterLink to="/" class="sidebar-logo">
     <div class="sidebar-logo__mark">
-      <!-- simple mark, swap with an <img> if you have a logo -->
-      <span class="sidebar-logo__dot" />
+      <img
+          class="sidebar-logo__img"
+          :src="logo"
+          alt="Logo"
+      />
     </div>
 
     <div class="sidebar-logo__text">
@@ -19,6 +22,7 @@
 
 <script setup>
 import { RouterLink } from 'vue-router'
+import logo from '../images/logo-48.png'
 
 const props = defineProps({
   name: {
@@ -45,17 +49,15 @@ const props = defineProps({
   width: 32px;
   height: 32px;
   border-radius: 10px;
-  background: linear-gradient(135deg, #4f46e5, #7c3aed);
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
-.sidebar-logo__dot {
-  width: 14px;
-  height: 14px;
-  border-radius: 999px;
-  background: #f9fafb;
+.sidebar-logo__img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
 }
 
 .sidebar-logo__text {

assets/vue/SidebarCapacityCard.vue

@@ -13,13 +13,33 @@ const props = defineProps({
 const icons = {
   users: `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-users text-slate-400 group-hover:text-slate-600" aria-hidden="true"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><path d="M16 3.128a4 4 0 0 1 0 7.744"></path><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><circle cx="9" cy="7" r="4"></circle></svg><span class="font-medium text-sm">`,
 
-  send: `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-send text-slate-400 group-hover:text-slate-600" aria-hidden="true"><path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"></path><path d="m21.854 2.147-10.94 10.939"></path></svg><span class="font-medium text-sm">C`,
+  plane: `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-send text-slate-400 group-hover:text-slate-600" aria-hidden="true"><path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"></path><path d="m21.854 2.147-10.94 10.939"></path></svg><span class="font-medium text-sm">`,
 
   grid: `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-layout-dashboard text-indigo-600" aria-hidden="true"><rect width="7" height="9" x="3" y="3" rx="1"></rect><rect width="7" height="5" x="14" y="3" rx="1"></rect><rect width="7" height="9" x="14" y="12" rx="1"></rect><rect width="7" height="5" x="3" y="16" rx="1"></rect></svg><span class="font-medium text-sm">`,
 
-  lists: `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-list-tree text-slate-400 group-hover:text-slate-600" aria-hidden="true"><path d="M21 12h-8"></path><path d="M21 6H8"></path><path d="M21 18h-8"></path><path d="M3 6v4c0 1.1.9 2 2 2h3"></path><path d="M3 10v6c0 1.1.9 2 2 2h3"></path></svg><span class="font-medium text-sm">`,
+  list: `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-list-tree text-slate-400 group-hover:text-slate-600" aria-hidden="true"><path d="M21 12h-8"></path><path d="M21 6H8"></path><path d="M21 18h-8"></path><path d="M3 6v4c0 1.1.9 2 2 2h3"></path><path d="M3 10v6c0 1.1.9 2 2 2h3"></path></svg><span class="font-medium text-sm">`,
+
+  layout: `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-text text-slate-400 group-hover:text-slate-600" aria-hidden="true"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path><path d="M10 9H8"></path><path d="M16 13H8"></path><path d="M16 17H8"></path></svg><span class="font-medium text-sm">`,
+
+  chart: `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chart-column text-slate-400 group-hover:text-slate-600" aria-hidden="true"><path d="M3 3v16a2 2 0 0 0 2 2h16"></path><path d="M18 17V9"></path><path d="M13 17V5"></path><path d="M8 17v-3"></path></svg>`,
+
+  settings: `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-settings text-slate-400 group-hover:text-slate-600" aria-hidden="true"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"></path><circle cx="12" cy="12" r="3"></circle></svg>`,
+
+  rate: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trending-up" aria-hidden="true"><path d="M16 7h6v6"></path><path d="m22 7-8.5 8.5-5-5L2 17"></path></svg>`,
+
+  info: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-alert" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><line x1="12" x2="12" y1="8" y2="12"></line><line x1="12" x2="12.01" y1="16" y2="16"></line></svg>`,
+
+  notification: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bell" aria-hidden="true"><path d="M10.268 21a2 2 0 0 0 3.464 0"></path><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"></path></svg>`,
+
+  search: `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search absolute left-3 top-1/2 -translate-y-1/2 transition-colors text-slate-400" aria-hidden="true"><path d="m21 21-4.34-4.34"></path><circle cx="11" cy="11" r="8"></circle></svg>`,
+
+  filter: `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-funnel" aria-hidden="true"><path d="M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z"></path></svg>`,
+
+  edit: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-pen" aria-hidden="true"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"></path></svg></button>`,
+
+  delete: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash2 lucide-trash-2" aria-hidden="true"><path d="M10 11v6"></path><path d="M14 11v6"></path><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"></path><path d="M3 6h18"></path><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>`,
+
 
-  templates: `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-text text-slate-400 group-hover:text-slate-600" aria-hidden="true"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path><path d="M10 9H8"></path><path d="M16 13H8"></path><path d="M16 17H8"></path></svg><span class="font-medium text-sm">`,
 };
 
 const svg = computed(() => icons[props.name] || "");

assets/vue/SidebarLogo.vue

@@ -3,13 +3,13 @@
     "@babel/core": "^7.27.4",
     "@babel/preset-env": "^7.27.2",
     "@symfony/webpack-encore": "^5.1.0",
+    "@vue/compiler-sfc": "^3.5.16",
     "babel-loader": "^10.0.0",
     "copy-webpack-plugin": "^12.0.2",
     "file-loader": "^6.0.0",
     "husky": "^9.1.7",
     "vue-loader": "^17.3.1",
-    "vue-template-compiler": "^2.7.14",
-    "webpack": "^5.99.9",
+    "webpack": "5.104.1",
     "webpack-cli": "^6.0.1",
     "webpack-notifier": "^1.15.0"
   },