From 0e8d76ea2553593d18a91a102b9dac67831ce1a8 Mon Sep 17 00:00:00 2001
From: Theouche <theo.lorne@gmail.com>
Date: Mon, 5 Aug 2024 17:54:21 +0200
Subject: [PATCH] better css for burger buton

---
 pong/game/views.py     |  2 +-
 pong/static/styles.css | 49 ++++++++++++++++++++++++++++++------------
 2 files changed, 36 insertions(+), 15 deletions(-)

diff --git a/pong/game/views.py b/pong/game/views.py
index a6cc709..67fe699 100644
--- a/pong/game/views.py
+++ b/pong/game/views.py
@@ -87,7 +87,7 @@ def tournoi_list(request):
 from django.http import JsonResponse
 
 def match_list_json(request):
-    matches = Match.objects.select_related('player1', 'player2', 'winner', 'tournoi').all()
+    matches = Match.objects.all()
     data = {
         'matches': list(matches.values(
             'id', 'player1__name', 'player2__name', 'score_player1', 'score_player2',
diff --git a/pong/static/styles.css b/pong/static/styles.css
index 8931418..2674013 100644
--- a/pong/static/styles.css
+++ b/pong/static/styles.css
@@ -253,39 +253,60 @@ button:hover {
     max-width: 80%;
 }
 
+/* Styles pour la barre de navigation */
 .navbar {
-    position: absolute;
-    top: 0;
-    right: 0;
+    position: absolute; /* Positionne la barre de navigation relativement à son conteneur */
+    top: 10px; /* Ajuste la position du menu déroulant par rapport au haut */
+    right: 10px; /* Ajuste la position du menu déroulant par rapport à la droite */
     padding: 10px;
 }
 
+/* Styles pour le bouton du menu burger */
 .burger-menu {
     font-size: 24px;
     background: none;
     border: none;
-    color: white; 
+    color: #00ffff; /* Couleur du texte du bouton */
     cursor: pointer;
+    transition: color 0.3s ease;
 }
 
+.burger-menu:hover {
+    color: #ffffff; /* Couleur du texte au survol */
+}
+
+/* Styles pour le menu déroulant */
 .dropdown-content {
     display: none;
     position: absolute;
-    right: 0;
-    background-color: #f9f9f9;
-    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    top: 100%; /* Positionne le menu directement sous le bouton */
+    right: 0; /* Aligne le menu avec le bouton */
+    margin-top: 10px; /* Espace entre le bouton et le menu */
+    background-color: #1a1a2e; /* Couleur de fond du menu */
+    color: #ffffff; /* Couleur du texte du menu */
+    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.3);
+    border-radius: 5px;
     z-index: 1;
+    width: max-content; /* Ajuste la largeur du menu en fonction du contenu */
 }
 
-.dropdown-content a {
-    color: black;
-    padding: 12px 16px;
-    text-decoration: none;
+/* Affiche le menu déroulant lorsqu'il est actif */
+.dropdown-content.show {
     display: block;
 }
 
-.dropdown-content a:hover {
-    background-color: #f1f1f1;
+/* Styles pour les liens du menu déroulant */
+.dropdown-content a {
+    color: #ffffff; /* Couleur du texte des liens */
+    padding: 12px 16px;
+    text-decoration: none;
+    display: block;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* Ligne de séparation entre les éléments */
+    transition: background-color 0.3s ease; /* Transition pour le fond au survol */
 }
 
-.show {display: block;}
\ No newline at end of file
+/* Styles pour les liens au survol */
+.dropdown-content a:hover {
+    background-color: #333; /* Couleur de fond au survol */
+    color: #00ffff; /* Couleur du texte au survol */
+}