Update Tab Configurations
This commit is contained in:
parent
b057de094c
commit
8029d2291d
3 changed files with 18 additions and 23 deletions
|
@ -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>
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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;
|
||||
|
|
Reference in a new issue