From b982c34694590deaeac0f76a5c52b8873572ad44 Mon Sep 17 00:00:00 2001
From: eris <femmediscord@gmail.com>
Date: Sun, 7 Aug 2022 05:42:36 +0000
Subject: [PATCH] Make nav panel icon margin optional

---
 src/components/desktop_nav/desktop_nav.js          | 4 +++-
 src/components/desktop_nav/desktop_nav.scss        | 8 +++++++-
 src/components/desktop_nav/desktop_nav.vue         | 5 ++++-
 src/components/settings_modal/tabs/general_tab.vue | 5 +++++
 src/i18n/en.json                                   | 1 +
 src/modules/config.js                              | 1 +
 src/modules/instance.js                            | 1 +
 7 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/components/desktop_nav/desktop_nav.js b/src/components/desktop_nav/desktop_nav.js
index 6c0546c6..9b0ec15d 100644
--- a/src/components/desktop_nav/desktop_nav.js
+++ b/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
     },
diff --git a/src/components/desktop_nav/desktop_nav.scss b/src/components/desktop_nav/desktop_nav.scss
index 54741111..64bbcf30 100644
--- a/src/components/desktop_nav/desktop_nav.scss
+++ b/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;
diff --git a/src/components/desktop_nav/desktop_nav.vue b/src/components/desktop_nav/desktop_nav.vue
index e2b5cf89..c82c10f0 100644
--- a/src/components/desktop_nav/desktop_nav.vue
+++ b/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"
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index f9d3feb2..652395c2 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/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') }}
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 604685bb..bf7e1ab0 100644
--- a/src/i18n/en.json
+++ b/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",
diff --git a/src/modules/config.js b/src/modules/config.js
index b88737f6..3ed33441 100644
--- a/src/modules/config.js
+++ b/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,
diff --git a/src/modules/instance.js b/src/modules/instance.js
index f91d88b3..0c9540ad 100644
--- a/src/modules/instance.js
+++ b/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',