change styles for the dropdown, make things work nicely on mobile

2 files changed, 139 insertions, 13 deletions

diff --git a/src/components/timeline_menu/timeline_menu.js b/src/components/timeline_menu/timeline_menu.js
index 912dd79a..d35b7789 100644
--- a/src/components/timeline_menu/timeline_menu.js
+++ b/src/components/timeline_menu/timeline_menu.js
@@ -5,11 +5,25 @@ const TimelineMenu = {
   components: {
     Popover
   },
+  data () {
+    return {
+      isOpen: false
+    }
+  },
   created () {
     if (this.currentUser && this.currentUser.locked) {
       this.$store.dispatch('startFetchingFollowRequests')
     }
   },
+  methods: {
+    openMenu () {
+      // Tried using $nextTick, but the animation wouldn't
+      // play, I assume it played too quickly
+      setTimeout(() => {
+        this.isOpen = true
+      }, 1)
+    }
+  },
   computed: {
     ...mapState({
       currentUser: state => state.users.currentUser,
diff --git a/src/components/timeline_menu/timeline_menu.vue b/src/components/timeline_menu/timeline_menu.vue
index dfdf7180..9cb40262 100644
--- a/src/components/timeline_menu/timeline_menu.vue
+++ b/src/components/timeline_menu/timeline_menu.vue
@@ -2,28 +2,36 @@
   <Popover
     trigger="click"
     class="timeline-menu"
-    popover-class="nav-panel timeline-menu-popover"
+    :class="{ 'open': isOpen }"
+    :margin="{ left: -15, right: -200 }"
+    :bound-to="{ x: 'container' }"
+    popover-class="timeline-menu-popover-wrap"
+    @show="openMenu"
+    @close="() => isOpen = false"
   >
-    <div slot="content">
+    <div
+      slot="content"
+      class="timeline-menu-popover panel panel-default"
+    >
       <ul>
         <li v-if="currentUser">
           <router-link :to="{ name: 'friends' }">
-            <i class="button-icon icon-home-2" /> {{ $t("nav.timeline") }}
+            <i class="button-icon icon-home-2" />{{ $t("nav.timeline") }}
           </router-link>
         </li>
         <li v-if="currentUser">
           <router-link :to="{ name: 'dms', params: { username: currentUser.screen_name } }">
-            <i class="button-icon icon-mail-alt" /> {{ $t("nav.dms") }}
+            <i class="button-icon icon-mail-alt" />{{ $t("nav.dms") }}
           </router-link>
         </li>
         <li v-if="currentUser || !privateMode">
           <router-link :to="{ name: 'public-timeline' }">
-            <i class="button-icon icon-users" /> {{ $t("nav.public_tl") }}
+            <i class="button-icon icon-users" />{{ $t("nav.public_tl") }}
           </router-link>
         </li>
         <li v-if="federating && (currentUser || !privateMode)">
           <router-link :to="{ name: 'public-external-timeline' }">
-            <i class="button-icon icon-globe" /> {{ $t("nav.twkn") }}
+            <i class="button-icon icon-globe" />{{ $t("nav.twkn") }}
           </router-link>
         </li>
       </ul>
@@ -32,7 +40,7 @@
       slot="trigger"
       class="title timeline-menu-title"
     >
-      {{ timelineNamesForRoute[$route.name] }}
+      <span>{{ timelineNamesForRoute[$route.name] }}</span>
       <i class="icon-down-open" />
     </div>
   </Popover>
@@ -44,18 +52,122 @@
 @import '../../_variables.scss';
 
 .timeline-menu {
-  flex-grow: 1;
+  flex-shrink: 1;
+  margin-right: auto;
+  min-width: 0;
+  width: 24rem;
+  .timeline-menu-popover-wrap {
+    overflow: hidden;
+    margin-top: 0.6em;
+    padding: 0 15px 15px 15px;
+  }
   .timeline-menu-popover {
-    width: 20rem;
+    width: 24rem;
+    max-width: 100vw;
+    margin: 0;
     font-size: 1rem;
-    margin-left: -0.6em;
-    margin-top: 0.6em;
+    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 {
-    flex-grow: 0;
-    width: 20rem;
     margin: 0;
+    cursor: pointer;
+    display: flex;
+    user-select: none;
+    width: 100%;
+
+    span {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    i {
+      margin-left: 0.6em;
+      flex-shrink: 0;
+      font-size: 1rem;
+      transition: transform 100ms;
+    }
+  }
+
+  &.open .timeline-menu-title i {
+    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;
+    }
+
+    i {
+      margin: 0 0.5em;
+    }
+  }
+
+  a {
+    display: block;
+    padding: 0.6em 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;
+      }
+    }
   }
 }