Update Tab Configurations

astro/components/Sidebar.astro

@@ -9,14 +9,15 @@ import { APP, SIDEBARTOP, SIDEBARBOTTOM } from '../config'
     </div>
     <div class="sidebar-top">
         {SIDEBARTOP.map(item => (
-            <li data-tab={item.text} class={item.option}>
+            <li data-tab={item.text} class={item.default ? "active" : null}>
                 <i class={item.icon}></i>
                 <p>{item.text}</p>
+                {item.navigation ? 
                 <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>
+                </div> : null}
             </li>
         ))}
     </div>

astro/config.ts

@@ -19,20 +19,22 @@ export const SIDEBARTOP = [
     {
         text: "Dashboard",
         icon: "fa-solid fa-wand-magic-sparkles",
-        option: "active"
+        option: "active",
+        default: true
     },
     {
         text: "Files",
-        icon: "fa-solid fa-folder-tree",
+        icon: "fa-solid fa-folder-tree"
+    },
+    {
+        text: "Webview Demo",
+        icon: "fa-solid fa-globe"
     },
     {
         text: "Webview Demo",
         icon: "fa-solid fa-globe",
-    },
-    {
-        text: "Webview Demo",
-        icon: "fa-solid fa-globe",
-        option: "has-navigation"
+        option: "has-navigation",
+        navigation: true
     },
     {
         text: "iFrame Demo",

astro/styles/index.scss

@@ -3,7 +3,8 @@
 }
 
 :root {
-    --accent: #343434;
+    --TabActiveBackground: #8FECFB;
+    --TabActiveText: black;
 }
 
 body {
@@ -46,6 +47,7 @@ body {
     padding: 0px 20px;
     display: grid;
     grid-template-rows: 50px auto auto;
+    background: rgb(35 35 35 / 75%);
     .sidebar-header {
         display: flex;
         align-items: center;
@@ -82,19 +84,8 @@ body {
         background: rgba(51, 51, 51, 0.5);
     }
     li.active {
-        background: var(--accent);
-    }
-    .webview-navigation#Tab {
-        display: none !important;
-    }
-    .has-navigation.active > .webview-navigation#Tab {
-        display: grid !important;
-    }
-    .has-navigation.active p {
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        max-width: 72px;
+        background: var(--TabActiveBackground);
+        color: var(--TabActiveText);
     }
 }
 
@@ -145,6 +136,7 @@ body {
     grid-auto-flow: column;
     position: absolute;
     right: 26px;
+    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, var(--TabActiveBackground) 5%, var(--TabActiveBackground) 100%);
     button {
         aspect-ratio: 1;
         height: 32px;