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] 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"