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

Add "Hide" option for Sidebar

Browse source
This commit is contained in:
Korbs 2023-07-11 05:42:51 -04:00
parent 68b7cb79ee
commit 9108bc7321
No known key found for this signature in database
3 changed files with 17 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
astro/components/Sidebar.astro
View file

@ -1,9 +1,9 @@
--- ---
import { APP } from '../config' import { APP } from '../config'
import { SIDEBARTOP, SIDEBARBOTTOM } from '../sidebar' import { SIDEBAR, SIDEBARHEADER, SIDEBARTOP, SIDEBARBOTTOM } from '../sidebar'
--- ---
<div class="sidebar"> {SIDEBAR.map(item => (<div id={item.hide ? "true" : "false"} class="sidebar">
<div class="drag-area"></div> <div class="drag-area"></div>
<div class="sidebar-header"> <div class="sidebar-header">
<div class="sidebar-header-left"> <div class="sidebar-header-left">
@ -11,20 +11,20 @@ import { SIDEBARTOP, SIDEBARBOTTOM } from '../sidebar'
{APP.map(item => (<p>{item.name}</p>))} {APP.map(item => (<p>{item.name}</p>))}
</div> </div>
<div class="sidebar-header-right"> <div class="sidebar-header-right">
<button id="sidebar-toggle" onclick="ToggleSidebar()"><svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M0 96C0 60.7 28.7 32 64 32H448c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zm224 0V416H448V96H224zM88 96c-13.3 0-24 10.7-24 24s10.7 24 24 24h48c13.3 0 24-10.7 24-24s-10.7-24-24-24H88zM64 216c0 13.3 10.7 24 24 24h48c13.3 0 24-10.7 24-24s-10.7-24-24-24H88c-13.3 0-24 10.7-24 24zm24 72c-13.3 0-24 10.7-24 24s10.7 24 24 24h48c13.3 0 24-10.7 24-24s-10.7-24-24-24H88z"/></svg></button> {SIDEBAR.map(item => (<button id="sidebar-toggle" onclick={item.hide ? "ToggleSidebarRe()" : "ToggleSidebar()"}><svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M0 96C0 60.7 28.7 32 64 32H448c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zm224 0V416H448V96H224zM88 96c-13.3 0-24 10.7-24 24s10.7 24 24 24h48c13.3 0 24-10.7 24-24s-10.7-24-24-24H88zM64 216c0 13.3 10.7 24 24 24h48c13.3 0 24-10.7 24-24s-10.7-24-24-24H88c-13.3 0-24 10.7-24 24zm24 72c-13.3 0-24 10.7-24 24s10.7 24 24 24h48c13.3 0 24-10.7 24-24s-10.7-24-24-24H88z"/></svg></button>))}
</div> </div>
</div> </div>
<div class="sidebar-top"> <div class="sidebar-top">
{SIDEBARTOP.map(item => ( {SIDEBARTOP.map(item => (
<li onclick="ws()" data-tab={item.text} class={item.default ? "active" : null}> <li onclick="ws();" 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 ? {item.navigation ?
<div class="loading-indicator"><i class="fa-solid fa-circle-notch fa-spin"></i></div> <div class="loading-indicator"><i class="fa-solid fa-circle-notch fa-spin"></i></div>
<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> : null} </div> : null}
</li> </li>
))} ))}
@ -38,4 +38,4 @@ import { SIDEBARTOP, SIDEBARBOTTOM } from '../sidebar'
</li> </li>
))} ))}
</div> </div>
</div> </div>))}

9
astro/sidebar.ts
View file

@ -1,7 +1,10 @@
// Global Sidebar Options
export const SIDEBAR = [{
hide: false, // Toggle the "Toggle Sidebar" button by default
}]
// Sidebar Header // Sidebar Header
export const SIDEBARHEADER = [ export const SIDEBARHEADER = []
// TODO
]
/// Top tabs of your sidbears /// Top tabs of your sidbears
export const SIDEBARTOP = [ export const SIDEBARTOP = [

4
public/scripts/toggle.js
View file

@ -32,4 +32,6 @@ function ToggleSidebarRe() {
document.querySelector("body > div > div.pages").style.left = '280px' document.querySelector("body > div > div.pages").style.left = '280px'
document.querySelector("#sidebar-toggle").setAttribute('onclick', 'ToggleSidebar()') document.querySelector("#sidebar-toggle").setAttribute('onclick', 'ToggleSidebar()')
} }
setTimeout(() => {if (document.querySelector('.sidebar').getAttribute('id') === 'true') {ToggleSidebar()}else {}}, 0o500)