mirror of
https://github.com/HeyPuter/puter
synced 2024-11-14 22:06:00 +00:00
feat: collapsible sidebar menu in Dev Center
This commit is contained in:
jelveh
parent
06d5dd763d
commit
1056231004
@ -430,16 +430,45 @@ label {
|
|||||||
left: 0;
|
left: 0;
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
display: block;
|
display: block;
|
||||||
padding: 20px;
|
padding: 30px 16px;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
border-right: 1px solid #e1e1e1;
|
border-right: 1px solid #e1e1e1;
|
||||||
width: 250px;
|
|
||||||
color: rgb(51, 51, 51);
|
color: rgb(51, 51, 51);
|
||||||
font-weight: 400;
|
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 {
|
.sidebar-nav {
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
@ -481,17 +510,22 @@ label {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.main {
|
.main {
|
||||||
width: calc(100% - 265px);
|
width: calc(100% - 50px);
|
||||||
left: 250px;
|
left: 40px;
|
||||||
top: 0px;
|
top: 0px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding: 20px;
|
padding: 12px 20px;
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sidebar-open .main {
|
||||||
|
width: calc(100% - 250px);
|
||||||
|
left: 240px;
|
||||||
|
}
|
||||||
|
|
||||||
.main>section {
|
.main>section {
|
||||||
background-color: white;
|
background-color: white;
|
||||||
box-shadow: 0px 0px 3px #E1E1E1;
|
box-shadow: 0px 0px 3px #E1E1E1;
|
||||||
|
|||||||
@ -48,8 +48,10 @@
|
|||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body class="sidebar-open">
|
||||||
<section class="sidebar">
|
<section class="sidebar open">
|
||||||
|
<div class="sidebar-toggle"></div>
|
||||||
|
<div class="sidebar-content">
|
||||||
<ul class="sidebar-nav disable-user-select">
|
<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 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>
|
<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://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>
|
<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>
|
</ul>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<div class="main">
|
<div class="main">
|
||||||
|
|||||||
@ -2257,3 +2257,8 @@ function enable_window_settings(){
|
|||||||
$(document).on('click', '.reset-deploy', function (e) {
|
$(document).on('click', '.reset-deploy', function (e) {
|
||||||
reset_drop_area();
|
reset_drop_area();
|
||||||
})
|
})
|
||||||
|
|
||||||
|
$(document).on('click', '.sidebar-toggle', function (e) {
|
||||||
|
$('.sidebar').toggleClass('open');
|
||||||
|
$('body').toggleClass('sidebar-open');
|
||||||
|
})
|
||||||
Loading…
Reference in New Issue
Block a user