update

astro/components/Sidebar.astro

@@ -1,5 +1,6 @@
 ---
 import Tab from './sidebar/Tab.astro';
+import TabControls from './sidebar/TabWithControls.astro';
 ---
 
 <div class="sidebar">
@@ -23,6 +24,12 @@ import Tab from './sidebar/Tab.astro';
         Icon="fa-solid fa-globe"
         ></Tab>
 
+        <TabControls
+        Page="3A"
+        Name="Webview Demo"
+        Icon="fa-solid fa-globe"
+        ></TabControls>
+
         <Tab
         Page="4"
         Name="iFrame Demo"

astro/components/pages/3A.astro

@@ -0,0 +1 @@
+<webview class="fullview" src="https://notes.korbsstudio.com/nexus-polestar/webview.html"></webview>

astro/components/sidebar/TabWithControls.astro

@@ -0,0 +1,14 @@
+---
+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/layouts/App.astro

@@ -3,6 +3,7 @@ import Sidebar from '../components/Sidebar.astro';
 import Page1 from '../components/pages/1.md';
 import Page2 from '../components/pages/2.astro';
 import Page3 from '../components/pages/3.astro';
+import Page3A from '../components/pages/3A.astro';
 import Page4 from '../components/pages/4.astro';
 import Settings from '../components/pages/Settings.md';
 import '../styles/index.scss';
@@ -23,6 +24,9 @@ import '../styles/index.scss';
         <div id="3" class="page">
             <Page3 />
         </div>
+        <div id="3A" class="page">
+            <Page3A />
+        </div>
         <div id="4" class="page">
             <Page4 />
         </div>

astro/styles/index.scss

@@ -1,3 +1,7 @@
+* {
+    outline: none;
+}
+
 :root {
     --accent: #343434;
 }
@@ -66,6 +70,12 @@ body {
     li.active {
         background: var(--accent);
     }
+    .has-navigation.active p {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        max-width: 72px;
+    }
 }
 
 // Content
@@ -104,4 +114,32 @@ body {
     button:hover {
         background: var(--accent);
     }
+}
+
+/// Tab
+.active .webview-navigation#Tab {
+    display: grid;
+}
+.webview-navigation#Tab {
+    display: none;
+    grid-auto-flow: column;
+    position: absolute;
+    right: 26px;
+    button {
+        aspect-ratio: 1;
+        height: 32px;
+        width: 32px;
+        color: white;
+        background: #232323;
+        border: none;
+        border-radius: 6px;
+        margin-left: 6px;
+        svg {
+            margin: 0px;
+            font-size: 12px;
+        }
+    }
+    button:hover {
+        background: #4b4b4b;
+    }
 }