Minimal start

.app/astro/astro.config.ts

@@ -1,4 +1,5 @@
 import { defineConfig } from 'astro/config'
+import mdx from '@astrojs/mdx'
 
 export default defineConfig({
     compressHTML: true,
@@ -6,7 +7,6 @@ export default defineConfig({
     outDir: "../../.build/output/astro",
     cacheDir: "../../build/output/astro-cache/",
     server: {host: false},
-    build: {
+    integrations: [mdx()],
-      format: 'file'
+    build: {format: 'file'}
-    }
 })

.app/astro/src/components/content.astro

@@ -0,0 +1,11 @@
+---
+const AllContent = await Astro.glob('../../../../content/*')
+---
+
+<content>
+    {AllContent.map((component) => (
+        <div id={component.name} class={component.options}>
+          <component.default/>
+        </div>
+    ))}
+</content>

.app/astro/src/components/sidebar.astro

@@ -0,0 +1,9 @@
+---
+const AllTabs = await Astro.glob('../../../../content/*')
+---
+
+<sidebar>
+    {AllTabs.map((tab) =>
+        <tab data-tab={tab.name} class={tab.options}>{tab.name}</tab>
+    )}
+</sidebar>

.app/astro/src/pages/index.astro

@@ -0,0 +1,23 @@
+---
+import '../../configuration.ts'
+
+// App Layout
+import App from '../structure/app.astro'
+
+// Components
+import Sidebar from '../components/sidebar.astro'
+import Content from '../components/content.astro'
+
+// Styles
+import '../styles/body.scss'
+import '../styles/components/content.scss'
+import '../styles/components/sidebar.scss'
+---
+
+<App>
+    <Sidebar/>
+    <Content/>
+    <script>
+        import "../scripts/sidebar.js";
+    </script>
+</App>

.app/astro/src/scripts/sidebar.js

@@ -0,0 +1,24 @@
+// Credit: Tabbed Navigation by Casey Jardin
+// Source: https://codepen.io/alpha1337/pen/mxWBpq
+setTimeout(() => {
+  const _tabs = document.querySelectorAll('[data-tab]')
+  const _content = document.getElementsByClassName('active')
+
+  const toggleContent = function() {
+    if (!this.classList.contains("active")) {
+
+      Array.from(_content).forEach( item => {
+        item.classList.remove('active')
+      })
+
+      this.classList.add('active')
+      let currentTab = this.getAttribute('data-tab'),
+        _tabContent = document.getElementById(currentTab)
+        _tabContent.classList.add('active')
+    }
+  }
+
+  Array.from(_tabs).forEach( item => {
+    item.addEventListener('click', toggleContent)
+  })
+}, 1000)

.app/astro/src/styles/body.scss

@@ -0,0 +1,6 @@
+body {
+    background: #313131;
+    color: white;
+    font-family: Arial, Helvetica, sans-serif;
+    overflow: hidden;
+}

.app/astro/src/styles/components/content.scss

@@ -0,0 +1,10 @@
+content {
+    position: absolute;
+    top: 0px;
+    left: 290px;
+    width: calc(100% - 290px);
+    div {
+        display: none;
+        &.active {display: inherit}
+    }
+}

.app/astro/src/styles/components/sidebar.scss

@@ -0,0 +1,20 @@
+sidebar {
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    width: 250px;
+    height: 100%;
+    background: #161616;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    tab {
+        margin-bottom: 6px;
+        padding: 12px 24px;
+        border-radius: 4px;
+        font-size: 14px;
+        cursor: pointer;
+        &:hover {background: #282828}
+        &.active {background-color: #323232;}
+    }
+}

.app/electron/main/window.ts

@@ -7,7 +7,9 @@ else if (process.env.NODE_ENV === 'production') {var devTools  =false}
 let mainWindow : BrowserWindow
 
 const {TitlebarRespect} = require('electron-titlebar-respect')
-TitlebarRespect({})
+TitlebarRespect({
+    frameLinux: false
+})
 
 module.exports = {
     launch: function() {

.build/devlopment/tsconfig-build.json

@@ -1,10 +1,10 @@
 {
     "extends": "./tsconfig.json",
     "include": [
-        "../../app/electron/main/index.ts",
+        "../../.app/electron/main/index.ts",
-        "../../app/electron/main/window.ts"
+        "../../.app/electron/main/window.ts",
     ],
     "exclude": [
-        "../../app/astro",
+        "../../.app/astro",
     ]
 }

.build/devlopment/tsconfig.json

@@ -6,7 +6,7 @@
     "outDir": "../output/electron",
     "removeComments": true,
     "forceConsistentCasingInFileNames": true,
-    "strict": true,
+    "strict": false,
     "skipLibCheck": true
   }
 }

app/astro/src/pages/index.astro

@@ -1,7 +0,0 @@
----
-import App from '../structure/app.astro'
----
-
-<App>
-    <p>Hello</p>
-</App>

configuration.ts

@@ -57,40 +57,6 @@ export const splash = {
     backgroundColor: "#232323",
 }
 
-//////////////////////
-//     Sidebar      //
-//////////////////////
-export const SIDEBARTOP = [
-    {
-        text: "Dashboard",
-        icon: "wand-magic-sparkles",
-        default: true
-    },
-    {
-        text: "Files",
-        icon: "folder-tree"
-    },
-    {
-        text: "Webview Demo",
-        icon: "globe"
-    },
-    {
-        text: "Webview Demo 2",
-        icon: "globe"
-    },
-    {
-        text: "iFrame Demo",
-        icon: "eye"
-    },
-]
-
-export const SIDEBARBOTTOM = [
-    {
-        text: "Settings",
-        icon: "sliders"
-    }
-]
-
 ///////////////////////////////
 //     Electron Builder      //
 ///////////////////////////////

content/sample.astro

@@ -0,0 +1,4 @@
+---
+export const name = 'Sample'
+export const options = 'active'
+---

package.json

@@ -2,18 +2,22 @@
   "name": "nexus-polestar",
   "version": "0.0.1",
   "license": "AGPL-3.0-or-later",
+  "trustedDependencies": ["electron"],
   "main": ".build/output/electron/app/electron/main/index.js",
   "scripts": {
-    "start": "concurrently -k -r -t -g -n \"yarn tsc\" \"yarn astro:start\" \"wait-on http://localhost:2023 && yarn electron:start\"",
+    "start": "concurrently -k -r \"bun run astro:start\" \"wait-on http://localhost:4321 && bun run electron:start\"",
-    "build": "yarn tsc && yarn astro:build && yarn electron:build",
+    "build": "bun run tsc && bun run astro:build && bun run electron:build",
     "tsc": "tsc -p .build/devlopment/tsconfig-build.json",
-    "astro:start": "astro dev --silent --root ./app/astro/",
+    "astro:start": "astro dev --root ./.app/astro/",
-    "astro:build": "astro build --silent --root ./app/astro/",
+    "astro:build": "astro build --silent --root ./.app/astro/",
     "electron:start": "NODE_ENV=development electron .",
-    "electron:build": "electron-builder --config ./.build/electron-builder.ts",
+    "electron:build": "electron-builder --config ./.build/electron-builder.ts"
-    "update": "yarn upgrade --latest"
+  },
+  "compilerOptions": {
+    "types": ["bun-types"]
   },
   "dependencies": {
+    "@astrojs/mdx": "^1.0.3",
     "astro": "^3.0.12",
     "astro-color-scheme": "^1.1.2",
     "electron-titlebar-respect": "^1.1.2",
@@ -21,8 +25,9 @@
   },
   "devDependencies": {
     "concurrently": "^8.2.1",
-    "electron": "^26.2.0",
+    "electron": "latest",
     "electron-builder": "^24.6.4",
+    "sass": "^1.66.1",
     "wait-on": "^7.0.1"
   }
-}
+}