Remove panel switcher, add rudimentary drawer

src/App.js

@@ -6,6 +6,7 @@ import InstanceSpecificPanel from './components/instance_specific_panel/instance
 import FeaturesPanel from './components/features_panel/features_panel.vue'
 import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_panel.vue'
 import ChatPanel from './components/chat_panel/chat_panel.vue'
+import SideDrawer from './components/side_drawer/side_drawer.vue'
 
 export default {
   name: 'app',
@@ -17,7 +18,8 @@ export default {
     InstanceSpecificPanel,
     FeaturesPanel,
     WhoToFollowPanel,
-    ChatPanel
+    ChatPanel,
+    SideDrawer
   },
   data: () => ({
     mobileActivePanel: 'timeline',
@@ -28,7 +30,13 @@ export default {
         window.CSS.supports('-moz-mask-size', 'contain') ||
         window.CSS.supports('-ms-mask-size', 'contain') ||
         window.CSS.supports('-o-mask-size', 'contain')
-    )
+    ),
+    mobileViews: {
+      postStatus: 'poststatus',
+      notifications: 'notifications',
+      timeline: 'timeline'
+    },
+    showMobileSidebar: false
   }),
   created () {
     // Load the locale from the storage
@@ -67,6 +75,9 @@ export default {
         'background-image': `url(${this.background})`
       }
     },
+    mobileShowOnlyIn () {
+      return view => ({ 'mobile-hidden': this.mobileActivePanel !== view })
+    },
     sitename () { return this.$store.state.instance.name },
     chat () { return this.$store.state.chat.channel.state === 'joined' },
     suggestionsEnabled () { return this.$store.state.instance.suggestionsEnabled },
@@ -85,6 +96,9 @@ export default {
     },
     onFinderToggled (hidden) {
       this.finderHidden = hidden
+    },
+    toggleMobileSidebar () {
+      this.showMobileSidebar = !this.showMobileSidebar
     }
   }
 }

src/App.vue

@@ -13,27 +13,33 @@
           <router-link class="site-name" :to="{ name: 'root' }" active-class="home">{{sitename}}</router-link>
         </div>
         <div class='item right'>
+          <a href="#" @click.prevent="toggleMobileSidebar()"><i class="icon-menu"></i></a>
           <user-finder class="nav-icon" @toggled="onFinderToggled"></user-finder>
           <router-link @click.native="activatePanel('timeline')" :to="{ name: 'settings'}"><i class="icon-cog nav-icon" :title="$t('nav.preferences')"></i></router-link>
           <a href="#" v-if="currentUser" @click.prevent="logout"><i class="icon-logout nav-icon" :title="$t('login.logout')"></i></a>
         </div>
       </div>
     </nav>
-    <div class="container" id="content">
-      <div class="panel-switcher">
-        <button @click="activatePanel('sidebar')">Sidebar</button>
-        <button @click="activatePanel('timeline')">Timeline</button>
-      </div>
-      <div class="sidebar-flexer" :class="{ 'mobile-hidden': mobileActivePanel != 'sidebar'}">
+
+
+
+    <div v-if="" class="container" id="content">
+      <side-drawer :activatePanel="activatePanel" :closed="!showMobileSidebar"></side-drawer>
+      <!--
+        <button @click="activatePanel(mobileViews.postStatus)">post status</button>
+        <button @click="activatePanel(mobileViews.notifications)">notifs</button>
+        <button @click="activatePanel(mobileViews.timeline)">timeline</button>
+      -->
+      <div class="sidebar-flexer">
         <div class="sidebar-bounds">
           <div class="sidebar-scroller">
             <div class="sidebar">
-              <user-panel :activatePanel="activatePanel"></user-panel>
-              <nav-panel :activatePanel="activatePanel"></nav-panel>
-              <instance-specific-panel v-if="showInstanceSpecificPanel"></instance-specific-panel>
+              <user-panel :activatePanel="activatePanel" :class="mobileShowOnlyIn(mobileViews.postStatus)"></user-panel>
+              <nav-panel :activatePanel="activatePanel" class="mobile-hidden"></nav-panel>
+              <instance-specific-panel v-if="showInstanceSpecificPanel" class="mobile-hidden"></instance-specific-panel>
               <features-panel v-if="!currentUser"></features-panel>
               <who-to-follow-panel v-if="currentUser && suggestionsEnabled"></who-to-follow-panel>
