chore(icon): fix icon in sidebar on desktop devices

ArtalkJS · Aug 29, 2024 · a6b559d · a6b559d
1 parent 67b37b4
commit a6b559d
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 9 deletions.
diff --git a/ui/artalk-sidebar/src/components/AppNavigationDesktop.vue b/ui/artalk-sidebar/src/components/AppNavigationDesktop.vue
@@ -2,11 +2,12 @@
 /**
  * The part of the navigation bar that is displayed on desktop
  */
-import SearchIcon from '../assets/nav-icon-search.svg'
 import { useNavigationMenu } from './AppNavigationMenu'
 
 const nav = useNavigationMenu()
 const { t } = useI18n()
+
+const getIconCSSAttribute = (icon: string) => `url('${icon.replace(/'/g, "\\'")}')`
 </script>
 
 <template>
@@ -18,7 +19,7 @@ const { t } = useI18n()
       :class="{ active: pageName === nav.curtPage }"
       @click="nav.goPage(pageName as string)"
     >
-      <span class="icon" :style="{ background: `url('${page.icon}')` }"></span>
+      <span class="icon" :style="{ backgroundImage: getIconCSSAttribute(page.icon) }"></span>
       {{ t(page.label) }}
     </div>
   </div>
@@ -37,7 +38,7 @@ const { t } = useI18n()
 
       <div v-if="nav.isSearchEnabled" class="item-wrap search-btn" @click="nav.showSearch()">
         <div class="item">
-          <div class="icon" :style="{ background: `url('${SearchIcon}')` }"></div>
+          <div class="icon"></div>
         </div>
       </div>
     </div>
@@ -152,6 +153,10 @@ $colorMain: #8ecee2;
 
     &.search-btn {
       margin-left: auto;
+
+      .icon {
+        background-image: url('@/assets/nav-icon-search.svg');
+      }
     }
 
     .item {

diff --git a/ui/artalk-sidebar/src/components/AppNavigationMenu.ts b/ui/artalk-sidebar/src/components/AppNavigationMenu.ts
@@ -1,11 +1,11 @@
 import { storeToRefs } from 'pinia'
 import { RouteLocation } from 'vue-router'
-import CommentsIcon from '../assets/nav-icon-comments.svg'
-import PagesIcon from '../assets/nav-icon-pages.svg'
-import UsersIcon from '../assets/nav-icon-users.svg'
-import SitesIcon from '../assets/nav-icon-sites.svg'
-import TransferIcon from '../assets/nav-icon-transfer.svg'
-import SettingsIcon from '../assets/nav-icon-settings.svg'
+import CommentsIcon from '@/assets/nav-icon-comments.svg'
+import PagesIcon from '@/assets/nav-icon-pages.svg'
+import UsersIcon from '@/assets/nav-icon-users.svg'
+import SitesIcon from '@/assets/nav-icon-sites.svg'
+import TransferIcon from '@/assets/nav-icon-transfer.svg'
+import SettingsIcon from '@/assets/nav-icon-settings.svg'
 import { useUserStore } from '@/stores/user'
 import { useNavStore } from '@/stores/nav'