From 553ee6c8d17cd37a04055ed074974464e617c395 Mon Sep 17 00:00:00 2001
From: FloatingGhost <hannah@coffee-and-dreams.uk>
Date: Wed, 3 Aug 2022 13:02:01 +0100
Subject: [PATCH 1/6] Move nav to top of timeline panel

---
 package.json                                  |   2 +-
 src/components/timeline_menu/timeline_menu.js |   4 +-
 .../timeline_menu/timeline_menu.vue           | 223 ++++++------------
 .../timeline_menu/timeline_menu_content.js    |   5 +-
 yarn.lock                                     |  15 +-
 5 files changed, 84 insertions(+), 165 deletions(-)

diff --git a/package.json b/package.json
index 1445f12c..dcde025a 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
     "@babel/runtime": "7.17.8",
     "@chenfengyuan/vue-qrcode": "2.0.0",
     "@fortawesome/fontawesome-svg-core": "1.3.0",
-    "@fortawesome/free-regular-svg-icons": "5.15.4",
+    "@fortawesome/free-regular-svg-icons": "^6.1.2",
     "@fortawesome/free-solid-svg-icons": "5.15.4",
     "@fortawesome/vue-fontawesome": "3.0.1",
     "@kazvmoe-infra/pinch-zoom-element": "1.2.0",
diff --git a/src/components/timeline_menu/timeline_menu.js b/src/components/timeline_menu/timeline_menu.js
index a3cb968e..35091d24 100644
--- a/src/components/timeline_menu/timeline_menu.js
+++ b/src/components/timeline_menu/timeline_menu.js
@@ -64,7 +64,9 @@ const TimelineMenu = {
       }
       const i18nkey = timelineNames()[this.$route.name]
       return i18nkey ? this.$t(i18nkey) : route
-    }
+    },
+    currentUser () { return this.$store.state.users.currentUser },
+    privateMode () { return this.$store.state.instance.private }
   }
 }
 
diff --git a/src/components/timeline_menu/timeline_menu.vue b/src/components/timeline_menu/timeline_menu.vue
index 5efe7db6..946fe47e 100644
--- a/src/components/timeline_menu/timeline_menu.vue
+++ b/src/components/timeline_menu/timeline_menu.vue
@@ -1,35 +1,56 @@
 <template>
-  <Popover
-    trigger="click"
-    class="TimelineMenu"
-    :class="{ 'open': isOpen }"
-    :margin="{ left: -15, right: -200 }"
-    :bound-to="{ x: 'container' }"
-    popover-class="timeline-menu-popover-wrap"
-    @show="openMenu"
-    @close="() => isOpen = false"
+  <div
+    v-if="currentUser || !privateMode"
+    class="nav-items"
   >
-    <template v-slot:content>
-      <div class="timeline-menu-popover popover-default">
-        <TimelineMenuContent />
-      </div>
-    </template>
-    <template v-slot:trigger>
-      <button class="button-unstyled title timeline-menu-title">
-        <span class="timeline-title">{{ timelineName() }}</span>
-        <span>
-          <FAIcon
-            size="sm"
-            icon="chevron-down"
-          />
-        </span>
-        <span
-          class="click-blocker"
-          @click="blockOpen"
-        />
-      </button>
-    </template>
-  </Popover>
+    <router-link
+      v-if="currentUser"
+      :to="{ name: 'friends' }"
+      class="nav-icon"
+    >
+      <FAIcon
+        fixed-width
+        class="fa-scale-110 fa-old-padding"
+        icon="home"
+        :title="$t('nav.home_timeline_description')"
+      />
+    </router-link>
+    <router-link
+      :to="{ name: 'public-timeline' }"
+      class="nav-icon"
+    >
+      <FAIcon
+        fixed-width
+        class="fa-scale-110 fa-old-padding"
+        icon="users"
+        :title="$t('nav.public_timeline_description')"
+      />
+    </router-link>
+    <router-link
+      :to="{ name: 'public-external-timeline' }"
+      class="nav-icon"
+    >
+      <FAIcon
+        fixed-width
+        class="fa-scale-110 fa-old-padding"
+        icon="globe"
+        :title="$t('nav.twkn_timeline_description')"
+      />
+    </router-link>
+    <router-link
+      v-if="currentUser"
+      :to="{ name: 'bubble-timeline' }"
+      class="nav-icon"
+    >
+      <FAIcon
+        fixed-width
+        class="fa-scale-110 fa-old-padding"
+        :icon="['far', 'circle']"
+        :title="$t('nav.bubble_timeline_description')"
+      />
+    </router-link>
+    <span class="timeline-title">{{ timelineName() }}</span>
+  </div>
 </template>
 
 <script src="./timeline_menu.js" ></script>
