Refactor navigation and add news functionality with WordPress integration
This commit is contained in:
@@ -36,15 +36,15 @@
|
||||
</div>
|
||||
</router-link>
|
||||
<router-link
|
||||
to="/au-hasard"
|
||||
to="/actualites"
|
||||
class="nav-link"
|
||||
:class="{ 'active': $route.name === 'Random' }"
|
||||
:class="{ 'active': $route.name === 'News' || $route.name === 'NewsArticle' }"
|
||||
>
|
||||
<div class="flex items-center space-x-2">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z" />
|
||||
</svg>
|
||||
<span>Au Hasard</span>
|
||||
<span>Actualités</span>
|
||||
</div>
|
||||
</router-link>
|
||||
|
||||
@@ -83,7 +83,7 @@
|
||||
<div class="flex flex-col space-y-4">
|
||||
<router-link to="/" class="nav-link-mobile">Accueil</router-link>
|
||||
<router-link to="/textes" class="nav-link-mobile">Textes</router-link>
|
||||
<router-link to="/au-hasard" class="nav-link-mobile">Au Hasard</router-link>
|
||||
<router-link to="/actualites" class="nav-link-mobile">Actualités</router-link>
|
||||
<div class="pt-2">
|
||||
<input
|
||||
v-model="searchQuery"
|
||||
@@ -131,7 +131,9 @@ export default {
|
||||
|
||||
<style scoped>
|
||||
.nav-link {
|
||||
@apply font-medium transition-colors duration-200 pb-1;
|
||||
font-weight: 500;
|
||||
transition: color 0.2s;
|
||||
padding-bottom: 0.25rem;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
@@ -140,11 +142,15 @@ export default {
|
||||
}
|
||||
|
||||
.nav-link.active {
|
||||
@apply text-black border-b-2 border-black;
|
||||
color: black;
|
||||
border-bottom: 2px solid black;
|
||||
}
|
||||
|
||||
.nav-link-mobile {
|
||||
@apply font-medium transition-colors duration-200 py-2;
|
||||
font-weight: 500;
|
||||
transition: color 0.2s;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user