menu de droite debug

Bacati · Oct 17, 2024 · 63c05e4 · 63c05e4
1 parent e2b6250
commit 63c05e4
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 9 deletions.
diff --git a/src/assets/pages/404/styles/style.scss b/src/assets/pages/404/styles/style.scss
@@ -175,18 +175,16 @@ details[open] .cheSum{
 }
 
 .panneau {
-	opacity: 0;
-	visibility: hidden;
 	transition: opacity 0.6s ease-in-out, visibility 1s ease-in-out;
 }
 .menu-switch:checked ~ div #panneauUn-panneau {
 	opacity: 1;
-	visibility: visible;
+	display: block;
 	animation: fadein 0.6s forwards;
 }
 .menu-switch:not(:checked) ~ div #panneauUn-panneau {
 	opacity: 0;
-	visibility: hidden;
+	display: none;
 	animation: fadeout 0.6s forwards;
 }
 .card-prod img{

diff --git a/src/components/layouts/Header.astro b/src/components/layouts/Header.astro
@@ -46,18 +46,18 @@ export interface Props {
                         <label for="panneauUn" class="menu-open">
                             <ChevronsLeft class="text-orange-600"/>
                         </label>
-                        <div class="bg-white panneau absolute h-screen top-0 right-0 z-50" id="panneauUn-panneau">
-                            <label for="panneauDeux" class="menu-closed">
-                                <div class="flex flex-col justify-center">
+                        <div class="bg-white h-screen z-50 panneau fixed top-0 right-0 hidden opacity-0" id="panneauUn-panneau">
+                             <label for="panneauDeux" class="menu-closed">
+                                 <div class="flex flex-col justify-center">
                                     <a class="py-4 bg-amber-600 text-white flex rounded-b-full w-full justify-center gap-2 text-xl items-center" href="/" title="Accueil"><House /> Accueil</a>
                                     <a class="mx-2 text-orange-600 flex pt-4 gap-2 text-xl items-center" href="/categorie/allDays" title="ALLDAYS"><Gauge />ALLDAYS</a>
                                     <a class="mx-2 pr-0 text-orange-600 flex pt-4 gap-2 text-xl items-center" href="/categorie/competition" title="Compétitions"><Trophy />Compétition</a>
                                     <a class="mx-2 pr-0 text-orange-600 flex pt-4 gap-2 text-xl items-center" href="/categorie/esthetique" title="Esthetique"><Paintbrush />Esthétique</a>
                                     <a class="mx-2 pr-0 text-orange-600 flex pt-4 gap-2 text-xl items-center" href="/categorie/cycle" title="Cycle"><Bike />Cycle</a>
                                     <a class="mx-2 pr-0 text-orange-600 flex pt-4 gap-2 text-xl items-center" href="/" title="Equipement"><HardHat />Equipement</a>
                                     <a class="mx-2 pr-0 text-orange-600 flex pt-4 gap-2 text-xl items-center" href="/" title="Produit / Outillage"><Wrench />Produit / Outillage</a>
-                                    <ChevronsRight class="text-orange-600 my-4 mx-2"/>
-                                </div>		
+                                     <ChevronsRight class="text-orange-600 my-4 mx-2"/>
+                                 </div>		
                             </label>
                         </div>
                     </div>