added compact nav panel

src/components/nav_panel/nav_panel.js

@@ -34,6 +34,9 @@ const NavPanel = {
     onTimelineRoute () {
       return !!timelineNames()[this.$route.name]
     },
+    compactNavPanel () {
+      return this.$store.getters.mergedConfig.compactNavPanel || false
+    },
     timelinesRoute () {
       if (this.$store.state.interface.lastTimeline) {
         return this.$store.state.interface.lastTimeline

src/components/nav_panel/nav_panel.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="NavPanel">
+  <div
+    class="NavPanel"
+    :class="{ compact: compactNavPanel }"
+  >
     <div class="panel panel-default">
       <ul>
         <li v-if="currentUser || !privateMode">
@@ -155,5 +158,72 @@
     right: 0.6rem;
     top: 1.25em;
   }
+
+  &.compact {
+    .panel {
+      height: 40px;
+
+      ul > li:hover > a:not(.router-link-active) > .button-icon {
+        color: var(--selectedMenuText,#b9b9ba);
+      }
+
+      ul > li > .router-link-active > .button-icon {
+        color: var(--selectedMenuLightText);
+      }
+
+      ul {
+        display: flex;
+        height: 100%;
+        padding: 0;
+      }
+
+      li {
+        width: -moz-available;
+        width: -webkit-fill-available;
+        border-bottom: none;
+
+        a {
+          border-radius: 0 !important;
+        }
+      }
+
+      a {
+        font-size: 0;
+        height: 100%;
+        display: flex;
+        position: relative;
+      }
+
+      .button-icon, svg.svg-inline--fa {
+        margin: auto;
+        font-size: 20px;
+        color: var(--link,#d8a070);
+      }
+
+      .badge {
+        position: absolute;
+        right: 0;
+        background-color: red;
+        background-color: var(--badgeNotification,red);
+        color: #fff;
+        color: var(--badgeNotificationText,#fff);
+
+        // remove layout
+        padding: 0;
+        margin: 0;
+        box-shadow: black 0 1px 5px;
+        display: inline-block;
+        border-radius: 99px;
+        min-width: 22px;
+        line-height: 22px;
+        min-height: 22px;
+        max-height: 22px;
+        font-size: 14px;
+        font-weight: normal;
+        font-style: normal;
+        font-family: inherit;
+      }
+    }
+  }
 }
 </style>

src/components/settings_modal/tabs/general_tab.vue

@@ -21,6 +21,11 @@
             {{ $t('settings.hide_wallpaper') }}
           </BooleanSetting>
         </li>
+        <li>
+          <BooleanSetting path="compactNavPanel">
+            {{ $t('settings.compact_nav_panel') }}
+          </BooleanSetting>
+        </li>
       </ul>
     </div>
     <div class="setting-item">

src/i18n/en.json

@@ -337,6 +337,7 @@
     "max_thumbnails": "Maximum amount of thumbnails per post",
     "hide_isp": "Hide instance-specific panel",
     "show_third_column": "Move Notifications to a seperate column",
+    "compact_nav_panel": "Compact navigation panel",
     "hide_wallpaper": "Hide instance wallpaper",
     "preload_images": "Preload images",
     "use_one_click_nsfw": "Open NSFW attachments with just one click",

src/modules/config.js

@@ -19,6 +19,7 @@ export const defaultState = {
   theme: undefined,
   customTheme: undefined,
   showThirdColumn: false,
+  compactNavPanel: false,
   customThemeSource: undefined,
   hideISP: false,
   hideInstanceWallpaper: false,