From 4982914aa861aa0a54b811576b46799b9a952ada Mon Sep 17 00:00:00 2001
From: Fluffy-Bean <michal-gdula@protonmail.com>
Date: Fri, 21 Apr 2023 16:20:40 +0000
Subject: [PATCH] Add profile picture to nav bar

---
 onlylegs/static/sass/components/navigation.sass | 15 +++++++++++++--
 onlylegs/templates/layout.html                  | 13 ++++++++++++-
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/onlylegs/static/sass/components/navigation.sass b/onlylegs/static/sass/components/navigation.sass
index 4cfe3a1..c58805e 100644
--- a/onlylegs/static/sass/components/navigation.sass
+++ b/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
diff --git a/onlylegs/templates/layout.html b/onlylegs/templates/layout.html
index fd5e5d2..b879646 100644
--- a/onlylegs/templates/layout.html
+++ b/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>