Cleanup and remove divider element in side drawer

1 files changed, 22 insertions, 21 deletions

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>