Skip to content
Snippets Groups Projects
Commit 6da86a22 authored by Hidayatullah Wildan Ghaly Buchary's avatar Hidayatullah Wildan Ghaly Buchary
Browse files

feat: add responsive setup SIDEBAR

parent 6ab031c5
Branches
Tags
No related merge requests found
...@@ -5,10 +5,17 @@ ...@@ -5,10 +5,17 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Main Menu</title> <title>Main Menu</title>
<link rel="stylesheet" href="../../../public/css/dashboard.css"> <link rel="stylesheet" href="../../../public/css/dashboard.css">
<script src="../../../public/js/dashboard.js"></script> <!-- Sementara untuk test --> <script src="../../../public/js/dashboard.js"></script>
</head> </head>
<body> <body>
<button class="toggle-sidebar" id="toggle-sidebar">
&#9776;
</button>
<div class="sidebar"> <div class="sidebar">
<button class="close-sidebar" id="close-sidebar">
&#10006;
</button>
<h2>Darmodar</h2> <h2>Darmodar</h2>
<ul> <ul>
<li><a href="../challenge/">Challenges</a></li> <li><a href="../challenge/">Challenges</a></li>
...@@ -16,7 +23,7 @@ ...@@ -16,7 +23,7 @@
<li><a href="../collection">Collection</a></li> <li><a href="../collection">Collection</a></li>
<li><a href="../achievement">Achievement</a></li> <li><a href="../achievement">Achievement</a></li>
<li><a href="../user-profile">ProfileTemp</a></li> <li><a href="../user-profile">ProfileTemp</a></li>
<li><a href="#" id="logoutLink">LogoutTemp</a><li> <li><a href="#" id="logoutLink">LogoutTemp</a></li>
</ul> </ul>
</div> </div>
......
...@@ -62,6 +62,10 @@ body { ...@@ -62,6 +62,10 @@ body {
overflow-y: auto; overflow-y: auto;
box-shadow: 3px 0 5px rgba(0, 0, 0, 0.2); box-shadow: 3px 0 5px rgba(0, 0, 0, 0.2);
transition: width 0.3s; transition: width 0.3s;
left: 0px;
top: 0px;
transition: left 0.3s ease-in-out;
z-index: 999;
} }
.sidebar h2 { .sidebar h2 {
...@@ -104,8 +108,56 @@ body { ...@@ -104,8 +108,56 @@ body {
transform: scale(1); transform: scale(1);
} }
.toggle-sidebar {
position: fixed;
top: 20px;
left: 10px;
background-color: #192e3a;
color: #fff;
border: none;
font-size: 24px;
padding: 10px;
cursor: pointer;
transition: background-color 0.3s;
z-index: 998;
border-radius: 20%;
}
.close-sidebar {
position: absolute;
right: 10px;
top: 10px;
background-color: transparent;
color: #fff;
border: oldlace;
font-size: 24px;
font-weight: bold;
display: none;
}
.sidebar.open {
left: 0;
}
@media screen and (max-width: 768px) {
.sidebar {
width: 250px;
left: -250;
}
.sidebar:not(.open) {
left: -250px;
}
.close-sidebar {
display: block;
}
.content {
margin-left: 0;
}
}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment