mirrors/puter
1
0
Fork 0
mirror of https://github.com/HeyPuter/puter synced 2024-11-14 22:06:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: collapsible sidebar menu in Dev Center

Browse Source
This commit is contained in:
jelveh 2024-11-03 20:50:46 -08:00
parent 06d5dd763d
commit 1056231004
3 changed files with 64 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/dev-center/css/style.css
View File

@ -430,16 +430,45 @@ label {
left: 0;
z-index: 1000;
display: block;
padding: 20px;
padding: 30px 16px;
overflow-x: hidden;
overflow-y: auto;
background-color: white;
border-right: 1px solid #e1e1e1;
width: 250px;
color: rgb(51, 51, 51);
font-weight: 400;
width: 25px;
}
.sidebar .sidebar-content{
display: none;
}
.sidebar.open{
width: 250px;
}
.sidebar.open .sidebar-content{
display: block;
}
.sidebar-toggle{
display: block;
width: 10px;
height: 10px;
position: absolute;
right: 0;
top: 0;
padding: 10px;
background-size: 15px;
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg%20enable-background%3D%22new%200%200%2024%2024%22%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m3%2023-3-3%208-8-8-8%203-3%2011%2011zm10%200-3-3%208-8-8-8%203-3%2011%2011z%22%2F%3E%3C%2Fsvg%3E");
opacity: 0.3;
}
.open .sidebar-toggle{
background-image: url("data:image/svg+xml,%3Csvg%20enable-background%3D%22new%200%200%2024%2024%22%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m21%201%203%203-8%208%208%208-3%203-11-11zm-10%200%203%203-8%208%208%208-3%203-11-11z%22%2F%3E%3C%2Fsvg%3E");
}
.sidebar-toggle:hover{
opacity: 1;
}
.sidebar-nav {
padding-left: 0;
list-style: none;
@ -481,17 +510,22 @@ label {
}
.main {
width: calc(100% - 265px);
left: 250px;
width: calc(100% - 50px);
left: 40px;
top: 0px;
position: absolute;
box-sizing: border-box;
padding: 20px;
padding: 12px 20px;
padding-right: 0;
display: flex;
flex-direction: column;
}
.sidebar-open .main {
width: calc(100% - 250px);
left: 240px;
}
.main>section {
background-color: white;
box-shadow: 0px 0px 3px #E1E1E1;

7
src/dev-center/index.html
View File

@ -48,8 +48,10 @@
</style>
</head>
<body>
<section class="sidebar">
<body class="sidebar-open">
<section class="sidebar open">
<div class="sidebar-toggle"></div>
<div class="sidebar-content">
<ul class="sidebar-nav disable-user-select">
<li class="tab-btn active" data-tab="apps">My Apps<span class="app-count"></span></li>
<li class="tab-btn" data-tab="payout-method" style="display:none;">Payout Method</li>
@ -67,6 +69,7 @@
<li><a href="https://x.com/HeyPuter" class="social-link" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-twitter-x" viewBox="0 0 16 16"> <path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z"/> </svg></a></li>
<li><a href="https://reddit.com/r/puter" class="social-link" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-reddit" viewBox="0 0 16 16"> <path d="M6.167 8a.83.83 0 0 0-.83.83c0 .459.372.84.83.831a.831.831 0 0 0 0-1.661m1.843 3.647c.315 0 1.403-.038 1.976-.611a.23.23 0 0 0 0-.306.213.213 0 0 0-.306 0c-.353.363-1.126.487-1.67.487-.545 0-1.308-.124-1.671-.487a.213.213 0 0 0-.306 0 .213.213 0 0 0 0 .306c.564.563 1.652.61 1.977.61zm.992-2.807c0 .458.373.83.831.83s.83-.381.83-.83a.831.831 0 0 0-1.66 0z"/> <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.828-1.165c-.315 0-.602.124-.812.325-.801-.573-1.9-.945-3.121-.993l.534-2.501 1.738.372a.83.83 0 1 0 .83-.869.83.83 0 0 0-.744.468l-1.938-.41a.2.2 0 0 0-.153.028.2.2 0 0 0-.086.134l-.592 2.788c-1.24.038-2.358.41-3.17.992-.21-.2-.496-.324-.81-.324a1.163 1.163 0 0 0-.478 2.224q-.03.17-.029.353c0 1.795 2.091 3.256 4.669 3.256s4.668-1.451 4.668-3.256c0-.114-.01-.238-.029-.353.401-.181.688-.592.688-1.069 0-.65-.525-1.165-1.165-1.165"/> </svg></a></li>
</ul>
</div>
</section>
<div class="main">

5
src/dev-center/js/dev-center.js
View File

@ -2257,3 +2257,8 @@ function enable_window_settings(){
$(document).on('click', '.reset-deploy', function (e) {
reset_drop_area();
})
$(document).on('click', '.sidebar-toggle', function (e) {
$('.sidebar').toggleClass('open');
$('body').toggleClass('sidebar-open');
})