ORGANISATION-KA-INTERNATIONALE/kaubuntu.re
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

reduce menu at 1200px

Browse Source
This commit is contained in:
Cédric Famibelle-Pronzola
2025-04-08 10:21:20 +04:00
parent d8e07e58ee
commit 01a8ebb3cb
2 changed files with 91 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/styles.css
+66
View File
@@ -580,6 +580,72 @@ img {
}
/* Media Queries */
@media (max-width: 1200px) and (min-width: 769px) {
.sidebar {
width: 70px;
}
.main-content {
margin-left: 70px;
width: calc(100% - 70px);
}
.nav-item span,
.tag-item span,
.category-title span {
display: none;
}
.nav-item,
.tag-item {
justify-content: center;
padding: 15px 0;
position: relative;
}
.nav-item i,
.tag-item .tag-dot {
margin-right: 0;
font-size: 20px;
}
/* Tooltip for compact mode */
.nav-item:hover::after,
.tag-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;
}
.category-title {
text-align: center;
padding: 10px 0;
}
.category-title i {
margin: 0 auto;
display: block;
}
.logo {
text-align: center;
padding: 10px 0;
}
.logo img {
height: 30px;
}
}
@media (max-width: 992px) {
.video-grid {
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
index.php
+25 -25
View File
@@ -21,51 +21,51 @@
</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>