fix reducing menu on video page
This commit is contained in:
@@ -596,10 +596,134 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* Media Queries pour le menu réduit */
|
||||
@media (max-width: 1200px) and (min-width: 1001px) {
|
||||
.sidebar {
|
||||
width: 70px;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
margin-left: 70px;
|
||||
width: calc(100% - 70px);
|
||||
}
|
||||
|
||||
.nav-item span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Masquer complètement la section Hashtags */
|
||||
.category-title,
|
||||
.tag-item {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
justify-content: center;
|
||||
padding: 15px 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-item i {
|
||||
margin-right: 0;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/* Tooltip for compact mode */
|
||||
.nav-item:hover::after {
|
||||
content: attr(data-title);
|
||||
position: absolute;
|
||||
left: 70px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: var(--sidebar-bg);
|
||||
color: var(--text-color);
|
||||
padding: 5px 10px;
|
||||
border-radius: 4px;
|
||||
white-space: nowrap;
|
||||
box-shadow: 0 1px 5px rgba(0,0,0,0.2);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.logo {
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.logo img {
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Message d'erreur */
|
||||
.error-message {
|
||||
text-align: center;
|
||||
padding: 50px 20px;
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Styles pour la barre latérale */
|
||||
.sidebar {
|
||||
width: 250px;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: var(--sidebar-bg);
|
||||
overflow-y: auto;
|
||||
padding: 15px 0;
|
||||
z-index: 100;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.sidebar-nav {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 15px;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
transition: background-color 0.2s;
|
||||
text-decoration: none;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.nav-item:hover {
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.nav-item i, .nav-item img {
|
||||
margin-right: 15px;
|
||||
width: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tag-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 15px;
|
||||
font-size: 16px;
|
||||
text-decoration: none;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.tag-item .tag-dot {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--primary-red);
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: block;
|
||||
padding: 10px 15px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.logo img {
|
||||
height: 40px;
|
||||
}
|
||||
@@ -108,51 +108,51 @@ if (empty($videoData) || isset($videoData['error'])) {
|
||||
</a>
|
||||
|
||||
<nav class="sidebar-nav">
|
||||
<a href="index.php" class="nav-item">
|
||||
<i class="fas fa-home"></i> Accueil
|
||||
<a href="index.php" class="nav-item" data-title="Accueil">
|
||||
<i class="fas fa-home"></i> <span>Accueil</span>
|
||||
</a>
|
||||
<a href="#" class="nav-item">
|
||||
<i class="fas fa-broadcast-tower"></i> Direct
|
||||
<a href="#" class="nav-item" data-title="Direct">
|
||||
<i class="fas fa-broadcast-tower"></i> <span>Direct</span>
|
||||
</a>
|
||||
|
||||
<div class="nav-divider"></div>
|
||||
|
||||
<a href="#" class="nav-item">
|
||||
<i class="fas fa-compass"></i> Explorer
|
||||
<a href="#" class="nav-item" data-title="Explorer">
|
||||
<i class="fas fa-compass"></i> <span>Explorer</span>
|
||||
</a>
|
||||
<a href="#" class="nav-item">
|
||||
<i class="fas fa-globe"></i> Actualité
|
||||
<a href="#" class="nav-item" data-title="Actualité">
|
||||
<i class="fas fa-globe"></i> <span>Actualité</span>
|
||||
</a>
|
||||
<a href="#" class="nav-item">
|
||||
<i class="fas fa-music"></i> Musique
|
||||
<a href="#" class="nav-item" data-title="Musique">
|
||||
<i class="fas fa-music"></i> <span>Musique</span>
|
||||
</a>
|
||||
<a href="#" class="nav-item">
|
||||
<i class="fas fa-monument"></i> Histoire
|
||||
<a href="#" class="nav-item" data-title="Histoire">
|
||||
<i class="fas fa-monument"></i> <span>Histoire</span>
|
||||
</a>
|
||||
<a href="#" class="nav-item">
|
||||
<i class="fas fa-running"></i> Sport
|
||||
<a href="#" class="nav-item" data-title="Sport">
|
||||
<i class="fas fa-running"></i> <span>Sport</span>
|
||||
</a>
|
||||
|
||||
<div class="nav-divider"></div>
|
||||
|
||||
<div class="category-title">
|
||||
<i class="fas fa-hashtag"></i> Hashtags
|
||||
<i class="fas fa-hashtag"></i> <span>Hashtags</span>
|
||||
</div>
|
||||
|
||||
<a href="#" class="tag-item">
|
||||
<div class="tag-dot"></div> Interview
|
||||
<a href="#" class="tag-item" data-title="Interview">
|
||||
<div class="tag-dot"></div> <span>Interview</span>
|
||||
</a>
|
||||
<a href="#" class="tag-item">
|
||||
<div class="tag-dot"></div> Conférence
|
||||
<a href="#" class="tag-item" data-title="Conférence">
|
||||
<div class="tag-dot"></div> <span>Conférence</span>
|
||||
</a>
|
||||
<a href="#" class="tag-item">
|
||||
<div class="tag-dot"></div> Colonialisme
|
||||
<a href="#" class="tag-item" data-title="Colonialisme">
|
||||
<div class="tag-dot"></div> <span>Colonialisme</span>
|
||||
</a>
|
||||
<a href="#" class="tag-item">
|
||||
<div class="tag-dot"></div> La Réunion
|
||||
<a href="#" class="tag-item" data-title="La Réunion">
|
||||
<div class="tag-dot"></div> <span>La Réunion</span>
|
||||
</a>
|
||||
<a href="#" class="tag-item">
|
||||
<div class="tag-dot"></div> Afrique
|
||||
<a href="#" class="tag-item" data-title="Afrique">
|
||||
<div class="tag-dot"></div> <span>Afrique</span>
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user