Add and apply the configuration file

astro/components/SettingsSidebar.astro

@@ -0,0 +1,46 @@
+---
+import Tab from './sidebar/Tab.astro'
+import TabControls from './sidebar/TabWithControls.astro'
+---
+
+<div class="settings-sidebar">
+    <div class="settings-sidebar-top">
+        <Tab
+        Page="1"
+        Name="Welcome"
+        Icon="fa-solid fa-wand-magic-sparkles"
+        Default="active" // This selects the tab by default
+        ></Tab>
+
+        <Tab
+        Page="2"
+        Name="Files"
+        Icon="fa-solid fa-folder-tree"
+        ></Tab>
+
+        <Tab
+        Page="3"
+        Name="Webview Demo"
+        Icon="fa-solid fa-globe"
+        ></Tab>
+
+        <TabControls
+        Page="3A"
+        Name="Webview Demo"
+        Icon="fa-solid fa-globe"
+        ></TabControls>
+
+        <Tab
+        Page="4"
+        Name="iFrame Demo"
+        Icon="fa-solid fa-eye"
+        ></Tab>
+    </div>
+    <div class="settings-sidebar-bottom">
+        <Tab
+        Page="5"
+        Name="Settings"
+        Icon="fa-solid fa-sliders"
+        ></Tab>
+    </div>
+</div>

astro/components/Sidebar.astro

@@ -1,46 +1,36 @@
 ---
-import Tab from './sidebar/Tab.astro';
+import { APP, SIDEBARTOP, SIDEBARBOTTOM } from '../config'
-import TabControls from './sidebar/TabWithControls.astro';
 ---
 
 <div class="sidebar">
+    <div class="sidebar-header">
+        <img src="./logo.png">
+        {APP.map(item => (<p>{item.name}</p>))}
+    </div>
     <div class="sidebar-top">
-        <Tab
+        {SIDEBARTOP.map(item => (
-        Page="1"
+            <li data-tab={item.text} class={item.option}>
-        Name="Welcome"
+                <i class={item.icon}></i>
-        Icon="fa-solid fa-wand-magic-sparkles"
+                <p>{item.text}</p>
-        Default="active" // This selects the tab by default
+                <div id="Tab" class="webview-navigation">
-        ></Tab>
+                    <button onclick='document.querySelector(".active webview").goBack()'><i class="fa-solid fa-arrow-left-long"></i></button>
-
+                    <button onclick='document.querySelector(".active webview").goForward()'><i class="fa-solid fa-arrow-right-long"></i></button>
-        <Tab
+                    <button onclick='document.querySelector(".active webview").reload()'><i class="fa-solid fa-arrow-rotate-right"></i></button>
-        Page="2"
+                </div>
-        Name="Files"
+            </li>
-        Icon="fa-solid fa-folder-tree"
+        ))}
-        ></Tab>
-
-        <Tab
-        Page="3"
-        Name="Webview Demo"
-        Icon="fa-solid fa-globe"
-        ></Tab>
-
-        <TabControls
-        Page="3A"
-        Name="Webview Demo"
-        Icon="fa-solid fa-globe"
-        ></TabControls>
-
-        <Tab
-        Page="4"
-        Name="iFrame Demo"
-        Icon="fa-solid fa-eye"
-        ></Tab>
     </div>
     <div class="sidebar-bottom">
-        <Tab
+        {SIDEBARBOTTOM.map(item => (
-        Page="5"
+            <li data-tab={item.page} class={item.class}>
-        Name="Settings"
+                <i class={item.text}></i>
-        Icon="fa-solid fa-sliders"
+                <p>{item.text}</p>
-        ></Tab>
+                <div id="Tab" class="webview-navigation">
+                    <button onclick='document.querySelector(".active webview").goBack()'><i class="fa-solid fa-arrow-left-long"></i></button>
+                    <button onclick='document.querySelector(".active webview").goForward()'><i class="fa-solid fa-arrow-right-long"></i></button>
+                    <button onclick='document.querySelector(".active webview").reload()'><i class="fa-solid fa-arrow-rotate-right"></i></button>
+                </div>
+            </li>
+        ))}
     </div>
 </div>

astro/components/pages/Settings.astro

@@ -0,0 +1,5 @@
+---
+import SettingsSidebar from '../SettingsSidebar.astro'
+---
+
+<SettingsSidebar />

astro/components/pages/Settings.md

