feat(ui): bottom nav

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

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',

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;

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'

src/routes/_pages/settings/general.html

@@ -32,6 +32,11 @@ <h2>{intl.media}</h2>
 
   <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)">

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 })
+}

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()

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)

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,

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,