From 67eeac762984efe4b2b6121f7380f40fb0392fe3 Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Tue, 1 Nov 2022 11:34:02 +0200
Subject: [PATCH] feat(ui): bottom nav

---
 src/inline-script/inline-script.js                | 3 +++
 src/intl/en-US.js                                 | 1 +
 src/routes/_components/Nav.html                   | 7 ++++++-
 src/routes/_layout.html                           | 8 +++++++-
 src/routes/_pages/settings/general.html           | 5 +++++
 src/routes/_store/observers/bottomNavObservers.js | 8 ++++++++
 src/routes/_store/observers/loggedInObservers.js  | 2 ++
 src/routes/_store/observers/observers.js          | 2 ++
 src/routes/_store/store.js                        | 1 +
 src/scss/global.scss                              | 2 +-
 10 files changed, 36 insertions(+), 3 deletions(-)
 create mode 100644 src/routes/_store/observers/bottomNavObservers.js

diff --git a/src/inline-script/inline-script.js b/src/inline-script/inline-script.js
index aced0545..5eed21fa 100644
--- a/src/inline-script/inline-script.js
+++ b/src/inline-script/inline-script.js
@@ -16,6 +16,7 @@ const {
   currentInstance,
   instanceThemes,
   disableCustomScrollbars,
+  bottomNav,
   enableGrayscale,
   pushSubscription,
   loggedInInstancesInOrder,
@@ -53,6 +54,8 @@ if (disableCustomScrollbars) {
     .setAttribute('media', 'only x') // disables the style
 }
 
+document.body.classList.toggle('bottom-nav', bottomNav);
+
 if (centerNav) {
   document.getElementById('theCenterNavStyle')
     .setAttribute('media', 'all') // enables the style
diff --git a/src/intl/en-US.js b/src/intl/en-US.js
index 106e7c97..fb5d71b2 100644
--- a/src/intl/en-US.js
+++ b/src/intl/en-US.js
@@ -382,6 +382,7 @@ export default {
   theme: 'Theme',
   themeForInstance: 'Theme for {instance}',
   disableCustomScrollbars: 'Disable custom scrollbars',
+  bottomNav: 'Place the navigation bar at the bottom of the screen',
   centerNav: 'Center the navigation header',
   preferences: 'Preferences',
   hotkeySettings: 'Hotkey settings',
diff --git a/src/routes/_components/Nav.html b/src/routes/_components/Nav.html
index 60af408e..a0cf86e7 100644
--- a/src/routes/_components/Nav.html
+++ b/src/routes/_components/Nav.html
@@ -1,4 +1,4 @@
-<nav id="main-nav" class="main-nav">
+<nav id="main-nav" class="main-nav{bottomNav ? ' bottom-nav' : ''}">
 	<ul class="main-nav-ul">
     {#each $navPages as navPage (navPage.href)}
       <li class="main-nav-li">
@@ -30,6 +30,11 @@
     contain: content; /* see https://www.w3.org/TR/2018/CR-css-contain-1-20181108/#valdef-contain-content */
 	}
 
+  .main-nav.bottom-nav {
+    top: calc(100vh - 52px);
+    bottom: 0;
+  }
+
   .main-nav-ul {
 		margin: 0;
 		padding: 0;
diff --git a/src/routes/_layout.html b/src/routes/_layout.html
index 9662b1f0..af5e388d 100644
--- a/src/routes/_layout.html
+++ b/src/routes/_layout.html
@@ -1,6 +1,6 @@
 <Nav {page} />
 
-<div class="main-content">
+<div class="main-content {bottomNav ? 'bottom-nav' : ''}">
   <main class="{infiniteScrollPage ? 'infinite-scroll-page' : ''}">
     <svelte:component this={child.component} {...child.props} />
   </main>
@@ -13,6 +13,12 @@
   .infinite-scroll-page {
     min-height: 100vh;
   }
+
+  .bottom-nav.main-content,
+  .bottom-nav .main-content {
+    padding-block-start: 0;
+    padding-block-end: var(--main-content-pad-top);
+  }
 </style>
 <script>
   import { store } from './_store/store.js'
diff --git a/src/routes/_pages/settings/general.html b/src/routes/_pages/settings/general.html
index 8b9f84c9..2e229043 100644
--- a/src/routes/_pages/settings/general.html
+++ b/src/routes/_pages/settings/general.html
@@ -32,6 +32,11 @@
 
   <h2>UI</h2>
   <form class="ui-settings">
+    <label class="setting-group">
+      <input type="checkbox" id="choice-bottom-nav"
+             bind:checked="$bottomNav" on:change="onChange(event)">
+      {intl.bottomNav}
+    </label>
     <label class="setting-group">
       <input type="checkbox" id="choice-disable-custom-scrollbars"
              bind:checked="$disableCustomScrollbars" on:change="onChange(event)">
diff --git a/src/routes/_store/observers/bottomNavObservers.js b/src/routes/_store/observers/bottomNavObservers.js
new file mode 100644
index 00000000..ab065ee2
--- /dev/null
+++ b/src/routes/_store/observers/bottomNavObservers.js
@@ -0,0 +1,8 @@
+export function bottomNavObservers (store) {
+  store.observe('bottomNav', bottomNav => {
+    // disables or enables the style
+    document.body.classList.toggle('bottom-nav', bottomNav);
+    document.querySelector('.main-content').classList.toggle('bottom-nav', bottomNav);
+    document.getElementById('main-nav').classList.toggle('bottom-nav', bottomNav);
+  }, { init: false })
+}
diff --git a/src/routes/_store/observers/loggedInObservers.js b/src/routes/_store/observers/loggedInObservers.js
index b206f2f1..59be7d2f 100644
--- a/src/routes/_store/observers/loggedInObservers.js
+++ b/src/routes/_store/observers/loggedInObservers.js
@@ -11,6 +11,7 @@ import { showComposeDialogObservers } from './showComposeDialogObservers.js'
 import { badgeObservers } from './badgeObservers.js'
 import { countryFlagEmojiPolyfill } from './countryFlagEmojiPolyfill.js'
 import { centerNavObservers } from './centerNavObservers.js'
+import { bottomNavObservers } from './bottomNavObservers.js'
 
 // These observers can be lazy-loaded when the user is actually logged in.
 // Prevents circular dependencies and reduces the size of main.js
@@ -23,6 +24,7 @@ export function loggedInObservers () {
   notificationPermissionObservers()
   customScrollbarObservers()
   centerNavObservers()
+  bottomNavObservers()
   customEmojiObservers()
   showComposeDialogObservers()
   badgeObservers()
diff --git a/src/routes/_store/observers/observers.js b/src/routes/_store/observers/observers.js
index a251db53..7a0d8215 100644
--- a/src/routes/_store/observers/observers.js
+++ b/src/routes/_store/observers/observers.js
@@ -9,11 +9,13 @@ import { touchObservers } from './touchObservers.js'
 import { grayscaleObservers } from './grayscaleObservers.js'
 import { focusRingObservers } from './focusRingObservers.js'
 import { leftRightFocusObservers } from './leftRightFocusObservers.js'
+import { bottomNavObservers } from './bottomNavObservers.js'
 
 export function observers (store) {
   onlineObservers(store)
   nowObservers(store)
   navObservers(store)
+  bottomNavObservers(store);
   pageVisibilityObservers(store)
   resizeObservers(store)
   touchObservers(store)
diff --git a/src/routes/_store/store.js b/src/routes/_store/store.js
index 6f10f9b1..1a00082c 100644
--- a/src/routes/_store/store.js
+++ b/src/routes/_store/store.js
@@ -14,6 +14,7 @@ const persistedState = {
   currentRegisteredInstance: undefined,
   // we disable scrollbars by default on iOS
   disableCustomScrollbars: process.browser && /iP(?:hone|ad|od)/.test(navigator.userAgent),
+  bottomNav: true,
   centerNav: false,
   disableFavCounts: false,
   disableFollowerCounts: false,
diff --git a/src/scss/global.scss b/src/scss/global.scss
index 94981fab..ffa1a048 100644
--- a/src/scss/global.scss
+++ b/src/scss/global.scss
@@ -20,7 +20,7 @@ body {
 
 .main-content {
   contain: content; // see https://www.w3.org/TR/2018/CR-css-contain-1-20181108/#valdef-contain-content
-  padding-top: var(--main-content-pad-top);
+  padding-block-start: var(--main-content-pad-top);
 
   @supports not (contain: content) {
     // For browsers which don't support the "contain" CSS property,