Add profile picture to nav bar

onlylegs/static/sass/components/navigation.sass

@@ -56,11 +56,22 @@
 
     > i
         padding: 0.5rem
-
         font-size: 1.3rem
         border-radius: $rad-inner
         color: RGB($fg-white)
 
+    > .nav-pfp
+        padding: 0.4rem
+        width: 2.3rem
+        height: 2.3rem
+        border-radius: $rad-inner
+
+        img
+            width: 100%
+            height: 100%
+            object-fit: cover
+            border-radius: $rad-inner
+
     .tool-tip
         padding: 0.4rem 0.7rem
 
@@ -96,7 +107,7 @@
             color: RGB($bg-100)
 
     &:hover
-        > i
+        > i, .nav-pfp
             background: RGBA($fg-white, 0.1)
 
         span

onlylegs/templates/layout.html

@@ -88,7 +88,18 @@
 
             {% if current_user.is_authenticated %}
                 <a href="{{ url_for('profile.profile') }}" class="navigation-item {% block nav_profile %}{% endblock %}">
-                    <i class="ph-fill ph-folder-simple-user"></i>
+                    {% if current_user.picture %}
+                        <span class="nav-pfp">
+                            <img
+                                src="{{ url_for('api.media', path='pfp/' + current_user.picture) }}?r=icon"
+                                alt="Profile picture"
+                                onload="imgFade(this)"
+                                style="opacity:0;"
+                            />
+                        </span>
+                    {% else %}
+                        <i class="ph-fill ph-folder-simple-user"></i>
+                    {% endif %}
                     <span class="tool-tip">Profile<i class="ph-fill ph-caret-left"></i></span>
                 </a>