feat: header iteration 2

src/fellchensammlung/static/fellchensammlung/css/styles.css

@@ -49,6 +49,7 @@ table {
     background-color: var(--secondary-light-one);
     word-break: break-word;
 }
+
 @media screen and (max-width: 500px) {
     table {
         font-size: small;
@@ -86,7 +87,6 @@ h1, h2 {
 }
 
 
-
 .nav-link {
     color: var(--text-one);
     text-align: center;
@@ -142,12 +142,12 @@ h1, h2 {
     color: var(--highlight-one-text);
 
     button {
-    width: 100%;
-    padding: 10px;
-    border: none;
-    border-radius: 4px;
-    opacity: 1;
-    background-color: var(--secondary-light-one);
+        width: 100%;
+        padding: 10px;
+        border: none;
+        border-radius: 4px;
+        opacity: 1;
+        background-color: var(--secondary-light-one);
     }
 }
 
@@ -201,6 +201,7 @@ h1, h2 {
 .container-edit-buttons {
     display: flex;
     flex-wrap: wrap;
+
     .btn {
         margin: 5px;
     }
@@ -518,3 +519,30 @@ textarea {
 .info {
     border: rgba(17, 58, 224, 0.51) 4px solid;
 }
+
+.container-dropdown {
+    position: relative;
+    display: inline-block;
+}
+
+.dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    min-width: 160px;
+    z-index: 1;
+}
+
+.container-dropdown:hover .dropdown-content {
+    display: block;
+}
+
+
+.dropbtn {
+    background-color: #f1f1f1;
+    color: black;
+    padding: 10px 20px;
+    font-size: 16px;
+    border: none;
+    cursor: pointer;
+}

src/fellchensammlung/templates/fellchensammlung/header.html

@@ -8,7 +8,8 @@
     <a href="{% url "index" %}" class="logo"><img src={% static 'fellchensammlung/img/logo_transparent.png' %}></a>
     <nav id="nav" class="nav justify-content-center">
         <a class="nav-link " href="{% url "search" %}"><i class="fas fa-search"></i> {% translate 'Suchen' %}</a>
-        <a class="nav-link " href="{% url "add-adoption" %}"><i class="fas fa-feather"></i> {% translate 'Vermittlung hinzufügen' %}</a>
+        <a class="nav-link " href="{% url "add-adoption" %}"><i
+                class="fas fa-feather"></i> {% translate 'Vermittlung hinzufügen' %}</a>
         <a class="nav-link " href="{% url "about" %}"><i class="fas fa-info"></i> {% translate 'Über uns' %}</a>
         <a class="nav-link " href="{% url "rss" %}"><i class="fa-solid fa-rss"></i> {% translate 'RSS' %}</a>
 
@@ -17,7 +18,16 @@
         {% include "fellchensammlung/forms/change_language.html" %}
         {% if user.is_authenticated %}
             <div class="profile-card">
-                <p><a href="{{ user.get_absolute_url }}">{{ user.username }}</a></p>
+                <div class="container-dropdown">
+                    <button class="dropbtn">
+                        {{ user.username }} drop
+                    </button>
+                    <select class="dropdown-content">
+                    <option><a href="{{ user.get_absolute_url }}">Profile</a></option>
+
+                    <option><a href="{{ user.get_absolute_url }}">Log out</a></option>
+                    </select>
+                </div>
                 <form action="{% url 'logout' %}" method="post">
                     {% csrf_token %}
                     <button type="submit">{% translate "Ausloggen" %}</button>