📁 File Manager

Dosya Düzenle: sidebar.php

<?php
$currentPage = basename($_SERVER['PHP_SELF']);
?>

<style>

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

body{
background:#f4f7fb;
overflow-x:hidden;
}

/* Sidebar */

.sidebar{
width:260px;
height:100vh;
background:#0A2647;
position:fixed;
left:0;
top:0;
overflow-y:auto;
color:#fff;
padding:25px;
transition:.35s ease;
z-index:1050;
}

.sidebar h2{
text-align:center;
margin-bottom:35px;
color:#FFD54F;
font-size:28px;
}

.sidebar a{
display:block;
padding:14px 18px;
margin-bottom:8px;
border-radius:10px;
text-decoration:none;
color:#fff;
transition:.3s;
font-size:15px;
}

.sidebar a:hover,
.sidebar a.active{
background:#2C74B3;
}

.sidebar i{
width:24px;
text-align:center;
margin-right:8px;
}

/* Main */

.main{
margin-left:260px;
width:calc(100% - 260px);
min-height:100vh;
transition:.35s;
}

/* Topbar */

.topbar{
height:70px;
background:#fff;
padding:0 25px;
display:flex;
justify-content:space-between;
align-items:center;
box-shadow:0 3px 12px rgba(0,0,0,.08);
position:sticky;
top:0;
z-index:1000;
}

.topbar-left{
display:flex;
align-items:center;
gap:15px;
}

.topbar h3{
margin:0;
font-size:20px;
color:#0A2647;
}

/* Mobile Menu Button */

.menu-btn{
display:none;
width:42px;
height:42px;
border:none;
border-radius:8px;
background:#0A2647;
color:#fff;
font-size:20px;
cursor:pointer;
transition:.3s;
}

.menu-btn:hover{
background:#2C74B3;
}

/* Logout */

.logout{
background:#dc3545;
color:#fff;
padding:10px 18px;
border-radius:8px;
text-decoration:none;
transition:.3s;
}

.logout:hover{
background:#bb2d3b;
color:#fff;
}

/* Content */

.content{
padding:30px;
}

/* Overlay */

.overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.45);
display:none;
z-index:1040;
}

.overlay.show{
display:block;
}

/* Mobile */

@media(max-width:991px){

.sidebar{
left:-270px;
}

.sidebar.show{
left:0;
}

.main{
margin-left:0;
width:100%;
}

.menu-btn{
display:block;
}

.content{
padding:15px;
}

.topbar{
padding:0 15px;
}

.topbar h3{
font-size:17px;
}

.logout{
padding:8px 14px;
font-size:14px;
}

}

</style>

<h2>

Law College

</h2>

<a href="dashboard.php" class="<?= $currentPage=='dashboard.php' ? 'active' : '' ?>">
<i class="fa-solid fa-gauge"></i>
Dashboard
</a>

<a href="students.php" class="<?= $currentPage=='students.php' ? 'active' : '' ?>">
<i class="fa-solid fa-user-graduate"></i>
Students
</a>

<a href="notices.php" class="<?= $currentPage=='notices.php' ? 'active' : '' ?>">
<i class="fa-solid fa-bullhorn"></i>
Notices
</a>

<a href="admission.php" class="<?= $currentPage=='admission.php' ? 'active' : '' ?>">
    <i class="fa-solid fa-user-plus"></i>
    Admission
</a>

<a href="#">
<i class="fa-solid fa-chalkboard-user"></i>
Faculty
</a>

<a href="#">
<i class="fa-solid fa-book"></i>
Library
</a>

<a href="#">
<i class="fa-solid fa-calendar-days"></i>
Attendance
</a>

<a href="#">
<i class="fa-solid fa-file-lines"></i>
Examinations
</a>

<a href="settings.php">
<i class="fa-solid fa-gear"></i>
Settings
</a>

</div>

</button>

<h3>

Welcome,
<?= htmlspecialchars($adminName); ?>

</h3>

</div>

Logout

</a>

</div>

document.addEventListener("DOMContentLoaded",function(){

const sidebar=document.getElementById("sidebar");
const menuBtn=document.getElementById("menuBtn");
const overlay=document.getElementById("overlay");
const icon=menuBtn.querySelector("i");

menuBtn.addEventListener("click",function(){

sidebar.classList.toggle("show");
overlay.classList.toggle("show");

if(sidebar.classList.contains("show")){

icon.classList.remove("fa-bars");
icon.classList.add("fa-xmark");

}else{

icon.classList.remove("fa-xmark");
icon.classList.add("fa-bars");

}

});

overlay.addEventListener("click",function(){

sidebar.classList.remove("show");
overlay.classList.remove("show");

icon.classList.remove("fa-xmark");
icon.classList.add("fa-bars");

});

window.addEventListener("resize",function(){

if(window.innerWidth>991){

sidebar.classList.remove("show");
overlay.classList.remove("show");

icon.classList.remove("fa-xmark");
icon.classList.add("fa-bars");

}

});

</script>

İptal