-              <notifications :activatePanel="activatePanel" v-if="currentUser"></notifications>
+              <notifications :activatePanel="activatePanel" v-if="currentUser" :class="mobileShowOnlyIn(mobileViews.notifications)"></notifications>
             </div>
           </div>
         </div>

src/components/side_drawer/side_drawer.js

@@ -0,0 +1,13 @@
+const SideDrawer = {
+  props: [ 'activatePanel', 'closed' ],
+  computed: {
+    currentUser () {
+      return this.$store.state.users.currentUser
+    },
+    chat () {
+      return this.$store.state.chat.channel
+    }
+  }
+}
+
+export default SideDrawer

src/components/side_drawer/side_drawer.vue

@@ -0,0 +1,116 @@
+<template>
+  <div>
+    <div class="panel panel-default side-drawer" :class="{'side-drawer-closed': closed}">
+      <ul>
+        <li v-if='currentUser'>
+          <router-link @click.native="activatePanel('timeline')" to='/main/friends'>
+            {{ $t("nav.timeline") }}
+          </router-link>
+        </li>
+        <li v-if='currentUser'>
+          <router-link @click.native="activatePanel('timeline')" :to="{ name: 'mentions', params: { username: currentUser.screen_name } }">
+            {{ $t("nav.mentions") }}
+          </router-link>
+        </li>
+        <li v-if='currentUser'>
+          <router-link @click.native="activatePanel('timeline')" :to="{ name: 'dms', params: { username: currentUser.screen_name } }">
+            {{ $t("nav.dms") }}
+          </router-link>
+        </li>
+        <li v-if='currentUser && currentUser.locked'>
+          <router-link @click.native="activatePanel('timeline')" to='/friend-requests'>
+            {{ $t("nav.friend_requests") }}
+          </router-link>
+        </li>
+        <li>
+          <router-link @click.native="activatePanel('timeline')" to='/main/public'>
+            {{ $t("nav.public_tl") }}
+          </router-link>
+        </li>
+        <li>
+          <router-link @click.native="activatePanel('timeline')" to='/main/all'>
+            {{ $t("nav.twkn") }}
+          </router-link>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script src="./side_drawer.js" ></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.side-drawer {
+  height: 100%; /* 100% Full-height */
+  position: fixed; /* Stay in place */
+  z-index: 1000; /* Stay on top */
+  top: 0; /* Stay at the top */
+  left: -200px;
+  overflow-x: hidden; /* Disable horizontal scroll */
+  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
+  transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
+  margin: 0;
+  padding-left: 200px;
+}
+
+.side-drawer-closed {
+  left: calc(-100% - 200px);
+}
+
+.side-drawer .panel {
+  overflow: hidden;
+  margin: 0;
+}
+.side-drawer ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.side-drawer li {
+  border-bottom: 1px solid;
+  border-color: $fallback--border;
+  border-color: var(--border, $fallback--border);
+  padding: 0;
+
+  &:first-child a {
+    border-top-right-radius: $fallback--panelRadius;
+    border-top-right-radius: var(--panelRadius, $fallback--panelRadius);
+    border-top-left-radius: $fallback--panelRadius;
+    border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
+  }
+
+  &: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);
+  }
+}
+
+.side-drawer li:last-child {
+  border: none;
+}
+
+.side-drawer a {
+  display: block;
+  padding: 0.8em 0.85em;
+
+  &:hover {
+    background-color: $fallback--lightBg;
+    background-color: var(--lightBg, $fallback--lightBg);
+  }
+
+  &.router-link-active {
+    font-weight: bolder;
+    background-color: $fallback--lightBg;
+    background-color: var(--lightBg, $fallback--lightBg);
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+</style>