Update

README.md

@@ -42,6 +42,12 @@ ___
 The following features are planned:
  - Notification System*
  - System Preference Respect**
+ - Components for:
+   - Sidebar
+   - Notifications
+   - Navigation
+   - Overlays
+   - Settings
 
 `*` This is subject to change
 
@@ -52,13 +58,16 @@ ___
 # Working in Nexus Polestar
 ## Building
 The following is required on your workstation:
- - NodeJS
+ - NodeJS v16.12.0 and up
+ - Python 3.10 or up
  - Yarn
- - Python
+ - Visual C++ Redistributable (Windows)
  - Visual Studio (Windows and macOS)
    - Development for C++
  - g++ (Linux)
 
+ > If you're using Windows, please be using Windows 10 or Windows 11. Windows 8.1 or older are not supported by Korbs Studio and Nexus Polestar, older versions may be able to run the application but may run into some issues along the way.
+
 Install Packages:
 ```
 yarn
@@ -82,4 +91,29 @@ The Electron build will use the SH file included(Tested on Linux only) to fix a
 
 ___
 
-*More to come**
+## Support
+If you are having issues with the template, you can either submit an [issue](https://code.korbsstudio.com/KorbsStudio/nexus-polestar/-/issues) or [contact Korbs Studio by email](mailto:support@korbsstudio.com).
+
+> Disclaimer: Korbs Studio does not work for any projects or companies that use this template. So, if you're using a software built on Nexus Polestar, please contact the company or have the company contact Korbs Studio.
+
+___
+
+## Also Check Out:
+ - [Electron FAQ](https://www.electronjs.org/docs/latest/faq)
+ - [Best Practice - Performance](https://www.electronjs.org/docs/latest/tutorial/performance)
+ - [Best Practice - Security](https://www.electronjs.org/docs/latest/tutorial/security)
+ - [Why Astro?](https://docs.astro.build/en/concepts/why-astro/)
+
+## Acknowledgements
+### Frameworks
+ - App built on: [Electron](https://www.electronjs.org) and [Astro](https://astro.build)
+ - Styled with: [Sass](https://sass-lang.com/)
+
+### Packages Used
+ - Distrubting with: [Electron Builder](https://www.electron.build)
+ - For Blur composition effect: [Glasstron Clarity](https://www.npmjs.com/package/glasstron-clarity)
+
+### Scripts
+ - Navigation: [Tabbed Navigation using Vanilla Javascript](https://codepen.io/alpha1337/pen/mxWBpq)
+
+> It's already been made well clear, Nexus Polestar is inspired by FalixNodes Desktop.

astro/components/pages/2.astro

@@ -1 +1 @@
-<h1>Welcome to Page 2</h1>
+<h1>This is second tab</h1>

astro/components/pages/3.astro

@@ -1 +1,7 @@
-<webview class="fullview" src="https://korbsstudio.com/"></webview>
+---
+import WebViewControls from '../webview-navigation/TopBar.astro';
+---
+
+<WebViewControls></WebViewControls>
+
+<webview class="fullview with-controls" src="https://notes.korbsstudio.com/nexus-polestar/webview.html"></webview>

astro/components/webview-navigation/TopBar.astro

@@ -0,0 +1,5 @@
+<div id="TopBar" 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>

astro/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="astro/client" />

astro/layouts/App.astro

@@ -1,10 +1,10 @@
 ---
 import Sidebar from '../components/Sidebar.astro';
-import Page1 from '../components/pages/1.mdx';
+import Page1 from '../components/pages/1.md';
 import Page2 from '../components/pages/2.astro';
 import Page3 from '../components/pages/3.astro';
 import Page4 from '../components/pages/4.astro';
-import Settings from '../components/pages/Settings.mdx';
+import Settings from '../components/pages/Settings.md';
 import '../styles/index.scss';
 ---
 

astro/styles/index.scss

@@ -18,6 +18,7 @@ body {
     border: 4px #232323 solid;
 }
 
+// WebViews and iFrames
 .fullview {
     position: absolute;
     top: 0px;
@@ -26,14 +27,18 @@ body {
     height: 100%;
     border: none;
 }
+.with-controls {
+    top: 44px;
+    height: calc(100% - 44px);
+}
 
+// Sidebar
 .sidebar {
     position: fixed;
     top: 0px;
     left: 0px;
     width: 240px;
     height: 100%;
-    background: #23232305;
     padding: 0px 20px;
     display: grid;
     .sidebar-top {
@@ -46,16 +51,14 @@ body {
     li {
         cursor: pointer;
         color: white;
-        background: transparent;
         display: flex;
         width: 100%;
-        border: none;
         border-radius: 6px;
         margin-bottom: 6px;
         align-items: center;
-        svg {
-            margin: 0px 16px;
-        }
+        padding: 12px 0px;
+        p {margin: 0px}
+        svg {margin: 0px 16px}
     }
     li:hover {
         background: rgba(51, 51, 51, 0.5);
@@ -65,6 +68,7 @@ body {
     }
 }
 
+// Content
 .pages {
     position: absolute;
     top: 0px;
@@ -73,9 +77,31 @@ body {
     max-width: calc(100% - 280px);
     height: 100%;
     background: #232323;
-}
-
-.page {
+    .page {
         display: none;
         &.active {display: block}
+        background: #232323;
+    }
+}
+
+
+
+// Webview Navigation
+/// Top Bar
+.webview-navigation#TopBar {
+    background: black;
+    padding: 6px;
+    cursor: default;
+    button {
+        color: white;
+        background: #202020;
+        border: none;
+        aspect-ratio: 1;
+        width: 32px;
+        border-radius: 6px;
+        cursor: pointer;
+    }
+    button:hover {
+        background: var(--accent);
+    }
 }

package.json

@@ -15,7 +15,7 @@
     "electron-builder": "^23.6.0"
   },
   "dependencies": {
-    "astro": "^1.9.2",
+    "astro": "^2.0.0",
     "electron-is-dev": "^2.0.0",
     "electron-titlebar-respect": "^1.0.0",
     "glasstron-clarity": "^0.1.26",