refactor: make the sidebar logo clickable

src/components/AppSidebar.vue

@@ -14,32 +14,24 @@
     "
   >
     <CSidebarHeader class="border-bottom">
-      <CSidebarBrand>
+      <RouterLink custom to="/" v-slot="{ href, navigate }">
-        <CIcon
+        <CSidebarBrand v-bind="$attrs" as="a" :href="href" @click="navigate">
-          custom-class-name="sidebar-brand-full"
+          <CIcon custom-class-name="sidebar-brand-full" :icon="logo" :height="32" />
-          :icon="logo"
+          <CIcon custom-class-name="sidebar-brand-narrow" :icon="sygnet" :height="32" />
-          :height="32"
-        />
-        <CIcon
-          custom-class-name="sidebar-brand-narrow"
-          :icon="sygnet"
-          :height="32"
-        />
         </CSidebarBrand>
+      </RouterLink>
       <CCloseButton class="d-lg-none" dark @click="$store.commit('toggleSidebar')" />
     </CSidebarHeader>
     <AppSidebarNav />
     <CSidebarFooter class="border-top">
-      <CSidebarToggler
+      <CSidebarToggler class="d-none d-lg-flex" @click="$store.commit('toggleUnfoldable')" />
-        class="d-none d-lg-flex"
-        @click="$store.commit('toggleUnfoldable')"
-      />
     </CSidebarFooter>
   </CSidebar>
 </template>
 
 <script>
 import { computed } from 'vue'
+import { RouterLink } from 'vue-router'
 import { useStore } from 'vuex'
 import { AppSidebarNav } from './AppSidebarNav'
 import { logo } from '@/assets/brand/logo'
@@ -48,6 +40,7 @@ export default {
   name: 'AppSidebar',
   components: {
     AppSidebarNav,
+    RouterLink,
   },
   setup() {
     const store = useStore()