From 28c6412f032bd6c4e0eb5cb7dbc0d46c91a1e49c Mon Sep 17 00:00:00 2001
From: eris <femmediscord@gmail.com>
Date: Sat, 30 Jul 2022 22:14:37 +0000
Subject: [PATCH] Redo desktop nav and change bell to bolt for interactions

---
 src/components/desktop_nav/desktop_nav.js   |  12 ++-
 src/components/desktop_nav/desktop_nav.scss |  41 +++++++-
 src/components/desktop_nav/desktop_nav.vue  | 107 +++++++++++++++++++-
 src/components/nav_panel/nav_panel.js       |   4 +-
 src/components/side_drawer/side_drawer.js   |   4 +-
 src/components/side_drawer/side_drawer.vue  |   2 +-
 6 files changed, 154 insertions(+), 16 deletions(-)

diff --git a/src/components/desktop_nav/desktop_nav.js b/src/components/desktop_nav/desktop_nav.js
index 745b1a81..72b984c2 100644
--- a/src/components/desktop_nav/desktop_nav.js
+++ b/src/components/desktop_nav/desktop_nav.js
@@ -6,12 +6,16 @@ import {
   faSignOutAlt,
   faHome,
   faComments,
-  faBell,
   faUserPlus,
   faBullhorn,
   faSearch,
   faTachometerAlt,
   faCog,
+  faGlobe,
+  faBolt,
+  faUsers,
+  faCommentMedical,
+  faBookmark,
   faInfoCircle
 } from '@fortawesome/free-solid-svg-icons'
 
@@ -20,12 +24,16 @@ library.add(
   faSignOutAlt,
   faHome,
   faComments,
-  faBell,
   faUserPlus,
   faBullhorn,
   faSearch,
   faTachometerAlt,
   faCog,
+  faGlobe,
+  faBolt,
+  faUsers,
+  faCommentMedical,
+  faBookmark,
   faInfoCircle
 )
 
diff --git a/src/components/desktop_nav/desktop_nav.scss b/src/components/desktop_nav/desktop_nav.scss
index c7e02936..802eccf0 100644
--- a/src/components/desktop_nav/desktop_nav.scss
+++ b/src/components/desktop_nav/desktop_nav.scss
@@ -16,11 +16,11 @@
     display: grid;
     grid-template-rows: var(--navbar-height);
     grid-template-columns: 2fr auto 2fr;
-    grid-template-areas: "sitename logo actions";
+    grid-template-areas: "nav-left logo actions";
     box-sizing: border-box;
     padding: 0 1.2em;
     margin: auto;