@@ -37,138 +58,30 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
-.TimelineMenu {
-  flex-shrink: 1;
-  margin-right: auto;
-  min-width: 0;
-  width: 24rem;
+.nav-icon {
+  margin-left: 0.7em;
+  width: 2em;
+  height: 100%;
+  text-align: center;
 
-  .popover-trigger-button {
-    vertical-align: bottom;
-  }
-
-  .timeline-menu-popover-wrap {
-    overflow: hidden;
-    // Match panel heading padding to line up menu with bottom of heading
-    margin-top: 0.6rem;
-    padding: 0 15px 15px 15px;
-  }
-
-  .timeline-menu-popover {
-    width: 24rem;
-    max-width: 100vw;
-    margin: 0;
-    font-size: 1rem;
-    border-top-right-radius: 0;
-    border-top-left-radius: 0;
-    transform: translateY(-100%);
-    transition: transform 100ms;
-  }
-
-  .panel::after {
-    border-top-right-radius: 0;
-    border-top-left-radius: 0;
-  }
-
-  &.open .timeline-menu-popover {
-    transform: translateY(0);
-  }
-
-  .timeline-menu-title {
-    margin: 0;
-    cursor: pointer;
-    user-select: none;
-    width: 100%;
-    display: flex;
-
-    .timeline-menu-name {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-
-    svg {
-      margin-left: 0.6em;
-      transition: transform 100ms;
-    }
-
-    .click-blocker {
-      cursor: default;
-      flex-grow: 1;
-    }
-  }
-
-  &.open .timeline-menu-title svg {
-    color: $fallback--text;
-    color: var(--panelText, $fallback--text);
-    transform: rotate(180deg);
-  }
-
-  .panel {
-    box-shadow: var(--popoverShadow);
-  }
-
-  ul {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-
-  li {
-    border-bottom: 1px solid;
-    border-color: $fallback--border;
-    border-color: var(--border, $fallback--border);
-    padding: 0;
-
-    &:last-child a {
-      border-bottom-right-radius: $fallback--panelRadius;
-      border-bottom-right-radius: var(--panelRadius, $fallback--panelRadius);
-      border-bottom-left-radius: $fallback--panelRadius;
-      border-bottom-left-radius: var(--panelRadius, $fallback--panelRadius);
-    }
-
-    &:last-child {
-      border: none;
-    }
-  }
-
-  a {
-    display: block;
-    padding: 0.6em 0.65em;
-    padding-bottom: 0;
-
-    &:hover {
-      background-color: $fallback--lightBg;
-      background-color: var(--selectedMenu, $fallback--lightBg);
-      color: $fallback--link;
-      color: var(--selectedMenuText, $fallback--link);
-      --faint: var(--selectedMenuFaintText, $fallback--faint);
-      --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
-      --lightText: var(--selectedMenuLightText, $fallback--lightText);
-      --icon: var(--selectedMenuIcon, $fallback--icon);
-    }
-
-    &.router-link-active {
+  &.router-link-active {
+    border-bottom: 2px solid var(--selectedMenuText, $fallback--text);
+    padding-bottom: 0.8em;
+    .svg-inline--fa {
       font-weight: bolder;
-      background-color: $fallback--lightBg;
-      background-color: var(--selectedMenu, $fallback--lightBg);
       color: $fallback--text;
       color: var(--selectedMenuText, $fallback--text);
-      --faint: var(--selectedMenuFaintText, $fallback--faint);
-      --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
       --lightText: var(--selectedMenuLightText, $fallback--lightText);
-      --icon: var(--selectedMenuIcon, $fallback--icon);
-
-      &:hover {
-        text-decoration: underline;
-      }
-    }
-
-    svg {
-      margin-right: 0.4em;
-      margin-left: -0.2em;
     }
   }
 }
 
+.timeline-title {
+margin-left: 1em;
+  font-size: 1.2em;
+  font-weight: bold;
+  color: var(--selectedMenuText, $fallback--text);
+  color: var(--selectedMenuText, $fallback--text);
+  --lightText: var(--selectedMenuLightText, $fallback--lightText);
+}
 </style>
diff --git a/src/components/timeline_menu/timeline_menu_content.js b/src/components/timeline_menu/timeline_menu_content.js
index 9121a983..9c2ef0c9 100644
--- a/src/components/timeline_menu/timeline_menu_content.js
+++ b/src/components/timeline_menu/timeline_menu_content.js
@@ -5,10 +5,9 @@ import {
   faGlobe,
   faBookmark,
   faEnvelope,
-  faHome,
-  faCircle
+  faHome
 } from '@fortawesome/free-solid-svg-icons'
-
+import { faCircle } from '@fortawesome/free-regular-svg-icons'
 library.add(
   faUsers,
   faGlobe,
diff --git a/yarn.lock b/yarn.lock
index a761ad0d..5961b770 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1085,6 +1085,11 @@
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
+"@fortawesome/fontawesome-common-types@6.1.2":
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.1.2.tgz#c1095b1bbabf19f37f9ff0719db38d92a410bcfe"
+  integrity sha512-wBaAPGz1Awxg05e0PBRkDRuTsy4B3dpBm+zreTTyd9TH4uUM27cAL4xWyWR0rLJCrRwzVsQ4hF3FvM6rqydKPA==
+
 "@fortawesome/fontawesome-common-types@^0.2.36":
   version "0.2.36"
   resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz#b44e52db3b6b20523e0c57ef8c42d315532cb903"
@@ -1102,12 +1107,12 @@
   dependencies:
     "@fortawesome/fontawesome-common-types" "^0.3.0"
 
-"@fortawesome/free-regular-svg-icons@5.15.4":
-  version "5.15.4"
-  resolved "https://registry.yarnpkg.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.15.4.tgz#b97edab436954333bbeac09cfc40c6a951081a02"
-  integrity sha512-9VNNnU3CXHy9XednJ3wzQp6SwNwT3XaM26oS4Rp391GsxVYA+0oDR2J194YCIWf7jNRCYKjUCOduxdceLrx+xw==
+"@fortawesome/free-regular-svg-icons@^6.1.2":
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.1.2.tgz#9f04009098addcc11d0d185126f058ed042c3099"
+  integrity sha512-xR4hA+tAwsaTHGfb+25H1gVU/aJ0Rzu+xIUfnyrhaL13yNQ7TWiI2RvzniAaB+VGHDU2a+Pk96Ve+pkN3/+TTQ==
   dependencies:
-    "@fortawesome/fontawesome-common-types" "^0.2.36"
+    "@fortawesome/fontawesome-common-types" "6.1.2"
 
 "@fortawesome/free-solid-svg-icons@5.15.4":
   version "5.15.4"
-- 
2.43.0


From 1a01e64cb545fecc8fed1911464eb94c31a3aca0 Mon Sep 17 00:00:00 2001
From: FloatingGhost <hannah@coffee-and-dreams.uk>
Date: Wed, 3 Aug 2022 13:32:37 +0100
Subject: [PATCH 2/6] fix currentUser binding

---
 src/components/timeline_menu/timeline_menu.js | 30 ++++++-------------
 1 file changed, 9 insertions(+), 21 deletions(-)

diff --git a/src/components/timeline_menu/timeline_menu.js b/src/components/timeline_menu/timeline_menu.js
index 35091d24..dbb9a49b 100644
--- a/src/components/timeline_menu/timeline_menu.js
+++ b/src/components/timeline_menu/timeline_menu.js
@@ -35,25 +35,15 @@ const TimelineMenu = {
       this.$store.dispatch('setLastTimeline', this.$route.name)
     }
   },
+  computed: {
+    currentUser () {
+      return this.$store.state.users.currentUser
+    },
+    privateMode () {
+      return this.$store.state.instance.private
+    }
+  },
   methods: {
-    openMenu () {
-      // $nextTick is too fast, animation won't play back but
-      // instead starts in fully open position. Low values
-      // like 1-5 work on fast machines but not on mobile, 25
-      // seems like a good compromise that plays without significant
-      // added lag.
-      setTimeout(() => {
-        this.isOpen = true
-      }, 25)
-    },
-    blockOpen (event) {
-      // For the blank area inside the button element.
-      // Just setting @click.stop="" makes unintuitive behavior when
-      // menu is open and clicking on the blank area doesn't close it.
-      if (!this.isOpen) {
-        event.stopPropagation()
-      }
-    },
     timelineName () {
       const route = this.$route.name
       if (route === 'tag-timeline') {
@@ -64,9 +54,7 @@ const TimelineMenu = {
       }
       const i18nkey = timelineNames()[this.$route.name]
       return i18nkey ? this.$t(i18nkey) : route
-    },
-    currentUser () { return this.$store.state.users.currentUser },
-    privateMode () { return this.$store.state.instance.private }
+    }
   }
 }
 
-- 
2.43.0


From 74d82cad0e217e4cac2f2cd48d0e81fd83f16e5a Mon Sep 17 00:00:00 2001
From: FloatingGhost <hannah@coffee-and-dreams.uk>
Date: Wed, 3 Aug 2022 16:38:25 +0100
Subject: [PATCH 3/6] hide timeline title on mobile

---
 src/components/timeline_menu/timeline_menu.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/components/timeline_menu/timeline_menu.vue b/src/components/timeline_menu/timeline_menu.vue
index 946fe47e..d7d022af 100644
--- a/src/components/timeline_menu/timeline_menu.vue
+++ b/src/components/timeline_menu/timeline_menu.vue
@@ -84,4 +84,10 @@ margin-left: 1em;
   color: var(--selectedMenuText, $fallback--text);
   --lightText: var(--selectedMenuLightText, $fallback--lightText);
 }
+
+@media all and (max-width: 900px) {
+  .timeline-title {
+    display: none;
+  }
+}
 </style>
-- 
2.43.0


From 15696847a4682b09e41edcb285afd983546e49d3 Mon Sep 17 00:00:00 2001
From: FloatingGhost <hannah@coffee-and-dreams.uk>
Date: Wed, 3 Aug 2022 18:14:40 +0100
Subject: [PATCH 4/6] order timelines by "size"

---
 .../timeline_menu/timeline_menu.vue           | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/components/timeline_menu/timeline_menu.vue b/src/components/timeline_menu/timeline_menu.vue
index d7d022af..e5e3505b 100644
--- a/src/components/timeline_menu/timeline_menu.vue
+++ b/src/components/timeline_menu/timeline_menu.vue
@@ -26,17 +26,6 @@
         :title="$t('nav.public_timeline_description')"
       />
     </router-link>
-    <router-link
-      :to="{ name: 'public-external-timeline' }"
-      class="nav-icon"
-    >
-      <FAIcon
-        fixed-width
-        class="fa-scale-110 fa-old-padding"
-        icon="globe"
-        :title="$t('nav.twkn_timeline_description')"
-      />
-    </router-link>
     <router-link
       v-if="currentUser"
       :to="{ name: 'bubble-timeline' }"
@@ -49,6 +38,17 @@
         :title="$t('nav.bubble_timeline_description')"
       />
     </router-link>
+    <router-link
+      :to="{ name: 'public-external-timeline' }"
+      class="nav-icon"
+    >
+      <FAIcon
+        fixed-width
+        class="fa-scale-110 fa-old-padding"
+        icon="globe"
+        :title="$t('nav.twkn_timeline_description')"
+      />
+    </router-link>
     <span class="timeline-title">{{ timelineName() }}</span>
   </div>
 </template>
-- 
2.43.0


From 566b8a85730050f6f8551b7e1303dc8b09f0c12b Mon Sep 17 00:00:00 2001
From: FloatingGhost <hannah@coffee-and-dreams.uk>
Date: Fri, 5 Aug 2022 20:28:38 +0100
Subject: [PATCH 5/6] put timeline tabs at top of panel

---
 src/components/moderation_tools/moderation_tools.vue   | 5 +++--
 src/components/timeline_menu/timeline_menu_content.vue | 2 +-
 src/components/user_card/user_card.js                  | 1 +
 src/components/user_card/user_card.vue                 | 2 +-
 4 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/moderation_tools/moderation_tools.vue b/src/components/moderation_tools/moderation_tools.vue
index 96b8c3a3..75ea08cc 100644
--- a/src/components/moderation_tools/moderation_tools.vue
+++ b/src/components/moderation_tools/moderation_tools.vue
@@ -13,13 +13,13 @@
           <span v-if="user.is_local">
             <button
               class="button-default dropdown-item"
-              @click="toggleRight(&quot;admin&quot;)"
+              @click="toggleRight('admin')"
             >
               {{ $t(!!user.rights.admin ? 'user_card.admin_menu.revoke_admin' : 'user_card.admin_menu.grant_admin') }}
             </button>
             <button
               class="button-default dropdown-item"
-              @click="toggleRight(&quot;moderator&quot;)"
+              @click="toggleRight('moderator')"
             >
               {{ $t(!!user.rights.moderator ? 'user_card.admin_menu.revoke_moderator' : 'user_card.admin_menu.grant_moderator') }}
             </button>
@@ -167,6 +167,7 @@
 
 .moderation-tools-popover {
   height: 100%;
+  z-index: 999;
   .trigger {
     display: flex !important;
     height: 100%;
diff --git a/src/components/timeline_menu/timeline_menu_content.vue b/src/components/timeline_menu/timeline_menu_content.vue
index 2e5d3ce9..32548c49 100644
--- a/src/components/timeline_menu/timeline_menu_content.vue
+++ b/src/components/timeline_menu/timeline_menu_content.vue
@@ -24,7 +24,7 @@
         <FAIcon
           fixed-width
           class="fa-scale-110 fa-old-padding "
-          icon="circle"
+          :icon="['far', 'circle']"
         />
         <span
           :title="$t('nav.bubble_timeline_description')"
diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index db8931cf..ef898f96 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -69,6 +69,7 @@ export default {
       return `${serverUrl.protocol}//${serverUrl.host}/main/ostatus`
     },
     loggedIn () {
+      console.log({ ...this.$store.state.users.currentUser })
       return this.$store.state.users.currentUser
     },
     dailyAvg () {
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 8e63e1a3..0f776e55 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -245,7 +245,7 @@
             </button>
           </div>
           <ModerationTools
-            v-if="loggedIn.role === &quot;admin&quot;"
+            v-if="loggedIn.role === 'admin'"
             :user="user"
           />
         </div>
-- 
2.43.0


From 6000a01a0e01b41c0c0753ab395480e556e11be6 Mon Sep 17 00:00:00 2001
From: FloatingGhost <hannah@coffee-and-dreams.uk>
Date: Wed, 17 Aug 2022 09:36:28 +0100
Subject: [PATCH 6/6] combine alt nav

---
 src/components/desktop_nav/desktop_nav.vue    |  23 +-
 .../settings_modal/tabs/general_tab.vue       |   8 +
 src/components/timeline/timeline.js           |   5 +
 src/components/timeline/timeline.vue          |   6 +-
 src/components/timeline_menu/timeline_menu.js |  26 +-
 .../timeline_menu/timeline_menu.vue           | 229 ++++++++++++------
 .../timeline_menu/timeline_menu_content.js    |   5 +-
 .../timeline_menu/timeline_menu_content.vue   |   2 +-
 .../timeline_menu_content.js                  |  30 +++
 .../timeline_menu_content.vue                 | 114 +++++++++
 .../timeline_menu_tabs/timeline_menu_tabs.js  |  61 +++++
 .../timeline_menu_tabs/timeline_menu_tabs.vue |  96 ++++++++
 src/i18n/en.json                              |   1 +
 src/modules/config.js                         |   1 +
 14 files changed, 510 insertions(+), 97 deletions(-)
 create mode 100644 src/components/timeline_menu_tabs/timeline_menu_content.js
 create mode 100644 src/components/timeline_menu_tabs/timeline_menu_content.vue
 create mode 100644 src/components/timeline_menu_tabs/timeline_menu_tabs.js
 create mode 100644 src/components/timeline_menu_tabs/timeline_menu_tabs.vue

diff --git a/src/components/desktop_nav/desktop_nav.vue b/src/components/desktop_nav/desktop_nav.vue
index 32b90749..25b4fe8e 100644
--- a/src/components/desktop_nav/desktop_nav.vue
+++ b/src/components/desktop_nav/desktop_nav.vue
@@ -54,17 +54,6 @@
               :title="$t('nav.public_tl')"
             />
           </router-link>
-          <router-link
-            :to="{ name: 'public-external-timeline' }"
-            class="nav-icon"
-          >
-            <FAIcon
-              fixed-width
-              class="fa-scale-110 fa-old-padding"
-              icon="globe"
-              :title="$t('nav.twkn')"
-            />
-          </router-link>
           <router-link
             v-if="currentUser"
             :to="{ name: 'bubble-timeline' }"
@@ -77,6 +66,17 @@
               :title="$t('nav.bubble_timeline')"
             />
           </router-link>
+          <router-link
+            :to="{ name: 'public-external-timeline' }"
+            class="nav-icon"
+          >
+            <FAIcon
+              fixed-width
+              class="fa-scale-110 fa-old-padding"
+              icon="globe"
+              :title="$t('nav.twkn')"
+            />
+          </router-link>
         </div>
       </div>
       <router-link
@@ -105,6 +105,7 @@
         >
           <router-link
             class="nav-icon"
+            v-if="currentUser"
             :to="{ name: 'interactions', params: { username: currentUser.screen_name } }"
           >
             <FAIcon
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 2c6ff5cd..4f5a5bc7 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -49,6 +49,14 @@
             {{ $t('settings.show_nav_shortcuts') }}
           </BooleanSetting>
         </li>
+        <li>
+          <BooleanSetting
+            path="showPanelNavShortcuts"
+            expert="1"
+          >
+            {{ $t('settings.show_panel_nav_shortcuts') }}
+          </BooleanSetting>
+        </li>
         <li>
           <BooleanSetting
             path="showWiderShortcuts"
diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index 5b6c5089..f44fabb1 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -2,6 +2,7 @@ import Status from '../status/status.vue'
 import timelineFetcher from '../../services/timeline_fetcher/timeline_fetcher.service.js'
 import Conversation from '../conversation/conversation.vue'
 import TimelineMenu from '../timeline_menu/timeline_menu.vue'
+import TimelineMenuTabs from '../timeline_menu_tabs/timeline_menu_tabs.vue'
 import TimelineQuickSettings from './timeline_quick_settings.vue'
 import { debounce, throttle, keyBy } from 'lodash'
 import { library } from '@fortawesome/fontawesome-svg-core'
@@ -39,6 +40,7 @@ const Timeline = {
     Status,
     Conversation,
     TimelineMenu,
+    TimelineMenuTabs,
     TimelineQuickSettings
   },
   computed: {
@@ -85,6 +87,9 @@ const Timeline = {
     },
     virtualScrollingEnabled () {
       return this.$store.getters.mergedConfig.virtualScrolling
+    },
+    showPanelNavShortcuts () {
+      return this.$store.getters.mergedConfig.showPanelNavShortcuts
     }
   },
   created () {
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 266c1d9a..d75114df 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -1,7 +1,11 @@
 <template>
   <div :class="['Timeline', classes.root]">
     <div :class="classes.header">
-      <TimelineMenu v-if="!embedded" />
+      <template v-if="!embedded">
+        <TimelineMenuTabs v-if="showPanelNavShortcuts" />
+        <TimelineMenu v-else />
+      </template>
+
       <button
         v-if="showLoadButton"
         class="button-default loadmore-button"
diff --git a/src/components/timeline_menu/timeline_menu.js b/src/components/timeline_menu/timeline_menu.js
index dbb9a49b..a3cb968e 100644
--- a/src/components/timeline_menu/timeline_menu.js
+++ b/src/components/timeline_menu/timeline_menu.js
@@ -35,15 +35,25 @@ const TimelineMenu = {
       this.$store.dispatch('setLastTimeline', this.$route.name)
     }
   },
-  computed: {
-    currentUser () {
-      return this.$store.state.users.currentUser
-    },
-    privateMode () {
-      return this.$store.state.instance.private
-    }
-  },
   methods: {
+    openMenu () {
+      // $nextTick is too fast, animation won't play back but
+      // instead starts in fully open position. Low values
+      // like 1-5 work on fast machines but not on mobile, 25
+      // seems like a good compromise that plays without significant
+      // added lag.
+      setTimeout(() => {
+        this.isOpen = true
+      }, 25)
+    },
+    blockOpen (event) {
+      // For the blank area inside the button element.
+      // Just setting @click.stop="" makes unintuitive behavior when
+      // menu is open and clicking on the blank area doesn't close it.
+      if (!this.isOpen) {
+        event.stopPropagation()
+      }
+    },
     timelineName () {
       const route = this.$route.name
       if (route === 'tag-timeline') {
diff --git a/src/components/timeline_menu/timeline_menu.vue b/src/components/timeline_menu/timeline_menu.vue
index e5e3505b..5efe7db6 100644
--- a/src/components/timeline_menu/timeline_menu.vue
+++ b/src/components/timeline_menu/timeline_menu.vue
@@ -1,56 +1,35 @@
 <template>
-  <div
-    v-if="currentUser || !privateMode"
-    class="nav-items"
+  <Popover
+    trigger="click"
+    class="TimelineMenu"
+    :class="{ 'open': isOpen }"
+    :margin="{ left: -15, right: -200 }"
+    :bound-to="{ x: 'container' }"
+    popover-class="timeline-menu-popover-wrap"
+    @show="openMenu"
+    @close="() => isOpen = false"
   >
-    <router-link
-      v-if="currentUser"
-      :to="{ name: 'friends' }"
-      class="nav-icon"
-    >
-      <FAIcon
-        fixed-width
-        class="fa-scale-110 fa-old-padding"
-        icon="home"
-        :title="$t('nav.home_timeline_description')"
-      />
-    </router-link>
-    <router-link
-      :to="{ name: 'public-timeline' }"
-      class="nav-icon"
-    >
-      <FAIcon
-        fixed-width
-        class="fa-scale-110 fa-old-padding"
-        icon="users"
-        :title="$t('nav.public_timeline_description')"
-      />
-    </router-link>
-    <router-link
-      v-if="currentUser"
-      :to="{ name: 'bubble-timeline' }"
-      class="nav-icon"
-    >
-      <FAIcon
-        fixed-width
-        class="fa-scale-110 fa-old-padding"
-        :icon="['far', 'circle']"
-        :title="$t('nav.bubble_timeline_description')"
-      />
-    </router-link>
-    <router-link
-      :to="{ name: 'public-external-timeline' }"
-      class="nav-icon"
-    >
-      <FAIcon
-        fixed-width
-        class="fa-scale-110 fa-old-padding"
-        icon="globe"
-        :title="$t('nav.twkn_timeline_description')"
-      />
-    </router-link>
-    <span class="timeline-title">{{ timelineName() }}</span>
-  </div>
+    <template v-slot:content>
+      <div class="timeline-menu-popover popover-default">
+        <TimelineMenuContent />
+      </div>
+    </template>
+    <template v-slot:trigger>
+      <button class="button-unstyled title timeline-menu-title">
+        <span class="timeline-title">{{ timelineName() }}</span>
+        <span>
+          <FAIcon
+            size="sm"
+            icon="chevron-down"
+          />
+        </span>
+        <span
+          class="click-blocker"
+          @click="blockOpen"
+        />
+      </button>
+    </template>
+  </Popover>
 </template>
 
 <script src="./timeline_menu.js" ></script>
@@ -58,36 +37,138 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
-.nav-icon {
-  margin-left: 0.7em;
-  width: 2em;
-  height: 100%;
-  text-align: center;
+.TimelineMenu {
+  flex-shrink: 1;
+  margin-right: auto;
+  min-width: 0;
+  width: 24rem;
 
-  &.router-link-active {
-    border-bottom: 2px solid var(--selectedMenuText, $fallback--text);
-    padding-bottom: 0.8em;
-    .svg-inline--fa {
+  .popover-trigger-button {
+    vertical-align: bottom;
+  }
+
+  .timeline-menu-popover-wrap {
+    overflow: hidden;
+    // Match panel heading padding to line up menu with bottom of heading
+    margin-top: 0.6rem;
+    padding: 0 15px 15px 15px;
+  }
+
+  .timeline-menu-popover {
+    width: 24rem;
+    max-width: 100vw;
+    margin: 0;
+    font-size: 1rem;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    transform: translateY(-100%);
+    transition: transform 100ms;
+  }
+
+  .panel::after {
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+  }
+
+  &.open .timeline-menu-popover {
+    transform: translateY(0);
+  }
+
+  .timeline-menu-title {
+    margin: 0;
+    cursor: pointer;
+    user-select: none;
+    width: 100%;
+    display: flex;
+
+    .timeline-menu-name {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    svg {
+      margin-left: 0.6em;
+      transition: transform 100ms;
+    }
+
+    .click-blocker {
+      cursor: default;
+      flex-grow: 1;
+    }
+  }
+
+  &.open .timeline-menu-title svg {
+    color: $fallback--text;
+    color: var(--panelText, $fallback--text);
+    transform: rotate(180deg);
+  }
+
+  .panel {
+    box-shadow: var(--popoverShadow);
+  }
+
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  li {
+    border-bottom: 1px solid;
+    border-color: $fallback--border;
+    border-color: var(--border, $fallback--border);
+    padding: 0;
+
+    &:last-child a {
+      border-bottom-right-radius: $fallback--panelRadius;
+      border-bottom-right-radius: var(--panelRadius, $fallback--panelRadius);
+      border-bottom-left-radius: $fallback--panelRadius;
+      border-bottom-left-radius: var(--panelRadius, $fallback--panelRadius);
+    }
+
+    &:last-child {
+      border: none;
+    }
+  }
+
+  a {
+    display: block;
+    padding: 0.6em 0.65em;
+    padding-bottom: 0;
+
+    &:hover {
+      background-color: $fallback--lightBg;
+      background-color: var(--selectedMenu, $fallback--lightBg);
+      color: $fallback--link;
+      color: var(--selectedMenuText, $fallback--link);
+      --faint: var(--selectedMenuFaintText, $fallback--faint);
+      --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
+      --lightText: var(--selectedMenuLightText, $fallback--lightText);
+      --icon: var(--selectedMenuIcon, $fallback--icon);
+    }
+
+    &.router-link-active {
       font-weight: bolder;
+      background-color: $fallback--lightBg;
+      background-color: var(--selectedMenu, $fallback--lightBg);
       color: $fallback--text;
       color: var(--selectedMenuText, $fallback--text);
+      --faint: var(--selectedMenuFaintText, $fallback--faint);
+      --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
       --lightText: var(--selectedMenuLightText, $fallback--lightText);
+      --icon: var(--selectedMenuIcon, $fallback--icon);
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+
+    svg {
+      margin-right: 0.4em;
+      margin-left: -0.2em;
     }
   }
 }
 
-.timeline-title {
-margin-left: 1em;
-  font-size: 1.2em;
-  font-weight: bold;
-  color: var(--selectedMenuText, $fallback--text);
-  color: var(--selectedMenuText, $fallback--text);
-  --lightText: var(--selectedMenuLightText, $fallback--lightText);
-}
-
-@media all and (max-width: 900px) {
-  .timeline-title {
-    display: none;
-  }
-}
 </style>
diff --git a/src/components/timeline_menu/timeline_menu_content.js b/src/components/timeline_menu/timeline_menu_content.js
index 9c2ef0c9..9121a983 100644
--- a/src/components/timeline_menu/timeline_menu_content.js
+++ b/src/components/timeline_menu/timeline_menu_content.js
@@ -5,9 +5,10 @@ import {
   faGlobe,
   faBookmark,
   faEnvelope,
-  faHome
+  faHome,
+  faCircle
 } from '@fortawesome/free-solid-svg-icons'
-import { faCircle } from '@fortawesome/free-regular-svg-icons'
+
 library.add(
   faUsers,
   faGlobe,
diff --git a/src/components/timeline_menu/timeline_menu_content.vue b/src/components/timeline_menu/timeline_menu_content.vue
index 32548c49..2e5d3ce9 100644
--- a/src/components/timeline_menu/timeline_menu_content.vue
+++ b/src/components/timeline_menu/timeline_menu_content.vue
@@ -24,7 +24,7 @@
         <FAIcon
           fixed-width
           class="fa-scale-110 fa-old-padding "
-          :icon="['far', 'circle']"
+          icon="circle"
         />
         <span
           :title="$t('nav.bubble_timeline_description')"
diff --git a/src/components/timeline_menu_tabs/timeline_menu_content.js b/src/components/timeline_menu_tabs/timeline_menu_content.js
new file mode 100644
index 00000000..9c2ef0c9
--- /dev/null
+++ b/src/components/timeline_menu_tabs/timeline_menu_content.js
@@ -0,0 +1,30 @@
+import { mapState } from 'vuex'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faUsers,
+  faGlobe,
+  faBookmark,
+  faEnvelope,
+  faHome
+} from '@fortawesome/free-solid-svg-icons'
+import { faCircle } from '@fortawesome/free-regular-svg-icons'
+library.add(
+  faUsers,
+  faGlobe,
+  faBookmark,
+  faEnvelope,
+  faHome,
+  faCircle
+)
+
+const TimelineMenuContent = {
+  computed: {
+    ...mapState({
+      currentUser: state => state.users.currentUser,
+      privateMode: state => state.instance.private,
+      federating: state => state.instance.federating
+    })
+  }
+}
+
+export default TimelineMenuContent
diff --git a/src/components/timeline_menu_tabs/timeline_menu_content.vue b/src/components/timeline_menu_tabs/timeline_menu_content.vue
new file mode 100644
index 00000000..32548c49
--- /dev/null
+++ b/src/components/timeline_menu_tabs/timeline_menu_content.vue
@@ -0,0 +1,114 @@
+<template>
+  <ul>
+    <li v-if="currentUser">
+      <router-link
+        class="menu-item"
+        :to="{ name: 'friends' }"
+      >
+        <FAIcon
+          fixed-width
+          class="fa-scale-110 fa-old-padding "
+          icon="home"
+        />
+        <span
+          :title="$t('nav.home_timeline_description')"
+          :aria-label="$t('nav.home_timeline_description')"
+        >{{ $t("nav.home_timeline") }}</span>
+      </router-link>
+    </li>
+    <li v-if="currentUser">
+      <router-link
+        class="menu-item"
+        :to="{ name: 'bubble-timeline' }"
+      >
+        <FAIcon
+          fixed-width
+          class="fa-scale-110 fa-old-padding "
+          :icon="['far', 'circle']"
+        />
+        <span
+          :title="$t('nav.bubble_timeline_description')"
+          :aria-label="$t('nav.bubble_timeline_description')"
+        >{{ $t("nav.bubble_timeline") }}</span>
+      </router-link>
+    </li>
+    <li v-if="currentUser || !privateMode">
+      <router-link
+        class="menu-item"
+        :to="{ name: 'public-timeline' }"
+      >
+        <FAIcon
+          fixed-width
+          class="fa-scale-110 fa-old-padding "
+          icon="users"
+        />
+        <span
+          :title="$t('nav.public_timeline_description')"
+          :aria-label="$t('nav.public_timeline_description')"
+        >{{ $t("nav.public_tl") }}</span>
+      </router-link>
+    </li>
+    <li v-if="federating && (currentUser || !privateMode)">
+      <router-link
+        class="menu-item"
+        :to="{ name: 'public-external-timeline' }"
+      >
+        <FAIcon
+          fixed-width
+          class="fa-scale-110 fa-old-padding "
+          icon="globe"
+        />
+        <span
+          :title="$t('nav.twkn_timeline_description')"
+          :aria-label="$t('nav.twkn_timeline_description')"
+        >{{ $t("nav.twkn") }}</span>
+      </router-link>
+    </li>
+    <li v-if="currentUser">
+      <router-link
+        class="menu-item"
+        :to="{ name: 'bookmarks'}"
+      >
+        <FAIcon
+          fixed-width
+          class="fa-scale-110 fa-old-padding "
+          icon="bookmark"
+        />
+        <span
+          :title="$t('nav.bookmarks')"
+          :aria-label="$t('nav.bookmarks')"
+        >{{ $t("nav.bookmarks") }}</span>
+      </router-link>
+    </li>
+    <li v-if="currentUser">
+      <router-link
+        class="menu-item"
+        :to="{ name: 'dms', params: { username: currentUser.screen_name } }"
+      >
+        <FAIcon
+          fixed-width
+          class="fa-scale-110 fa-old-padding "
+          icon="envelope"
+        />
+        <span
+          :title="$t('nav.dms')"
+          :aria-label="$t('nav.dms')"
+        >{{ $t("nav.dms") }}</span>
+      </router-link>
+    </li>
+  </ul>
+</template>
+
+<script src="./timeline_menu_content.js" ></script>
+
+<style lang="scss">
+@import "../../_variables.scss";
+.timeline-desc {
+  text-decoration: none;
+  color: var(--text, $fallback--text);
+  padding-left: 1em;
+  display: block;
+  background-color: scale(var(--bg, $fallback--bg), 0.1);
+  padding-bottom: 0.4em;
+}
+</style>
diff --git a/src/components/timeline_menu_tabs/timeline_menu_tabs.js b/src/components/timeline_menu_tabs/timeline_menu_tabs.js
new file mode 100644
index 00000000..40192b39
--- /dev/null
+++ b/src/components/timeline_menu_tabs/timeline_menu_tabs.js
@@ -0,0 +1,61 @@
+import Popover from '../popover/popover.vue'
+import TimelineMenuContent from './timeline_menu_content.vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faChevronDown
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(faChevronDown)
+
+// Route -> i18n key mapping, exported and not in the computed
+// because nav panel benefits from the same information.
+export const timelineNames = () => {
+  return {
+    'friends': 'nav.home_timeline',
+    'bookmarks': 'nav.bookmarks',
+    'dms': 'nav.dms',
+    'public-timeline': 'nav.public_tl',
+    'public-external-timeline': 'nav.twkn',
+    'bubble-timeline': 'nav.bubble_timeline'
+  }
+}
+
+const TimelineMenuTabs = {
+  components: {
+    Popover,
+    TimelineMenuContent
+  },
+  data () {
+    return {
+      isOpen: false
+    }
+  },
+  created () {
+    if (timelineNames()[this.$route.name]) {
+      this.$store.dispatch('setLastTimeline', this.$route.name)
+    }
+  },
+  computed: {
+    currentUser () {
+      return this.$store.state.users.currentUser
+    },
+    privateMode () {
+      return this.$store.state.instance.private
+    }
+  },
+  methods: {
+    timelineName () {
+      const route = this.$route.name
+      if (route === 'tag-timeline') {
+        return '#' + this.$route.params.tag
+      }
+      if (route === 'list-timeline') {
+        return this.$store.getters.findListTitle(this.$route.params.id)
+      }
+      const i18nkey = timelineNames()[this.$route.name]
+      return i18nkey ? this.$t(i18nkey) : route
+    }
+  }
+}
+
+export default TimelineMenuTabs
diff --git a/src/components/timeline_menu_tabs/timeline_menu_tabs.vue b/src/components/timeline_menu_tabs/timeline_menu_tabs.vue
new file mode 100644
index 00000000..f017fa1f
--- /dev/null
+++ b/src/components/timeline_menu_tabs/timeline_menu_tabs.vue
@@ -0,0 +1,96 @@
+<template>
+  <div
+    v-if="currentUser || !privateMode"
+    class="nav-items timeline-menu-tabs"
+  >
+    <router-link
+      v-if="currentUser"
+      :to="{ name: 'friends' }"
+      class="nav-icon"
+    >
+      <FAIcon
+        fixed-width
+        class="fa-scale-110 fa-old-padding"
+        icon="home"
+        :title="$t('nav.home_timeline_description')"
+      />
+    </router-link>
+    <router-link
+      :to="{ name: 'public-timeline' }"
+      class="nav-icon"
+    >
+      <FAIcon
+        fixed-width
+        class="fa-scale-110 fa-old-padding"
+        icon="users"
+        :title="$t('nav.public_timeline_description')"
+      />
+    </router-link>
+    <router-link
+      v-if="currentUser"
+      :to="{ name: 'bubble-timeline' }"
+      class="nav-icon"
+    >
+      <FAIcon
+        fixed-width
+        class="fa-scale-110 fa-old-padding"
+        :icon="['far', 'circle']"
+        :title="$t('nav.bubble_timeline_description')"
+      />
+    </router-link>
+    <router-link
+      :to="{ name: 'public-external-timeline' }"
+      class="nav-icon"
+    >
+      <FAIcon
+        fixed-width
+        class="fa-scale-110 fa-old-padding"
+        icon="globe"
+        :title="$t('nav.twkn_timeline_description')"
+      />
+    </router-link>
+    <span class="timeline-title">{{ timelineName() }}</span>
+  </div>
+</template>
+
+<script src="./timeline_menu_tabs.js" ></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.timeline-menu-tabs {
+  .nav-icon {
+    margin-left: 0.7em;
+    width: 2em;
+    height: 100%;
+    text-align: center;
+
+    &.router-link-active {
+      border-bottom: 2px solid var(--selectedMenuText, $fallback--text);
+      padding-bottom: 0.8em;
+
+      .svg-inline--fa {
+        font-weight: bolder;
+        color: $fallback--text;
+        color: var(--selectedMenuText, $fallback--text);
+        --lightText: var(--selectedMenuLightText, $fallback--lightText);
+      }
+    }
+  }
+
+  .timeline-title {
+    margin-left: 1em;
+    font-size: 1.2em;
+    font-weight: bold;
+    color: var(--selectedMenuText, $fallback--text);
+    color: var(--selectedMenuText, $fallback--text);
+    --lightText: var(--selectedMenuLightText, $fallback--lightText);
+  }
+
+  @media all and (max-width: 900px) {
+    .timeline-title {
+      display: none;
+    }
+  }
+}
+</style>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 853f5917..84e4a185 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -616,6 +616,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_panel_nav_shortcuts": "Show timeline navigation shortcuts at the top of the panel",
         "show_scrollbars": "Show side column's scrollbars",
         "show_wider_shortcuts": "Show wider gap between top panel shortcuts",
         "show_yous": "Show (You)s",
diff --git a/src/modules/config.js b/src/modules/config.js
index 501d5dfe..5b60520b 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
+  showPanelNavShortcuts: undefined, // instance default
   showWiderShortcuts: undefined, // instance default
   hideSiteFavicon: undefined, // instance default
   hideSiteName: undefined, // instance default
-- 
2.43.0