100 lines
2.1 KiB
Svelte
100 lines
2.1 KiB
Svelte
<script>
|
|
import {Navigate} from 'svelte-router-spa'
|
|
</script>
|
|
|
|
<div class="sidebar">
|
|
<div class="sidebar-container" id="sidebar-nav">
|
|
<div class="inner">
|
|
<Navigate to="/admin/bot-staff" styles="sidebar-link">
|
|
<div class="sidebar-element">
|
|
<i class="fas fa-user-group sidebar-icon"></i>
|
|
<span class="sidebar-text">Bot Staff</span>
|
|
</div>
|
|
</Navigate>
|
|
</div>
|
|
</div>
|
|
<div class="sidebar-container">
|
|
<div class="sidebar-element">
|
|
<Navigate to="/" styles="sidebar-link">
|
|
<i class="sidebar-icon fas fa-home sidebar-icon"></i>
|
|
<span class="sidebar-text">Home</span>
|
|
</Navigate>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.sidebar {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
width: 16.6%;
|
|
background-color: #272727;
|
|
float: left;
|
|
background-size: cover;
|
|
overflow-x: hidden !important;
|
|
min-width: 250px;
|
|
}
|
|
|
|
.sidebar-container {
|
|
margin-bottom: 2%;
|
|
}
|
|
|
|
.inner {
|
|
width: 100%;
|
|
}
|
|
|
|
.sidebar-element {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
cursor: pointer;
|
|
padding: 5px 0 5px 0;
|
|
}
|
|
|
|
.sidebar-element:hover {
|
|
background-color: #121212;
|
|
transition: background-color 0.5s ease;
|
|
}
|
|
|
|
#custom-image {
|
|
max-height: 70px;
|
|
max-width: 90%;
|
|
}
|
|
|
|
.sidebar-text {
|
|
margin-left: 4%;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
#sidebar-nav {
|
|
display: flex;
|
|
flex: 1;
|
|
}
|
|
|
|
@media (max-width: 950px) {
|
|
.sidebar {
|
|
flex-direction: row;
|
|
width: 100%;
|
|
|
|
height: unset;
|
|
min-width: unset;
|
|
|
|
overflow: visible !important;
|
|
}
|
|
|
|
.sidebar-container {
|
|
margin-bottom: unset;
|
|
}
|
|
|
|
.inner {
|
|
display: flex;
|
|
}
|
|
|
|
.sidebar-element {
|
|
width: unset;
|
|
padding: 20px 15px;
|
|
}
|
|
}
|
|
</style> |