-    max-width: 980px;
+    max-width: 1110px;
   }
 
   &.-column-stretch .inner-nav {
@@ -38,7 +38,7 @@
 
   &.-logoLeft .inner-nav {
     grid-template-columns: auto 2fr 2fr;
-    grid-template-areas: "logo sitename actions";
+    grid-template-areas: "logo nav-left actions";
   }
 
   &.-column-stretch.-wide .inner-nav {
@@ -115,14 +115,45 @@
     height: 100%;
     text-align: center;
 
+    &.router-link-active {
+      font-size: 1.2em;
+      margin-top: 0.05em;
+
+      .svg-inline--fa {
+        font-weight: bolder;
+        color: $fallback--text;
+        color: var(--selectedMenuText, $fallback--text);
+        --lightText: var(--selectedMenuLightText, $fallback--lightText);
+      }
+    }
+
+    &-logout {
+      margin-left: 2em;
+    }
+
     .svg-inline--fa {
       color: $fallback--link;
       color: var(--topBarLink, $fallback--link);
     }
   }
 
-  .sitename {
-    grid-area: sitename;
+  .left {
+    padding-left: 5px;
+    display: flex;
+
+    .nav-icon {
+      margin-left: 0.15em;
+    }
+  }
+
+  .nav-left-wrapper {
+    grid-area: nav-left;
+
+    .favicon {
+      height: 28px;
+      vertical-align: middle;
+      padding-right: 5px;
+    }
   }
 
   .actions {
diff --git a/src/components/desktop_nav/desktop_nav.vue b/src/components/desktop_nav/desktop_nav.vue
index dc8bbfd3..21a0f33b 100644
--- a/src/components/desktop_nav/desktop_nav.vue
+++ b/src/components/desktop_nav/desktop_nav.vue
@@ -6,15 +6,74 @@
     @click="scrollToTop()"
   >
     <div class="inner-nav">
-      <div class="item sitename">
+      <div class="item nav-left-wrapper">
         <router-link
-          v-if="!hideSitename"
-          class="site-name"
+          class="site-brand"
           :to="{ name: 'root' }"
           active-class="home"
         >
-          {{ sitename }}
+          <img
+            class="favicon"
+            src="/favicon.png"
+          >
+          <span
+            v-if="!hideSitename"
+            class="site-name"
+          >
+            {{ sitename }}
+          </span>
         </router-link>
+        <div
+          v-if="currentUser || !privateMode"
+          class="nav-items left"
+        >
+          <router-link
+            v-if="currentUser"
+            :to="{ name: 'friends' }"
+            class="nav-icon"
+          >
+            <FAIcon
+              fixed-width
+              class="fa-scale-110 fa-old-padding"
+              icon="home"
+              :title="$t('nav.home_timeline')"
+            />
+          </router-link>
+          <router-link
+            :to="{ name: 'public-timeline' }"
+            class="nav-icon"
+          >
+            <FAIcon
+              fixed-width
+              class="fa-scale-110 fa-old-padding"
+              icon="users"
+              :title="$t('nav.public_tl')"
+            />
+          </router-link>
+          <router-link
+            :to="{ name: 'public-external-timeline' }"
+            class="nav-icon"
+          >
+            <FAIcon
+              fixed-width
+              class="fa-scale-110 fa-old-padding"
+              icon="globe"
+              :title="$t('nav.twkn')"
+            />
+          </router-link>
+          <router-link
+            v-if="currentUser"
+            :to="{ name: 'bubble-timeline' }"
+            class="nav-icon"
+          >
+            <FAIcon
+              fixed-width
+              class="fa-scale-110 fa-old-padding"
+              icon="circle"
+              :title="$t('nav.bubble_timeline')"
+            />
+          </router-link>
+        </div>
       </div>
       <router-link
         class="logo"
@@ -37,6 +96,46 @@
           @toggled="onSearchBarToggled"
           @click.stop
         />
+        <div
+          v-if="currentUser || !privateMode"
+          class="nav-items right"
+        >
+          <router-link
+            class="nav-icon"
+            :to="{ name: 'interactions', params: { username: currentUser.screen_name } }"
+          >
+            <FAIcon
+              fixed-width
+              class="fa-scale-110 fa-old-padding"
+              icon="bolt"
+              :title="$t('nav.interactions')"
+            />
+          </router-link>
+          <router-link
+            v-if="currentUser"
+            :to="{ name: 'lists' }"
+            class="nav-icon"
+          >
+            <FAIcon
+              fixed-width
+              class="fa-scale-110 fa-old-padding"
+              icon="list"
+              :title="$t('nav.lists')"
+            />
+          </router-link>
+          <router-link
+            v-if="currentUser"
+            :to="{ name: 'bookmarks' }"
+            class="nav-icon"
+          >
+            <FAIcon
+              fixed-width
+              class="fa-scale-110 fa-old-padding"
+              icon="bookmark"
+              :title="$t('nav.bookmarks')"
+            />
+          </router-link>
+        </div>
         <button
           class="button-unstyled nav-icon"
           :title="$t('nav.preferences')"
diff --git a/src/components/nav_panel/nav_panel.js b/src/components/nav_panel/nav_panel.js
index 5eba981d..3053b002 100644
--- a/src/components/nav_panel/nav_panel.js
+++ b/src/components/nav_panel/nav_panel.js
@@ -15,7 +15,7 @@ import {
   faChevronDown,
   faChevronUp,
   faComments,
-  faBell,
+  faBolt,
   faInfoCircle,
   faStream,
   faList,
@@ -31,7 +31,7 @@ library.add(
   faChevronDown,
   faChevronUp,
   faComments,
-  faBell,
+  faBolt,
   faInfoCircle,
   faStream,
   faList,
diff --git a/src/components/side_drawer/side_drawer.js b/src/components/side_drawer/side_drawer.js
index 27019577..db5823a3 100644
--- a/src/components/side_drawer/side_drawer.js
+++ b/src/components/side_drawer/side_drawer.js
@@ -9,7 +9,7 @@ import {
   faSignOutAlt,
   faHome,
   faComments,
-  faBell,
+  faBolt,
   faUserPlus,
   faBullhorn,
   faSearch,
@@ -25,7 +25,7 @@ library.add(
   faSignOutAlt,
   faHome,
   faComments,
-  faBell,
+  faBolt,
   faUserPlus,
   faBullhorn,
   faSearch,
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index 994ac953..a0d15bd4 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -95,7 +95,7 @@
             <FAIcon
               fixed-width
               class="fa-scale-110 fa-old-padding"
-              icon="bell"
+              icon="bolt"
             /> {{ $t("nav.interactions") }}
           </router-link>
         </li>