Put Tabs config in it's own file

astro/components/Sidebar.astro

@@ -1,5 +1,6 @@
 ---
-import { APP, SIDEBARTOP, SIDEBARBOTTOM } from '../config'
+import { APP } from '../config'
+import { SIDEBARTOP, SIDEBARBOTTOM } from '../tabs'
 ---
 
 <div class="sidebar">

astro/tabs.ts

@@ -0,0 +1,36 @@
+/// Top tabs of your sidbears
+export const SIDEBARTOP = [
+    {
+        text: "Dashboard",
+        icon: "fa-solid fa-wand-magic-sparkles",
+        option: "active",
+        default: true
+    },
+    {
+        text: "Files",
+        icon: "fa-solid fa-folder-tree"
+    },
+    {
+        text: "Webview Demo",
+        icon: "fa-solid fa-globe"
+    },
+    {
+        text: "Webview Demo 2",
+        icon: "fa-solid fa-globe",
+        option: "has-navigation",
+        navigation: true
+    },
+    {
+        text: "iFrame Demo",
+        icon: "fa-solid fa-eye",
+    },
+]
+
+/// Bottoms tabs of your sidebar
+export const SIDEBARBOTTOM = [
+    {
+        text: "Settings",
+        page: "Settings",
+        icon: "fa-solid fa-sliders",
+    }
+]