Update Tab Configurations

This commit is contained in:
KorbsStudio 2023-02-09 17:28:07 -05:00
parent b057de094c
commit 8029d2291d
No known key found for this signature in database
3 changed files with 18 additions and 23 deletions

View file

@ -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>

View file

@ -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",

View file

@ -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;