Cleanup and remove divider element in side drawer

3 files changed, 23 insertions, 24 deletions

diff --git a/src/App.js b/src/App.js
index 1132110c..85df9416 100644
--- a/src/App.js
+++ b/src/App.js
@@ -70,9 +70,6 @@ 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 },
diff --git a/src/components/side_drawer/side_drawer.js b/src/components/side_drawer/side_drawer.js
index 82d6d209..538b919d 100644
--- a/src/components/side_drawer/side_drawer.js
+++ b/src/components/side_drawer/side_drawer.js
@@ -1,6 +1,7 @@
 import UserCardContent from '../user_card_content/user_card_content.vue'
 import { unseenNotificationsFromStore } from '../../services/notification_utils/notification_utils'
 
+// TODO: separate touch gesture stuff into their own utils if more components want them
 const deltaCoord = (oldCoord, newCoord) => [newCoord[0] - oldCoord[0], newCoord[1] - oldCoord[1]]
 
 const touchEventCoord = e => ([e.touches[0].screenX, e.touches[0].screenY])
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index 156c4934..b4613422 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -1,5 +1,7 @@
 <template>
-  <div class="side-drawer-container" :class="{ 'side-drawer-container-closed': closed, 'side-drawer-container-open': !closed }">
+  <div class="side-drawer-container"
+    :class="{ 'side-drawer-container-closed': closed, 'side-drawer-container-open': !closed }"
+  >
     <div class="side-drawer"
       :class="{'side-drawer-closed': closed}"
       @touchstart="touchStart"
@@ -30,9 +32,8 @@
             {{ $t("nav.dms") }}
           </router-link>
         </li>
-        <li>
-          <div class="divider"></div>
-        </li>
+      </ul>
+      <ul>
         <li v-if="currentUser" @click="toggleDrawer">
           <router-link :to="{ name: 'friends' }">
             {{ $t("nav.timeline") }}
@@ -58,9 +59,8 @@
             {{ $t("nav.chat") }}
           </router-link>
         </li>
-        <li>
-          <div class="divider"></div>
-        </li>
+      </ul>
+      <ul>
         <li @click="toggleDrawer">
           <router-link :to="{ name: 'user-search'}">
             {{ $t("nav.user_search") }}
@@ -78,7 +78,10 @@
         </li>
       </ul>
     </div>
-    <div class="side-drawer-click-outside" @click.stop.prevent="toggleDrawer" :class="{'side-drawer-click-outside-closed': closed}"></div>
+    <div class="side-drawer-click-outside"
+      @click.stop.prevent="toggleDrawer"
+      :class="{'side-drawer-click-outside-closed': closed}"
+    ></div>
   </div>
 </template>
 
@@ -114,8 +117,8 @@
 }
 
 .side-drawer {
-  overflow-x: hidden; /* Disable horizontal scroll */
-  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
+  overflow-x: hidden;
+  transition: 0.5s;
   transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
   margin: 0 0 0 -100px;
   padding: 0 0 1em 100px;
@@ -159,18 +162,20 @@
   list-style: none;
   margin: 0;
   padding: 0;
+
+  border-bottom: 1px solid;
+  border-color: $fallback--border;
+  border-color: var(--border, $fallback--border);
+  margin: 0.2em 0;
+}
+
+.side-drawer ul:last-child {
+  border: 0;
 }
 
 .side-drawer li {
   padding: 0;
 
-  .divider {
-    border-top: 1px solid;
-    border-color: $fallback--border;
-    border-color: var(--border, $fallback--border);
-    margin: 0.2em 0;
-  }
-
   a {
     display: block;
     padding: 0.5em 0.85em;
@@ -181,8 +186,4 @@
     }
   }
 }
-
-.side-drawer li:last-child {
-  border: none;
-}
 </style>