From 6da86a226b6ffb9a18db7b4ce90c5806c7bb5c33 Mon Sep 17 00:00:00 2001
From: Hidayatullah Wildan Ghaly Buchary <16521502@std.stei.itb.ac.id>
Date: Sun, 8 Oct 2023 10:52:46 +0700
Subject: [PATCH] feat: add responsive setup SIDEBAR
---
app/views/dashboard/index.php | 11 ++++++--
public/css/dashboard.css | 52 +++++++++++++++++++++++++++++++++++
2 files changed, 61 insertions(+), 2 deletions(-)
diff --git a/app/views/dashboard/index.php b/app/views/dashboard/index.php
index feef9e6..e3e0a08 100644
--- a/app/views/dashboard/index.php
+++ b/app/views/dashboard/index.php
@@ -5,10 +5,17 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Main Menu</title>
<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>
<body>
+ <button class="toggle-sidebar" id="toggle-sidebar">
+ ☰
+ </button>
+
<div class="sidebar">
+ <button class="close-sidebar" id="close-sidebar">
+ ✖
+ </button>
<h2>Darmodar</h2>
<ul>
<li><a href="../challenge/">Challenges</a></li>
@@ -16,7 +23,7 @@
<li><a href="../collection">Collection</a></li>
<li><a href="../achievement">Achievement</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>
</div>
diff --git a/public/css/dashboard.css b/public/css/dashboard.css
index c70e964..a827c00 100644
--- a/public/css/dashboard.css
+++ b/public/css/dashboard.css
@@ -62,6 +62,10 @@ body {
overflow-y: auto;
box-shadow: 3px 0 5px rgba(0, 0, 0, 0.2);
transition: width 0.3s;
+ left: 0px;
+ top: 0px;
+ transition: left 0.3s ease-in-out;
+ z-index: 999;
}
.sidebar h2 {
@@ -104,8 +108,56 @@ body {
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;
+ }
+ }
+
--
GitLab