Make nav panel icon margin optional

src/components/desktop_nav/desktop_nav.js

@@ -87,7 +87,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

@@ -115,7 +115,7 @@
   }
 
   .nav-icon {
-    margin-left: 0.7em;
+    margin-left: 0.2em;
     width: 2em;
     height: 100%;
     text-align: center;
@@ -138,6 +138,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

@@ -579,6 +579,7 @@
     "show_admin_badge": "Show \"Admin\" badge in my profile",
     "show_moderator_badge": "Show \"Moderator\" badge in my profile",
     "show_nav_shortcuts": "Show extra navigation shortcuts in top panel",
+    "show_wider_shortcuts": "Show wider gap between top panel shortcuts",
     "nsfw_clickthrough": "Hide sensitive/NSFW media",
     "oauth_tokens": "OAuth tokens",
     "token": "Token",

src/modules/config.js

@@ -41,6 +41,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
   swapReacts: true,

src/modules/instance.js

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