gitea/Abiyasa_Putra_Prasetya
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add responsive sidebar for manage question on role teacher

Browse Source
This commit is contained in:
abiyasa05 2025-05-29 12:17:08 +07:00
parent e0fdf16c34
commit 5e21a0b17a
1 changed files with 50 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
Penilaian Literasi/iClOP-V2/resources/views/literacy/teacher/questions/index.blade.php
View File

@ -18,6 +18,32 @@
padding: 20px; padding: 20px;
} }
@media (max-width: 768px) {
#sidebarMenu {
position: fixed;
top: 0;
left: 0;
width: 245px;
height: 100vh;
background-color: #fff;
z-index: 1040;
transform: translateX(-100%);
transition: transform 0.3s ease-in-out;
display: block !important;
box-shadow: 2px 0 5px rgba(0,0,0,0.1);
overflow-y: auto;
padding-top: 60px;
}
#sidebarMenu.active {
transform: translateX(0);
}
#toggleSidebar {
position: relative;
z-index: 1051;
}
}
/* NAV LINK */ /* NAV LINK */
.nav-link { .nav-link {
@ -186,40 +212,40 @@
<body> <body>
<!-- NAVBAR --> <!-- NAVBAR -->
<nav class="navbar navbar-expand-lg" style="background-color: #FEFEFE;"> <nav class="navbar navbar-expand-lg px-4" style="background-color: #FEFEFE;">
<div class="container-fluid"> <div class="container d-flex justify-content-between align-items-center">
<!-- <a class="navbar-brand" href="#">Navbar</a> -->
<img src={{asset("./images/logo.png")}} alt="logo" width="104" height="65"> <!-- Hamburger Toggle - Kiri (hanya tampil di mobile) -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" <button id="toggleSidebar" class="btn btn-primary d-md-none">
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" <i class="fas fa-bars"></i>
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button> </button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Logo - Tengah di desktop, kanan di mobile -->
<img src="{{ asset('./images/logo.png') }}" alt="logo" width="104" height="65" class="order-md-1 order-2 ms-auto" id="logoResponsive">
<!-- Menu Desktop -->
<div class="collapse navbar-collapse order-md-2 order-3" id="navbarSupportedContent">
<div class="mx-auto"> <div class="mx-auto">
<ul class="navbar-nav mb-2 mb-lg-0 justify-content-center"> <ul class="navbar-nav mb-2 mb-lg-0 justify-content-center">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link active" aria-current="page" href="/dashboard-student">Dashboard <a class="nav-link active" aria-current="page" href="/dashboard-student">Dashboard Teacher</a>
Teacher</a>
</li> </li>
</ul> </ul>
</div> </div>
<div class="dropdown"> <div class="dropdown">
<p style="margin-top: 10px; margin-right: 10px;">{{auth()->user()->name}} <p style="margin-top: 10px; margin-right: 10px;">
{{ auth()->user()->name }}
<img src="{{ asset('./images/Group.png') }}" alt="Group" <img src="{{ asset('./images/Group.png') }}" alt="Group"
style="height: 50px; margin-right: 10px;"> style="height: 50px; margin-right: 10px;">
<i class="fas fa-chevron-down" style="color: #0079FF;"></i> <i class="fas fa-chevron-down" style="color: #0079FF;"></i>
<div class="dropdown-content" id="dropdownContent"> <div class="dropdown-content" id="dropdownContent">
<form id="logout-form" action="{{ route('logout') }}" method="POST"> <form id="logout-form" action="{{ route('logout') }}" method="POST">
@csrf @csrf
<a href="#" <a href="#" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">Logout</a>
onclick="event.preventDefault(); document.getElementById('logout-form').submit();">Logout</a>
</form> </form>
</div> </div>
</p> </p>
</div> </div>
<!-- <button class="btn btn-primary custom-button-sign-up" onclick="window.location.href='register.html'">Sign Up</button> -->
</div> </div>
</div> </div>
</nav> </nav>
@ -228,7 +254,7 @@
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
<!-- SIDEBAR --> <!-- SIDEBAR -->
<nav class="col-md-2 d-none d-md-block sidebar sidebar-right-shadow"> <nav id="sidebarMenu" class="col-md-2 d-none d-md-block sidebar sidebar-right-shadow">
<div class="sidebar-sticky" style="margin-top: 20px;"> <div class="sidebar-sticky" style="margin-top: 20px;">
<ul class="nav flex-column"> <ul class="nav flex-column">
<li class="nav-item" style="margin-bottom: 40px;"> <li class="nav-item" style="margin-bottom: 40px;">
@ -437,6 +463,13 @@
</div> </div>
</div> </div>
<script>
document.getElementById('toggleSidebar').addEventListener('click', function () {
var sidebar = document.getElementById('sidebarMenu');
sidebar.classList.toggle('active');
});
</script>
<script> <script>
document.addEventListener("DOMContentLoaded", function () { document.addEventListener("DOMContentLoaded", function () {
document.querySelectorAll(".addOption").forEach(function (btn) { document.querySelectorAll(".addOption").forEach(function (btn) {