From 058b6b618217e5f5491c6c2863ae3c494959da76 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 a7533b55..585a2ac2 100644
--- a/src/components/desktop_nav/desktop_nav.js
+++ b/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
     },
diff --git a/src/components/desktop_nav/desktop_nav.scss b/src/components/desktop_nav/desktop_nav.scss
index 9fed26f3..d309b653 100644
--- a/src/components/desktop_nav/desktop_nav.scss
+++ b/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;
diff --git a/src/components/desktop_nav/desktop_nav.vue b/src/components/desktop_nav/desktop_nav.vue
index b55deab5..5998db82 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 2b5138ee..2c6d6a96 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 58c63dd2..21d2b7f6 100644
--- a/src/i18n/en.json
+++ b/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",
diff --git a/src/modules/config.js b/src/modules/config.js
index 750d917c..35c3903a 100644
--- a/src/modules/config.js
+++ b/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,
diff --git a/src/modules/instance.js b/src/modules/instance.js
index cc625b3d..ef482b27 100644
--- a/src/modules/instance.js
+++ b/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',