Update

README.md

@@ -18,7 +18,7 @@ FalixNodes Desktop was developed by Korbs Studio, a FalixNodes Limited contracto
 
 Sadly, the software was [discontinued by Korbs Studio on November 19th of 2022](https://falixnodes.net/blog/sunsetting-apps/). 
 
-This is a bit of a disappointed, as some major features were being applied to v4 of FalixNodes Desktop, which remained in development for way over a year and never reached production. This forth major version was suppose to get amazing features like built-in SFTP manager, VPN(This was drop either way, requested by FalixNodes Limited CEO), better system optimizations, and a command menu. One of the feature did that come to light and was finished during the development phase was the command menu powered by Ninja Keys. 
+This is a bit of a disappointed, as some major features were being applied to v4 of FalixNodes Desktop, which remained in development for way over a year and never reached production. This forth major version was suppose to get amazing features like built-in SFTP manager, VPN(This was drop either way, requested by FalixNodes Limited CEO), better system optimizations, and a command menu. One of the feature did that come to light and was finished during the development phase was the command menu powered by Ninja Keys.
 
 [You can view more about what was suppose to happen in v4.](https://falixnodes.net/blog/sunsetting-apps/#:~:text=to%20webview%20issues.-,The%20Future%20%2D%20v4,-Since%20the%20software)
 
@@ -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 {
+        padding: 12px 0px;
-            margin: 0px 16px;
+        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 {
+        display: none;
+        &.active {display: block}
+        background: #232323;
+    }
 }
 
-.page {
+
-    display: none;
+
-    &.active {display: block}
+// 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",