Account menu in navbar

aleksis/core/templates/core/vue_base.html

@@ -115,12 +115,48 @@
 
       <v-spacer></v-spacer>
       {% if user.is_authenticated %}
-        <v-btn icon href="{% url "notifications" %}">
-          <v-icon>mdi-bell-outline</v-icon>
-        </v-btn>
-        <v-avatar>
-          {% include "core/partials/vue_avatar_content.html" with person_or_user=request.user.person %}
-        </v-avatar>
+        <v-tooltip bottom>
+          <template v-slot:activator="{ on, attrs }">
+            <v-btn icon href="{% url "notifications" %}" v-bind="attrs" v-on="on" color="white">
+              {% if request.user.person.unread_notifications_count > 0 %}
+                <v-icon>mdi-bell-badge-outline</v-icon>
+                {% else %}
+                <v-icon>mdi-bell-outline</v-icon>
+                {% endif %}
+            </v-btn>
+          </template>
+          <span>{% trans "Notifications" %}</span>
+        </v-tooltip>
+        <v-menu offset-y>
+          <template v-slot:activator="{ on, attrs }">
+            <v-avatar v-bind="attrs" v-on="on">
+              {% include "core/partials/vue_avatar_content.html" with person_or_user=request.user.person %}
+            </v-avatar>
+          </template>
+          {% get_menu "NAVBAR_ACCOUNT_MENU" as account_menu %}
+          <v-list id="account-dropdown" class="dropdown-content">
+            {% for item in account_menu %}
+              {% if item.divider %}
+                <v-divider></v-divider>
+              {% endif %}
+              <v-list-item href="{{ item.url }}">
+                <v-list-item-icon>
+                  {% if item.vuetify_icon %}
+                    <v-icon>{{ item.vuetify_icon }}</v-icon>
+                  {% elif item.icon_class %}
+                    <i class="{{ item.icon_class }}"></i>
+                  {% elif item.icon %}
+                    <i class="material-icons">{{ item.icon }}</i>
+                  {% elif item.svg_icon %}
+                    <i class="material-icons iconify" data-icon="{{ item.svg_icon }}"></i>
+                  {% endif %}
+                </v-list-item-icon>
+                <v-list-item-title>{{ item.name }}</v-list-item-title>
+                </a>
+              </v-list-item>
+            {% endfor %}
+          </v-list>
+        </v-menu>
       {% else %}
         <v-btn icon href="{% url "notifications" %}">
           <v-icon>mdi-bell-outline</v-icon>
@@ -181,58 +217,6 @@
     </v-footer>
   </v-app>
 </main>
-{#<header>#}
-{#  <!-- Nav bar (logged in as, logout) -->#}
-{#  <nav class="nav-extended">#}
-{#    <div class="nav-wrapper">#}
-{#      {% if user.is_authenticated %}#}
-{#        <ul class="account-nav">#}
-{#          {% trans "Notifications" as notifications_text %}#}
-{#          <li>#}
-{#            <a href="{% url "notifications" %}" data-position="bottom"#}
-{#               class="tooltipped {% if request.user.person.unread_notifications_count > 0 %}new-notification{% endif %}"#}
-{#               data-tooltip="{{ notifications_text }}" aria-label="{{ notifications_text }}">#}
-{#              <i class="material-icons iconify" data-icon="mdi:bell-outline"></i>#}
-{#            </a>#}
-{#          </li>#}
-{#          <li>#}
-{#            <a href="#!" class="navbar-dropdown-trigger" data-target="account-dropdown">#}
-{#              {{ request.user.person.identicon }}#}
-              {#              {% include "core/partials/avatar_content.html" with person_or_user=request.user.person %}#}
-{#            </a>#}
-{#          </li>#}
-{#        </ul>#}
-{#      {% else %}#}
-{#        <span class="nav-spacer"></span>#}
-{#      {% endif %}#}
-{#    </div>#}
-{#    <div class="nav-content">#}
-{#      {% block nav_content %}{% endblock %}#}
-{#    </div>#}
-{#  </nav>#}
-{##}
-{#  {% get_menu "NAVBAR_ACCOUNT_MENU" as account_menu %}#}
-{#  <ul id="account-dropdown" class="dropdown-content">#}
-{#    {% for item in account_menu %}#}
-{#      {% if item.divider %}#}
-{#        <li class="divider"></li>#}
-{#      {% endif %}#}
-{#      <li>#}
-{#        <a href="{{ item.url }}">#}
-{#          {% if item.icon %}#}
-{#            <i class="material-icons">{{ item.icon }}</i>#}
-{#          {% elif item.svg_icon %}#}
-{#            <i class="material-icons iconify" data-icon="{{ item.svg_icon }}"></i>#}
-{#          {% endif %}#}
-{#          {{ item.name }}#}
-{#        </a>#}
-{#      </li>#}
-{#    {% endfor %}#}
-{#  </ul>#}
-{##}
-{#  <!-- Main nav (sidenav) -->#}
-{##}
-{#</header>#}
 
 
 {% include_js "luxon" %}