use router for interfaces page

src/frontend/components/App.vue

@@ -66,14 +66,14 @@
 
                             <!-- interfaces -->
                             <li>
-                                <button @click="tab = 'interfaces'" type="button" :class="[ tab === 'interfaces' ? 'bg-blue-100 text-blue-800 group:text-blue-800 hover:bg-blue-100' : '']" class="w-full text-gray-800 hover:bg-gray-100 group flex gap-x-3 rounded-r-full p-2 mr-2 text-sm leading-6 font-semibold focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600">
-                                    <span class="my-auto">
+                                <SidebarLink :to="{ name: 'interfaces' }">
+                                    <template v-slot:icon>
                                         <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="currentColor" viewBox="0 0 256 256">
                                             <path d="M232,112H136V88h8a16,16,0,0,0,16-16V40a16,16,0,0,0-16-16H112A16,16,0,0,0,96,40V72a16,16,0,0,0,16,16h8v24H24a8,8,0,0,0,0,16H56v32H48a16,16,0,0,0-16,16v32a16,16,0,0,0,16,16H80a16,16,0,0,0,16-16V176a16,16,0,0,0-16-16H72V128H184v32h-8a16,16,0,0,0-16,16v32a16,16,0,0,0,16,16h32a16,16,0,0,0,16-16V176a16,16,0,0,0-16-16h-8V128h32a8,8,0,0,0,0-16ZM112,40h32V72H112ZM80,208H48V176H80Zm128,0H176V176h32Z"></path>
                                         </svg>
-                                    </span>
-                                    <span class="my-auto">Interfaces</span>
-                                </button>
+                                    </template>
+                                    <template v-slot:text>Interfaces</template>
+                                </SidebarLink>
                             </li>
 
                             <!-- network -->
@@ -369,11 +369,6 @@
 
                 </template>
 
-                <!-- interfaces tab -->
-                <InterfacesPage
-                    v-if="tab === 'interfaces'"
-                    :config="config"/>
-
             </div>
 
         </div>
@@ -387,12 +382,10 @@ import MessagesSidebar from "./messages/MessagesSidebar.vue";
 import NomadNetworkSidebar from "./nomadnetwork/NomadNetworkSidebar.vue";
 import ConversationViewer from "./messages/ConversationViewer.vue";
 import DialogUtils from "../js/DialogUtils";
-import InterfacesPage from "./interfaces/InterfacesPage.vue";
 
 export default {
     name: 'App',
     components: {
-        InterfacesPage,
         ConversationViewer,
         NomadNetworkSidebar,
         MessagesSidebar,

src/frontend/components/interfaces/InterfacesPage.vue

@@ -172,7 +172,7 @@
     <div v-if="tab === 'interfaces.add'" class="overflow-y-auto p-2 space-y-2">
 
         <!-- community interfaces -->
-        <div v-if="!isEditingInterface && config.show_suggested_community_interfaces" class="bg-white rounded shadow divide-y divide-gray-200">
+        <div v-if="!isEditingInterface && config != null && config.show_suggested_community_interfaces" class="bg-white rounded shadow divide-y divide-gray-200">
             <div class="flex p-2">
                 <div class="my-auto mr-auto">
                     <div class="font-bold">Community Interfaces</div>
@@ -346,15 +346,13 @@ import Utils from "../../js/Utils";
 
 export default {
     name: 'InterfacesPage',
-    props: {
-        config: Object,
-    },
     data() {
         return {
 
             tab: "interfaces",
             isEditingInterface: false,
 
+            config: null,
             interfaces: {},
             interfaceStats: {},
 
@@ -413,6 +411,7 @@ export default {
     },
     mounted() {
 
+        this.getConfig();
         this.loadInterfaces();
         this.updateInterfaceStats();
         this.loadComports();
@@ -432,6 +431,15 @@ export default {
         onIFACSignatureClick: function(ifacSignature) {
             DialogUtils.alert(ifacSignature);
         },
+        async getConfig() {
+            try {
+                const response = await window.axios.get(`/api/v1/config`);
+                this.config = response.data.config;
+            } catch(e) {
+                // do nothing if failed to load config
+                console.log(e);
+            }
+        },
         async loadInterfaces() {
             try {
 

src/frontend/main.js

@@ -5,6 +5,7 @@ import App from './components/App.vue';
 import AboutPage from "./components/about/AboutPage.vue";
 import SettingsPage from "./components/settings/SettingsPage.vue";
 import NetworkVisualiserPage from "./components/network/NetworkVisualiserPage.vue";
+import InterfacesPage from "./components/interfaces/InterfacesPage.vue";
 
 const router = createRouter({
     history: createWebHashHistory(),
@@ -12,6 +13,7 @@ const router = createRouter({
         { path: '/' },
         { path: '/about', name: "about", component: AboutPage },
         { path: '/settings', name: "settings", component: SettingsPage },
+        { path: '/interfaces', name: "interfaces", component: InterfacesPage },
         { path: '/network-visualiser', name: "network-visualiser", component: NetworkVisualiserPage },
     ],
 })