98 lines
3.5 KiB
Plaintext
98 lines
3.5 KiB
Plaintext
<div class="top-row ps-3 navbar navbar-dark">
|
|
<div class="container-fluid">
|
|
<a class="navbar-brand" href="">VideoStudy</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">
|
|
<nav class="flex-column p-2">
|
|
<div class="nav-item">
|
|
<NavLink class="nav-link custom-nav-link" href="" Match="NavLinkMatch.All">
|
|
<span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> <span class="nav-text">Início</span>
|
|
</NavLink>
|
|
</div>
|
|
<div class="nav-item">
|
|
<NavLink class="nav-link custom-nav-link" href="library">
|
|
<span class="bi bi-folder-fill-nav-menu" aria-hidden="true"></span> <span class="nav-text">Minhas Pastas</span>
|
|
</NavLink>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
|
|
<style>
|
|
/* Forçar visibilidade total ignorando heranças do Bootstrap */
|
|
|
|
.navbar-brand {
|
|
font-size: 1.3rem;
|
|
color: #ffffff !important;
|
|
font-weight: 700;
|
|
padding-left: 1rem;
|
|
}
|
|
|
|
.nav-item {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
/* Usando classe customizada para evitar colisões e garantir especificidade */
|
|
.custom-nav-link {
|
|
color: #ffffff !important;
|
|
background-color: transparent !important;
|
|
font-size: 1.1rem !important;
|
|
font-weight: 500 !important;
|
|
padding: 0.8rem 1.2rem !important;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
text-decoration: none !important;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
/* Forçar cor branca no texto interno explicitamente */
|
|
.custom-nav-link .nav-text {
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
/* Ícones brancos puros */
|
|
.bi {
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
flex-shrink: 0;
|
|
display: inline-block;
|
|
background-size: cover;
|
|
filter: brightness(0) invert(1) !important;
|
|
}
|
|
|
|
.bi-house-door-fill-nav-menu {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.495v3.505a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5z'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
.bi-folder-fill-nav-menu {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-folder-fill' viewBox='0 0 16 16'%3E%3Cpath d='M9.828 3h3.982a2 2 0 0 1 1.992 2.181l-.637 7A2 2 0 0 1 13.174 14H2.825a2 2 0 0 1-1.991-1.819l-.637-7a1.99 1.99 0 0 1 .342-1.31L.5 3a2 2 0 0 1 2-2h3.672a2 2 0 0 1 1.414.586l.828.828A2 2 0 0 0 9.828 3zm-8.322.12C1.72 3.042 1.95 3 2.19 3h5.396l-.707-.707A1 1 0 0 0 6.172 2H2.5a1 1 0 0 0-1 .981l.006.139z'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
/* Hover */
|
|
.custom-nav-link:hover {
|
|
background-color: rgba(255, 255, 255, 0.15) !important;
|
|
}
|
|
|
|
/* Active */
|
|
.custom-nav-link.active {
|
|
background-color: #748ffc !important;
|
|
color: #ffffff !important;
|
|
font-weight: 600 !important;
|
|
}
|
|
|
|
@@media (min-width: 641px) {
|
|
.navbar-toggler {
|
|
display: none;
|
|
}
|
|
.nav-scrollable {
|
|
display: block;
|
|
height: calc(100vh - 4rem);
|
|
overflow-y: auto;
|
|
padding-top: 1rem;
|
|
}
|
|
}
|
|
</style>
|