@@ -1,14 +0,0 @@
-# Settings
-This template will feature many more components later this year to make it more configurable for developers. Future components will contain a variety of settings together with scripts. However, work on these has not yet commenced.
-
-The following components are planned:
- - Personilzation:
-   - Theme
-   - Color Scheme
-   - Blur Toggle
- - Notifications
-   - Theme
-   - Sound
- - System:
-   - Power Saving (Windows and macOS only)
-   - Hardware Acceleration*

astro/components/pages/Tab3.astro

@@ -1,5 +1,5 @@
 ---
-import WebViewControls from '../webview-navigation/TopBar.astro';
+import WebViewControls from '../webview-navigation/TopBar.astro'
 ---
 
 <WebViewControls></WebViewControls>

astro/components/sidebar/Tab.astro

@@ -1,9 +0,0 @@
----
-const { Default, Name, Icon, Page } = Astro.props;
----
-
-
-<li data-tab={Page} class=`sidebar-tab ${Default}`>
-    <i class={Icon}></i>
-    <p>{Name}</p>
-</li>

astro/components/sidebar/TabWithControls.astro

@@ -1,14 +0,0 @@
----
-const { Default, Name, Icon, Page } = Astro.props;
----
-
-
-<li data-tab={Page} class=`sidebar-tab has-navigation ${Default}`>
-    <i class={Icon}></i>
-    <p>{Name}</p>
-    <div id="Tab" class="webview-navigation">
-        <button onclick='document.querySelector(".active webview").goBack()'><i class="fa-solid fa-arrow-left-long"></i></button>
-        <button onclick='document.querySelector(".active webview").goForward()'><i class="fa-solid fa-arrow-right-long"></i></button>
-        <button onclick='document.querySelector(".active webview").reload()'><i class="fa-solid fa-arrow-rotate-right"></i></button>
-    </div>
-</li>

astro/config.ts

@@ -0,0 +1,41 @@
+export const APP = [{
+    name: "App Name",
+    website: "https://mycompany.net/",
+    support: "https://mycompany.net/help/",
+    sourcecode: "https://github.com/company/app-name"
+}]
+
+// Top tabs of your sidbear
+export const SIDEBARTOP = [
+    {
+        text: "Dashboard",
+        icon: "fa-solid fa-wand-magic-sparkles",
+        option: "active"
+    },
+    {
+        text: "Files",
+        icon: "fa-solid fa-folder-tree",
+    },
+    {
+        text: "Webview Demo",
+        icon: "fa-solid fa-globe",
+    },
+    {
+        text: "Webview Demo",
+        icon: "fa-solid fa-globe",
+        option: "has-navigation"
+    },
+    {
+        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",
+    }
+]

astro/layouts/App.astro

@@ -1,12 +1,12 @@
 ---
-import Sidebar from '../components/Sidebar.astro';
+import Sidebar from '../components/Sidebar.astro'
-import Page1 from '../components/pages/1.md';
+import Dashboard from '../components/pages/Dashboard.md'
-import Page2 from '../components/pages/2.astro';
+import Tab2 from '../components/pages/Tab2.astro'
-import Page3 from '../components/pages/3.astro';
+import Tab3 from '../components/pages/Tab3.astro'
-import Page3A from '../components/pages/3A.astro';
+import Tab3A from '../components/pages/Tab3A.astro'
-import Page4 from '../components/pages/4.astro';
+import Tab4 from '../components/pages/Tab4.astro'
-import Settings from '../components/pages/Settings.md';
+import Settings from '../components/pages/Settings.astro'
-import '../styles/index.scss';
+import '../styles/index.scss'
 ---
 
 <script src="./navigation.js" crossoarigin="anonymous"></script>
@@ -15,24 +15,13 @@ import '../styles/index.scss';
 <div class="content">
     <Sidebar />
     <div class="pages">
-        <div id="1" class="page active">
+        <div id="Dashboard" class="page active"><Dashboard /></div>
-            <Page1 />
+        <div id="Files" class="page"><Tab2 /></div>
-        </div>
+        <div id="Webview Demo" class="page"><Tab3 /></div>
-        <div id="2" class="page">
+        <div id="Webview Demo" class="page"><Tab3A /></div>
-            <Page2 />
+        <div id="iFrame Demo" class="page"><Tab4 /></div>
-        </div>
+        
-        <div id="3" class="page">
+        <div id="Settings" class="page"><Settings /></div>
-            <Page3 />
-        </div>
-        <div id="3A" class="page">
-            <Page3A />
-        </div>
-        <div id="4" class="page">
-            <Page4 />
-        </div>
-        <div id="5" class="page">
-            <Settings />
-        </div>
     </div>
 </div>