From 1a4991e278aa58904320c043ad7336dd3ccfd7d8 Mon Sep 17 00:00:00 2001
From: KorbsStudio <ks@korbsstudio.com>
Date: Fri, 27 Jan 2023 23:18:17 -0500
Subject: [PATCH] update

---
 astro/components/Sidebar.astro                |  7 ++++
 astro/components/pages/3A.astro               |  1 +
 .../components/sidebar/TabWithControls.astro  | 14 +++++++
 astro/layouts/App.astro                       |  4 ++
 astro/styles/index.scss                       | 38 +++++++++++++++++++
 5 files changed, 64 insertions(+)
 create mode 100644 astro/components/pages/3A.astro
 create mode 100644 astro/components/sidebar/TabWithControls.astro

diff --git a/astro/components/Sidebar.astro b/astro/components/Sidebar.astro
index 7fa6646..33f3ca3 100644
--- a/astro/components/Sidebar.astro
+++ b/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"
diff --git a/astro/components/pages/3A.astro b/astro/components/pages/3A.astro
new file mode 100644
index 0000000..581f113
--- /dev/null
+++ b/astro/components/pages/3A.astro
@@ -0,0 +1 @@
+<webview class="fullview" src="https://notes.korbsstudio.com/nexus-polestar/webview.html"></webview>
\ No newline at end of file
diff --git a/astro/components/sidebar/TabWithControls.astro b/astro/components/sidebar/TabWithControls.astro
new file mode 100644
index 0000000..baf8972
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/astro/layouts/App.astro b/astro/layouts/App.astro
index 5ac5456..a9d99d0 100644
--- a/astro/layouts/App.astro
+++ b/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>
diff --git a/astro/styles/index.scss b/astro/styles/index.scss
index 318211b..21c7ad3 100644
--- a/astro/styles/index.scss
+++ b/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;
+    }
 }
\ No newline at end of file