Make nav panel icon margin optional

src/components/desktop_nav/desktop_nav.js

@@ -80,7 +80,9 @@ export default {
     showNavShortcuts () {
       return this.mergedConfig.showNavShortcuts
     },
-
+    showWiderShortcuts () {
+      return this.mergedConfig.showWiderShortcuts
+    },
     hideSiteFavicon () {
       return this.mergedConfig.hideSiteFavicon
     },

src/components/desktop_nav/desktop_nav.scss

@@ -84,7 +84,7 @@
   }
 
   .nav-icon {
-    margin-left: 0.7em;
+    margin-left: 0.2em;
     width: 2em;
     height: 100%;
     text-align: center;
@@ -111,6 +111,12 @@
     }
   }
 
+  .-wide {
+    .nav-icon:not(.nav-icon-logout) {
+      margin-left: 0.7em;
+    }
+  }
+
   .left {
     padding-left: 5px;
     display: flex;

src/components/desktop_nav/desktop_nav.vue

@@ -5,7 +5,10 @@
     :class="{ '-logoLeft': logoLeft }"
     @click="scrollToTop()"
   >
-    <div class="inner-nav">
+    <div
+      class="inner-nav"
+      :class="{ '-wide': showWiderShortcuts }"
+    >
       <div class="item nav-left-wrapper">
         <router-link
           class="site-brand"

src/components/settings_modal/tabs/general_tab.vue

@@ -40,6 +40,11 @@
             {{ $t('settings.show_nav_shortcuts') }}
           </BooleanSetting>
         </li>
+        <li>
+          <BooleanSetting path="showWiderShortcuts">
+            {{ $t('settings.show_wider_shortcuts') }}
+          </BooleanSetting>
+        </li>
         <li>
           <BooleanSetting path="stopGifs">
             {{ $t('settings.stop_gifs') }}

src/i18n/en.json

@@ -614,6 +614,7 @@
         "show_moderator_badge": "Show \"Moderator\" badge in my profile",
         "show_nav_shortcuts": "Show extra navigation shortcuts in top panel",
         "show_scrollbars": "Show side column's scrollbars",
+        "show_wider_shortcuts": "Show wider gap between top panel shortcuts",
         "show_yous": "Show (You)s",
         "stop_gifs": "Pause animated images until you hover on them",
         "streaming": "Automatically show new posts when scrolled to the top",

src/modules/config.js

@@ -37,6 +37,7 @@ export const defaultState = {
   collapseMessageWithSubject: undefined, // instance default
   padEmoji: true,
   showNavShortcuts: undefined, // instance default
+  showWiderShortcuts: undefined, // instance default
   hideSiteFavicon: undefined, // instance default
   hideSiteName: undefined, // instance default
   hideAttachments: false,

src/modules/instance.js

@@ -52,6 +52,7 @@ const defaultState = {
   showFeaturesPanel: true,
   showInstanceSpecificPanel: false,
   showNavShortcuts: true,
+  showWiderShortcuts: true,
   sidebarRight: false,
   subjectLineBehavior: 'email',
   theme: 'pleroma-dark',