Redo desktop nav and change bell to bolt for interactions

src/components/desktop_nav/desktop_nav.js

@@ -5,12 +5,16 @@ import {
   faSignOutAlt,
   faHome,
   faComments,
-  faBell,
   faUserPlus,
   faBullhorn,
   faSearch,
   faTachometerAlt,
   faCog,
+  faGlobe,
+  faBolt,
+  faUsers,
+  faCommentMedical,
+  faBookmark,
   faInfoCircle
 } from '@fortawesome/free-solid-svg-icons'
 
@@ -19,12 +23,16 @@ library.add(
   faSignOutAlt,
   faHome,
   faComments,
-  faBell,
   faUserPlus,
   faBullhorn,
   faSearch,
   faTachometerAlt,
   faCog,
+  faGlobe,
+  faBolt,
+  faUsers,
+  faCommentMedical,
+  faBookmark,
   faInfoCircle
 )
 

src/components/desktop_nav/desktop_nav.scss

@@ -15,16 +15,16 @@
     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;
   }
 
   &.-logoLeft .inner-nav {
     grid-template-columns: auto 2fr 2fr;
-    grid-template-areas: "logo sitename actions";
+    grid-template-areas: "logo nav-left actions";
   }
 
   .button-default {
@@ -84,12 +84,23 @@
   }
 
   .nav-icon {
-    margin-left: 1em;
+    margin-left: 0.2em;
     width: 2em;
     height: 100%;
-    font-size: 130%;
     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;
     }
@@ -100,8 +111,23 @@
     }
   }
 
-  .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 {

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"
+        >
+          <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"
@@ -36,6 +95,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"
           @click.stop="openSettingsModal"

src/components/nav_panel/nav_panel.js

@@ -10,7 +10,7 @@ import {
   faChevronDown,
   faChevronUp,
   faComments,
-  faBell,
+  faBolt,
   faInfoCircle,
   faStream,
   faList,
@@ -25,7 +25,7 @@ library.add(
   faChevronDown,
   faChevronUp,
   faComments,
-  faBell,
+  faBolt,
   faInfoCircle,
   faStream,
   faList,

src/components/nav_panel/nav_panel.vue

@@ -45,7 +45,7 @@
             <FAIcon
               fixed-width
               class="fa-scale-110"
-              icon="bell"
+              icon="bolt"
             />{{ $t("nav.interactions") }}
           </router-link>
         </li>

src/components/side_drawer/side_drawer.js

@@ -8,7 +8,7 @@ import {
   faSignOutAlt,
   faHome,
   faComments,
-  faBell,
+  faBolt,
   faUserPlus,
   faBullhorn,
   faSearch,
@@ -23,7 +23,7 @@ library.add(
   faSignOutAlt,
   faHome,
   faComments,
-  faBell,
+  faBolt,
   faUserPlus,
   faBullhorn,
   faSearch,

src/components/side_drawer/side_drawer.vue

@@ -74,7 +74,7 @@
             <FAIcon
               fixed-width
               class="fa-scale-110 fa-old-padding"
-              icon="bell"
+              icon="bolt"
             /> {{ $t("nav.interactions") }}
           </router-link>
         </li>