Korbs/Nexus-Polestar
Archived
1
Fork 0
Code Issues Pull requests Activity

Update Tab Configurations

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

5
astro/components/Sidebar.astro
View file

@ -9,14 +9,15 @@ import { APP, SIDEBARTOP, SIDEBARBOTTOM } from '../config'
</div> </div>
<div class="sidebar-top"> <div class="sidebar-top">
{SIDEBARTOP.map(item => ( {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> <i class={item.icon}></i>
<p>{item.text}</p> <p>{item.text}</p>
{item.navigation ?
<div id="Tab" class="webview-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").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").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> <button onclick='document.querySelector(".active webview").reload()'><i class="fa-solid fa-arrow-rotate-right"></i></button>
</div> </div> : null}
</li> </li>
))} ))}
</div> </div>

16
astro/config.ts
View file

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

20
astro/styles/index.scss
View file

@ -3,7 +3,8 @@
} }
:root { :root {
--accent: #343434; --TabActiveBackground: #8FECFB;
--TabActiveText: black;
} }
body { body {
@ -46,6 +47,7 @@ body {
padding: 0px 20px; padding: 0px 20px;
display: grid; display: grid;
grid-template-rows: 50px auto auto; grid-template-rows: 50px auto auto;
background: rgb(35 35 35 / 75%);
.sidebar-header { .sidebar-header {
display: flex; display: flex;
align-items: center; align-items: center;
@ -82,19 +84,8 @@ body {
background: rgba(51, 51, 51, 0.5); background: rgba(51, 51, 51, 0.5);
} }
li.active { li.active {
background: var(--accent); background: var(--TabActiveBackground);
} color: var(--TabActiveText);
.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;
} }
} }
@ -145,6 +136,7 @@ body {
grid-auto-flow: column; grid-auto-flow: column;
position: absolute; position: absolute;
right: 26px; right: 26px;
background: linear-gradient(90deg, rgba(255,255,255,0) 0%, var(--TabActiveBackground) 5%, var(--TabActiveBackground) 100%);
button { button {
aspect-ratio: 1; aspect-ratio: 1;
height: 32px; height: 32px;