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

add current page highlight feature

Browse Source
This commit is contained in:
Cédric Famibelle-Pronzola
2025-04-11 07:22:18 +04:00
parent 19fc787f68
commit c7124f89cb
3 changed files with 147 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/styles.css
+61 -1
View File
@@ -90,12 +90,26 @@ img {
font-size: 18px;
font-weight: 500;
transition: background-color 0.2s;
position: relative;
overflow: hidden;
}
.nav-item:hover {
background-color: rgba(0, 0, 0, 0.05);
}
/* Styles pour la page active dans la sidebar */
.nav-item.active {
background-color: rgba(255, 0, 0, 0.08);
font-weight: 600;
color: var(--primary-red);
box-shadow: inset 3px 0 0 var(--primary-red);
}
.nav-item.active i {
color: var(--primary-red);
}
.nav-item i, .nav-item img {
margin-right: 15px;
width: 24px;
@@ -132,6 +146,14 @@ img {
transform: translateX(5px);
}
/* Style pour un tag actif */
.tag-item.active {
background-color: rgba(255, 0, 0, 0.08);
color: var(--primary-red);
font-weight: 600;
box-shadow: inset 3px 0 0 var(--primary-red);
}
.tag-icon {
color: var(--primary-red);
font-size: 0.9em;
@@ -139,10 +161,48 @@ img {
transition: transform 0.2s ease;
}
.tag-item:hover .tag-icon {
.tag-item:hover .tag-icon,
.tag-item.active .tag-icon {
transform: scale(1.5);
}
/* Media queries pour le style actif sur les différentes tailles d'écran */
@media (max-width: 1200px) and (min-width: 1001px) {
.nav-item.active {
background-color: rgba(255, 0, 0, 0.15);
}
.nav-item.active::after {
content: attr(data-title);
position: absolute;
left: 70px;
top: 50%;
transform: translateY(-50%);
background: var(--primary-red);
color: white;
padding: 5px 10px;
border-radius: 4px;
white-space: nowrap;
box-shadow: 0 1px 5px rgba(0,0,0,0.2);
z-index: 100;
}
}
/* Style pour le menu mobile */
.mobile-menu .nav-item.active {
background-color: rgba(255, 0, 0, 0.08);
color: var(--primary-red);
font-weight: 600;
box-shadow: inset 3px 0 0 var(--primary-red);
}
.mobile-menu .tag-item.active {
background-color: rgba(255, 0, 0, 0.08);
color: var(--primary-red);
font-weight: 600;
box-shadow: inset 3px 0 0 var(--primary-red);
}
/* Header */
.header {
display: flex;
includes/mobile-menu.php
+68 -60
View File
@@ -11,73 +11,81 @@
</form>
</div>
<a href="index.php" class="nav-item">
<i class="fas fa-home"></i> Accueil
</a>
<a href="direct.php" class="nav-item">
<i class="fas fa-broadcast-tower"></i> Direct
</a>
<div>
<a href="index.php" class="nav-item <?php echo ($currentPage === 'index.php') ? 'active' : ''; ?>">
<i class="fas fa-home"></i> Accueil
</a>
<a href="direct.php" class="nav-item <?php echo ($currentPage === 'direct.php') ? 'active' : ''; ?>">
<i class="fas fa-broadcast-tower"></i> Direct
</a>
<div class="nav-divider"></div>
<hr class="nav-divider">
<?php
// Afficher les catégories prioritaires
if (defined('PRIORITY_CATEGORIES') && !empty(PRIORITY_CATEGORIES)) {
// Tableau associatif des icônes pour les catégories
$categoryIcons = [
1 => 'fas fa-music', // Musique
5 => 'fas fa-running', // Sport
11 => 'fas fa-globe', // Actualité & Politique
2 => 'fas fa-film', // Films
3 => 'fas fa-video', // Émissions & Séries
4 => 'fas fa-gamepad', // Jeux
6 => 'fas fa-laugh', // Humour
7 => 'fas fa-palette', // Art
8 => 'fas fa-spa', // Bien-être
9 => 'fas fa-tshirt', // Mode
10 => 'fas fa-random', // Divers
12 => 'fas fa-dollar-sign', // Finance
13 => 'fas fa-graduation-cap', // Education
14 => 'fas fa-fist-raised', // Activism
15 => 'fas fa-microscope', // Science & Technology
16 => 'fas fa-paw', // Animals
17 => 'fas fa-child', // Kids
18 => 'fas fa-utensils' // Food
];
<?php
// Afficher les catégories prioritaires
if (defined('PRIORITY_CATEGORIES') && !empty(PRIORITY_CATEGORIES)) {
// Tableau associatif des icônes pour les catégories
$categoryIcons = [
1 => 'fas fa-music', // Musique
5 => 'fas fa-running', // Sport
11 => 'fas fa-globe', // Actualité & Politique
2 => 'fas fa-film', // Films
3 => 'fas fa-video', // Émissions & Séries
4 => 'fas fa-gamepad', // Jeux
6 => 'fas fa-laugh', // Humour
7 => 'fas fa-palette', // Art
8 => 'fas fa-spa', // Bien-être
9 => 'fas fa-tshirt', // Mode
10 => 'fas fa-random', // Divers
12 => 'fas fa-dollar-sign', // Finance
13 => 'fas fa-graduation-cap', // Education
14 => 'fas fa-fist-raised', // Activism
15 => 'fas fa-microscope', // Science & Technology
16 => 'fas fa-paw', // Animals
17 => 'fas fa-child', // Kids
18 => 'fas fa-utensils' // Food
];
foreach (PRIORITY_CATEGORIES as $id => $name) {
$icon = isset($categoryIcons[$id]) ? $categoryIcons[$id] : 'fas fa-folder';
echo '<a href="categories.php?id=' . $id . '" class="nav-item">';
echo '<i class="' . $icon . '"></i> ' . htmlspecialchars($name);
echo '</a>';
foreach (PRIORITY_CATEGORIES as $id => $name) {
$isActive = ($currentPage === 'categories.php' && $currentCategoryId === $id);
$icon = isset($categoryIcons[$id]) ? $categoryIcons[$id] : 'fas fa-folder';
echo '<a href="categories.php?id=' . $id . '" class="nav-item ' . ($isActive ? 'active' : '') . '">';
echo '<i class="' . $icon . '"></i> ' . htmlspecialchars($name);
echo '</a>';
}
}
}
?>
?>
<div class="nav-divider"></div>
<hr class="nav-divider">
</div>
<h3 class="mobile-section-title">Hashtags populaires</h3>
<?php
if (defined('IMPORTANT_TAGS') && !empty(IMPORTANT_TAGS)):
foreach (IMPORTANT_TAGS as $tag):
$encodedTag = urlencode('#' . $tag);
?>
<a href="recherche.php?q=<?php echo $encodedTag; ?>" class="nav-item">
<i class="fas fa-hashtag"></i> <?php echo htmlspecialchars($tag); ?>
</a>
<?php
endforeach;
endif;
?>
<div>
<h3 class="mobile-section-title">Hashtags populaires</h3>
<?php
if (defined('IMPORTANT_TAGS') && !empty(IMPORTANT_TAGS)):
foreach (IMPORTANT_TAGS as $tag):
$encodedTag = urlencode('#' . $tag);
$isActive = ($isTagSearch && strtolower($currentTag) === strtolower($tag));
?>
<a href="recherche.php?q=<?php echo $encodedTag; ?>" class="nav-item <?php echo $isActive ? 'active' : ''; ?>">
<i class="fas fa-hashtag"></i> <?php echo htmlspecialchars($tag); ?>
</a>
<?php
endforeach;
endif;
?>
</div>
<div class="nav-divider"></div>
<hr class="nav-divider">
<h3 class="mobile-section-title">Suivez-nous</h3>
<div class="mobile-social-icons">
<a target="_blank" rel="noreferrer" href="<?php echo FACEBOOK_URL; ?>"><i class="fab fa-facebook icon-facebook"></i></a>
<a target="_blank" rel="noreferrer" href="<?php echo INSTAGRAM_URL; ?>"><i class="fab fa-instagram icon-instagram"></i></a>
<a target="_blank" rel="noreferrer" href="<?php echo TIKTOK_URL; ?>"><i class="fab fa-tiktok icon-tiktok"></i></a>
<a target="_blank" rel="noreferrer" href="<?php echo YOUTUBE_URL; ?>"><i class="fab fa-youtube icon-youtube"></i></a>
<a target="_blank" rel="noreferrer" href="<?php echo X_URL; ?>"><i class="fab fa-x-twitter icon-x"></i></a>
<div>
<h3 class="mobile-section-title">Suivez-nous</h3>
<div class="mobile-social-icons">
<a target="_blank" rel="noreferrer" href="<?php echo FACEBOOK_URL; ?>"><i class="fab fa-facebook icon-facebook"></i></a>
<a target="_blank" rel="noreferrer" href="<?php echo INSTAGRAM_URL; ?>"><i class="fab fa-instagram icon-instagram"></i></a>
<a target="_blank" rel="noreferrer" href="<?php echo TIKTOK_URL; ?>"><i class="fab fa-tiktok icon-tiktok"></i></a>
<a target="_blank" rel="noreferrer" href="<?php echo YOUTUBE_URL; ?>"><i class="fab fa-youtube icon-youtube"></i></a>
<a target="_blank" rel="noreferrer" href="<?php echo X_URL; ?>"><i class="fab fa-x-twitter icon-x"></i></a>
</div>
</div>
</div>
includes/sidebar.php
+15 -4
View File
@@ -4,11 +4,20 @@
<img src="img/logo.png" alt="kaubuntu.re">
</a>
<?php
// Détecter la page courante et ses paramètres
$currentPage = basename($_SERVER['PHP_SELF']);
$currentCategoryId = isset($_GET['id']) ? intval($_GET['id']) : null;
$currentQuery = isset($_GET['q']) ? trim($_GET['q']) : '';
$isTagSearch = !empty($currentQuery) && substr($currentQuery, 0, 1) === '#';
$currentTag = $isTagSearch ? substr($currentQuery, 1) : '';
?>
<nav class="sidebar-nav">
<a href="index.php" class="nav-item" data-title="Accueil">
<a href="index.php" class="nav-item <?php echo ($currentPage === 'index.php') ? 'active' : ''; ?>" data-title="Accueil">
<i class="fas fa-home"></i> <span>Accueil</span>
</a>
<a href="direct.php" class="nav-item" data-title="Direct">
<a href="direct.php" class="nav-item <?php echo ($currentPage === 'direct.php') ? 'active' : ''; ?>" data-title="Direct">
<i class="fas fa-broadcast-tower"></i> <span>Direct</span>
</a>
@@ -40,8 +49,9 @@
];
foreach (PRIORITY_CATEGORIES as $id => $name) {
$isActive = ($currentPage === 'categories.php' && $currentCategoryId === $id);
$icon = isset($categoryIcons[$id]) ? $categoryIcons[$id] : 'fas fa-folder';
echo '<a href="categories.php?id=' . $id . '" class="nav-item" data-title="' . htmlspecialchars($name) . '">';
echo '<a href="categories.php?id=' . $id . '" class="nav-item ' . ($isActive ? 'active' : '') . '" data-title="' . htmlspecialchars($name) . '">';
echo '<i class="' . $icon . '"></i> <span>' . htmlspecialchars($name) . '</span>';
echo '</a>';
}
@@ -58,8 +68,9 @@
if (defined('IMPORTANT_TAGS') && !empty(IMPORTANT_TAGS)):
foreach (IMPORTANT_TAGS as $tag):
$encodedTag = urlencode('#' . $tag);
$isActive = ($isTagSearch && strtolower($currentTag) === strtolower($tag));
?>
<a href="recherche.php?q=<?php echo $encodedTag; ?>" class="tag-item" data-title="<?php echo htmlspecialchars($tag); ?>">
<a href="recherche.php?q=<?php echo $encodedTag; ?>" class="tag-item <?php echo $isActive ? 'active' : ''; ?>" data-title="<?php echo htmlspecialchars($tag); ?>">
<i class="fas fa-hashtag tag-icon"></i> <span><?php echo htmlspecialchars($tag); ?></span>
</a>
<?php