Menú de usuario con opciones

static/style.css

@@ -398,6 +398,7 @@ tbody tr td {
   #interface .navigation {
       width: 100%;
   }
+
   .values {
    padding: 30px 40px 0 30px;
    justify-content: flex-start;
@@ -435,8 +436,43 @@ tbody tr td {
   .values .val-box {
    width: 100%;
    margin: 8px
-  }
-  .board {
-   margin: 30px 15px 30px 15px;
-  }
+  }#menu-toggle {
+   display: none;
+ }
+}
+
+.dropbtn {
+   background-color: #fff;
+   color: white;
+   padding: 16px;
+   font-size: 16px;
+   border: none;
+   cursor: pointer;
+}
+
+.dropdown {
+   position: relative;
+   display: inline-block;
+}
+.dropdown-content {
+   display: none;
+   position: absolute;
+   background-color: #f9f9f9;
+   min-width: 160px;
+   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+   z-index: 1;
+}
+.dropdown-content a {
+   color: black;
+   padding: 12px 16px;
+   text-decoration: none;
+   display: block;
+   text-align: left;
+}
+.dropdown-content a:hover {background-color: #f1f1f1;}
+.dropdown:hover .dropdown-content {
+   display: block;
 }
+.dropdown:hover .dropbtn {
+   background-color: #fff;
+}

templates/_navigation.html

@@ -0,0 +1,31 @@
+
+<div class="navigation">
+    <div class="n1">
+        <div>
+           <i id="menu-btn" class="bi bi-list""></i>               
+        </div>
+        <div class="search">
+           <i class="bi bi-search"></i>              
+            <input type="text" placeholder="Buscar...">
+        </div>
+    </div>
+
+     <div class="profile">
+        <i class="bi bi-bell"></i> 
+        <div class="dropdown">
+            {% if user.is_authenticated %}
+            <a class="dropbtn" href="#" role="button" id="menu-usuario" aria-expanded="false"><img src=" {{user.foto.url }}"></a>
+            {% else %}
+            <a class="dropbtn" href="#" role="button" id="menu-usuario" aria-expanded="false"><img src="static/images/auster.jpg"></a>
+            {% endif %}
+            <div class="dropdown-content">
+                {% if user.is_authenticated %}
+                <a class="dropdown-item">{{ user.nombre }}</a>
+                <a href="{% url 'logout' %}">Cerrar Sesión</a>
+                {% else %}
+                <a href="{% url 'login' %}">Iniciar Sesión</a>
+                {% endif %}
+            </div>
+        </div>
+     </div>
+</div>

templates/dashboard.html

@@ -2,22 +2,7 @@
 
 {% include "_head.html" %}
 <section id="interface">
-    <div class="navigation">
-        <div class="n1">
-            <div>
-               <i id="menu-btn" class="bi bi-list""></i>               
-            </div>
-            <div class="search">
-               <i class="bi bi-search"></i>              
-                <input type="text" placeholder="Buscar...">
-            </div>
-        </div>
-
-         <div class="profile">
-            <i class="bi bi-bell"></i>            
-            <img src="static/images/auster.jpg" alt="">
-         </div>
-    </div>
+    {% include "_navigation.html" %}
 
     <h3 class="i-name">
         Bienvenido, {{ user.nombre }}