Add Sidebar Toggle option and button
This commit is contained in:
parent
8b52cd7f16
commit
3785e5700a
3 changed files with 65 additions and 4 deletions
|
@ -1,13 +1,18 @@
|
|||
---
|
||||
import { APP } from '../config'
|
||||
import { SIDEBARTOP, SIDEBARBOTTOM } from '../tabs'
|
||||
import { SIDEBARTOP, SIDEBARBOTTOM } from '../sidebar'
|
||||
---
|
||||
|
||||
<div class="sidebar">
|
||||
<div class="drag-area"></div>
|
||||
<div class="sidebar-header">
|
||||
<img src="./logo.png">
|
||||
{APP.map(item => (<p>{item.name}</p>))}
|
||||
<div class="sidebar-header-left">
|
||||
<img src="./logo.png">
|
||||
{APP.map(item => (<p>{item.name}</p>))}
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-top">
|
||||
{SIDEBARTOP.map(item => (
|
||||
|
|
|
@ -106,9 +106,10 @@ body {
|
|||
display: grid;
|
||||
grid-template-rows: 50px auto auto;
|
||||
background: var(--SidebarBackground);
|
||||
z-index: 5;
|
||||
.drag-area {
|
||||
position: absolute;
|
||||
width: 280px;
|
||||
width: 200px;
|
||||
height: 74px;
|
||||
app-region: drag;
|
||||
}
|
||||
|
@ -121,8 +122,28 @@ body {
|
|||
}
|
||||
img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-right: 16px;
|
||||
pointer-events: none;
|
||||
align-self: center;
|
||||
}
|
||||
.sidebar-header-left {
|
||||
display: flex;
|
||||
}
|
||||
.sidebar-header-right {
|
||||
margin-inline-start: auto;
|
||||
button {
|
||||
border-radius: 6px;
|
||||
border: none;
|
||||
fill: white;
|
||||
padding: 8px 8px 6px 8px;
|
||||
background: transparent;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
button:hover {
|
||||
background: rgb(255 255 255 / 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
.sidebar-top {
|
||||
|
|
35
public/scripts/toggle.js
Normal file
35
public/scripts/toggle.js
Normal file
|
@ -0,0 +1,35 @@
|
|||
function ToggleSidebar() {
|
||||
document.querySelector('.sidebar').style.width = '0px'
|
||||
document.querySelector('.sidebar').style.padding = '0px'
|
||||
document.querySelector('.sidebar').style.fontSize = '0px'
|
||||
document.querySelector('.sidebar-top').style.display = 'none'
|
||||
document.querySelector('.sidebar-bottom').style.display = 'none'
|
||||
document.querySelector("body > div > div.sidebar > div.sidebar-header > div.sidebar-header-left").style.display = 'none'
|
||||
document.querySelector("body > div > div.sidebar > div.sidebar-header > div.sidebar-header-right").style.position ='fixed'
|
||||
document.querySelector("body > div > div.sidebar > div.sidebar-header > div.sidebar-header-right").style.left = '94px'
|
||||
document.querySelector("body > div > div.sidebar > div.drag-area").style.width = '90px'
|
||||
|
||||
document.querySelector("body > div > div.pages").style.width = '100%'
|
||||
document.querySelector("body > div > div.pages").style.maxWidth = '100%'
|
||||
document.querySelector("body > div > div.pages").style.left = '0px'
|
||||
|
||||
document.querySelector("#sidebar-toggle").setAttribute('onclick', 'ToggleSidebarRe()')
|
||||
}
|
||||
|
||||
function ToggleSidebarRe() {
|
||||
document.querySelector('.sidebar').style.width = '240px'
|
||||
document.querySelector('.sidebar').style.padding = '0px 20px'
|
||||
document.querySelector('.sidebar').style.fontSize = 'inherit'
|
||||
document.querySelector('.sidebar-top').style.display = 'block'
|
||||
document.querySelector('.sidebar-bottom').style.display = 'block'
|
||||
document.querySelector("body > div > div.sidebar > div.sidebar-header > div.sidebar-header-left").style.display = 'flex'
|
||||
document.querySelector("body > div > div.sidebar > div.sidebar-header > div.sidebar-header-right").style.position ='inherit'
|
||||
document.querySelector("body > div > div.sidebar > div.sidebar-header > div.sidebar-header-right").style.left = 'inherit'
|
||||
document.querySelector("body > div > div.sidebar > div.drag-area").style.width = '200px'
|
||||
|
||||
document.querySelector("body > div > div.pages").style.width = 'calc(100% - 280px)'
|
||||
document.querySelector("body > div > div.pages").style.maxWidth = 'calc(100% - 280px)'
|
||||
document.querySelector("body > div > div.pages").style.left = '280px'
|
||||
|
||||
document.querySelector("#sidebar-toggle").setAttribute('onclick', 'ToggleSidebar()')
|
||||
}
|
Reference in a new issue