refactor: include mobile menu
This commit is contained in:
+42
-35
@@ -1,42 +1,49 @@
|
|||||||
|
<!-- Menu mobile (masqué par défaut) -->
|
||||||
<div class="mobile-menu">
|
<div class="mobile-menu">
|
||||||
<div class="mobile-menu-header">
|
<button class="mobile-menu-close">
|
||||||
<div class="logo">
|
<i class="fas fa-times"></i>
|
||||||
<a href="index.php">
|
</button>
|
||||||
<img src="img/logo.png" alt="Kaubuntu.re">
|
|
||||||
</a>
|
<div class="search-container">
|
||||||
</div>
|
<form action="search.php" method="get">
|
||||||
<button class="mobile-menu-close">
|
<input type="text" name="q" placeholder="Recherche">
|
||||||
<i class="fas fa-times"></i>
|
<button type="submit"><i class="fas fa-search"></i></button>
|
||||||
</button>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<nav class="mobile-menu-nav">
|
<a href="index.php" class="nav-item">
|
||||||
<ul>
|
<i class="fas fa-home"></i> Accueil
|
||||||
<li><a href="index.php"><i class="fas fa-home"></i> Accueil</a></li>
|
</a>
|
||||||
<li><a href="categories.php"><i class="fas fa-th-large"></i> Catégories</a></li>
|
<a href="#" class="nav-item">
|
||||||
<li><a href="channels.php"><i class="fas fa-users"></i> Chaînes</a></li>
|
<i class="fas fa-broadcast-tower"></i> Direct
|
||||||
<li><a href="about.php"><i class="fas fa-info-circle"></i> À propos</a></li>
|
</a>
|
||||||
<li><a href="contact.php"><i class="fas fa-envelope"></i> Contact</a></li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<div class="mobile-menu-section">
|
<div class="nav-divider"></div>
|
||||||
<h3>Catégories populaires</h3>
|
|
||||||
<ul>
|
|
||||||
<li><a href="categories.php?id=1">Technologie</a></li>
|
|
||||||
<li><a href="categories.php?id=2">Culture</a></li>
|
|
||||||
<li><a href="categories.php?id=3">Éducation</a></li>
|
|
||||||
<li><a href="categories.php?id=4">Divertissement</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mobile-menu-section">
|
<a href="#" class="nav-item">
|
||||||
<h3>Suivez-nous</h3>
|
<i class="fas fa-compass"></i> Explorer
|
||||||
<div class="social-icons">
|
</a>
|
||||||
<a href="#"><i class="fab fa-facebook"></i></a>
|
<a href="#" class="nav-item">
|
||||||
<a href="#"><i class="fab fa-twitter"></i></a>
|
<i class="fas fa-globe"></i> Actualité
|
||||||
<a href="#"><i class="fab fa-instagram"></i></a>
|
</a>
|
||||||
<a href="#"><i class="fab fa-youtube"></i></a>
|
<a href="#" class="nav-item">
|
||||||
</div>
|
<i class="fas fa-music"></i> Musique
|
||||||
|
</a>
|
||||||
|
<a href="#" class="nav-item">
|
||||||
|
<i class="fas fa-monument"></i> Histoire
|
||||||
|
</a>
|
||||||
|
<a href="#" class="nav-item">
|
||||||
|
<i class="fas fa-running"></i> Sport
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="nav-divider"></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>
|
</div>
|
||||||
@@ -282,57 +282,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<?php include 'includes/footer.php'; ?>
|
<?php include 'includes/footer.php'; ?>
|
||||||
</div>
|
</div>
|
||||||
|
<?php include 'includes/mobile-menu.php'; ?>
|
||||||
<!-- Menu mobile (masqué par défaut) -->
|
|
||||||
<div class="mobile-menu">
|
|
||||||
<button class="mobile-menu-close">
|
|
||||||
<i class="fas fa-times"></i>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div class="search-container">
|
|
||||||
<form action="search.php" method="get">
|
|
||||||
<input type="text" name="q" placeholder="Recherche">
|
|
||||||
<button type="submit"><i class="fas fa-search"></i></button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<a href="index.php" class="nav-item">
|
|
||||||
<i class="fas fa-home"></i> Accueil
|
|
||||||
</a>
|
|
||||||
<a href="#" class="nav-item">
|
|
||||||
<i class="fas fa-broadcast-tower"></i> Direct
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<div class="nav-divider"></div>
|
|
||||||
|
|
||||||
<a href="#" class="nav-item">
|
|
||||||
<i class="fas fa-compass"></i> Explorer
|
|
||||||
</a>
|
|
||||||
<a href="#" class="nav-item">
|
|
||||||
<i class="fas fa-globe"></i> Actualité
|
|
||||||
</a>
|
|
||||||
<a href="#" class="nav-item">
|
|
||||||
<i class="fas fa-music"></i> Musique
|
|
||||||
</a>
|
|
||||||
<a href="#" class="nav-item">
|
|
||||||
<i class="fas fa-monument"></i> Histoire
|
|
||||||
</a>
|
|
||||||
<a href="#" class="nav-item">
|
|
||||||
<i class="fas fa-running"></i> Sport
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<div class="nav-divider"></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>
|
|
||||||
|
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
|
||||||
<script src="js/main.js"></script>
|
<script src="js/main.js"></script>
|
||||||
<script src="js/mastodon-timeline.umd.js"></script>
|
<script src="js/mastodon-timeline.umd.js"></script>
|
||||||
|
|||||||
@@ -311,48 +311,7 @@ if (empty($videoData) || isset($videoData['error'])) {
|
|||||||
<?php include 'includes/footer.php'; ?>
|
<?php include 'includes/footer.php'; ?>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Menu mobile (masqué par défaut) -->
|
<?php include 'includes/mobile-menu.php'; ?>
|
||||||
<button class="mobile-menu-toggle">
|
|
||||||
<i class="fas fa-bars"></i>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div class="mobile-menu">
|
|
||||||
<button class="mobile-menu-close">
|
|
||||||
<i class="fas fa-times"></i>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div class="search-container">
|
|
||||||
<form action="search.php" method="get">
|
|
||||||
<input type="text" name="q" placeholder="Recherche">
|
|
||||||
<button type="submit"><i class="fas fa-search"></i></button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<a href="index.php" class="nav-item">
|
|
||||||
<i class="fas fa-home"></i> Accueil
|
|
||||||
</a>
|
|
||||||
<a href="#" class="nav-item">
|
|
||||||
<i class="fas fa-broadcast-tower"></i> Direct
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<div class="nav-divider"></div>
|
|
||||||
|
|
||||||
<a href="#" class="nav-item">
|
|
||||||
<i class="fas fa-compass"></i> Explorer
|
|
||||||
</a>
|
|
||||||
<a href="#" class="nav-item">
|
|
||||||
<i class="fas fa-globe"></i> Actualité
|
|
||||||
</a>
|
|
||||||
<a href="#" class="nav-item">
|
|
||||||
<i class="fas fa-music"></i> Musique
|
|
||||||
</a>
|
|
||||||
<a href="#" class="nav-item">
|
|
||||||
<i class="fas fa-monument"></i> Histoire
|
|
||||||
</a>
|
|
||||||
<a href="#" class="nav-item">
|
|
||||||
<i class="fas fa-running"></i> Sport
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Modal de téléchargement -->
|
<!-- Modal de téléchargement -->
|
||||||
<div id="download-modal" class="modal">
|
<div id="download-modal" class="modal">
|
||||||
|
|||||||
Reference in New Issue
Block a user