Redo top bar with site favicon and more shortcuts

src/components/desktop_nav/desktop_nav.js

@@ -11,6 +11,11 @@ import {
   faSearch,
   faTachometerAlt,
   faCog,
+  faGlobe,
+  faBolt,
+  faUsers,
+  faCommentMedical,
+  faBookmark,
   faInfoCircle
 } from '@fortawesome/free-solid-svg-icons'
 
@@ -25,6 +30,11 @@ library.add(
   faSearch,
   faTachometerAlt,
   faCog,
+  faGlobe,
+  faBolt,
+  faUsers,
+  faCommentMedical,
+  faBookmark,
   faInfoCircle
 )
 

src/components/desktop_nav/desktop_nav.scss

@@ -19,7 +19,7 @@
     box-sizing: border-box;
     padding: 0 1.2em;
     margin: auto;
-    max-width: 980px;
+    max-width: 1110px;
   }
 
   &.-logoLeft .inner-nav {
@@ -99,8 +99,23 @@
     }
   }
 
+  .left {
+    padding-left: 5px;
+    display: flex;
+
+    .nav-icon {
+      margin-left: 0.15em;
+    }
+  }
+
   .sitename {
     grid-area: sitename;
+
+    img {
+      height: 28px;
+      vertical-align: middle;
+      padding-right: 5px;
+    }
   }
 
   .actions {
@@ -119,5 +134,10 @@
       justify-content: flex-end;
       text-align: right;
     }
+
+    &.left {
+      justify-content: flex-start;
+      text-alignt: left;
+    }
   }
 }

src/components/desktop_nav/desktop_nav.vue

@@ -8,13 +8,68 @@
     <div class="inner-nav">
       <div class="item sitename">
         <router-link
-          v-if="!hideSitename"
           class="site-name"
           :to="{ name: 'root' }"
           active-class="home"
         >
-          {{ sitename }}
+          <img src="/favicon.png">
+          <span
+            v-if="!hideSitename"
+          >
+            {{ sitename }}
+          </span>
         </router-link>
+        <div
+          v-if="currentUser || !privateMode"
+          class="nav-items left"
+        >
+          <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="comment-medical"
+              :title="$t('nav.bubble_timeline')"
+            />
+          </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>
+        </div>
       </div>
       <router-link
         class="logo"
@@ -36,6 +91,34 @@
           @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: '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"
           @click.stop="openSettingsModal"