Sidebar desktop navigation refactoring

resources/js/components/Sidebar/ContentGroup.vue

@@ -1,16 +1,13 @@
 <template>
-    <div class="content-group" :class="{'is-collapsed': ! isVisible, 'collapsable': canCollapse}">
-
-        <div class="group-title" @click="hideGroup">
-            <TextLabel class="title">{{ title }}</TextLabel>
-            <chevron-up-icon v-if="canCollapseWrapper" size="12" class="icon" />
+    <div class="ml-6 mb-6" :class="{'is-collapsed': ! isVisible, 'collapsable': canCollapse}">
+        <div @click="hideGroup" class="flex items-center justify-between mb-2">
+            <small class="text-xs font-bold dark:text-gray-700 text-gray-400">
+				{{ title }}
+			</small>
+            <chevron-up-icon v-if="canCollapseWrapper" size="12" class="mr-5 cursor-pointer vue-feather text-gray-300 transform" :class="{'rotate-180': ! isVisible}" />
         </div>
 
-        <transition name="list">
-            <div class="wrapper" v-show="isVisible">
-                <slot></slot>
-            </div>
-        </transition>
+		<slot v-if="isVisible" />
     </div>
 </template>
 
@@ -20,7 +17,11 @@
 
     export default {
         name: 'ContentGroup',
-        props: ['title', 'canCollapse', 'slug'],
+        props: [
+			'canCollapse',
+			'title',
+			'slug'
+		],
         components: {
             ChevronUpIcon,
             TextLabel,
@@ -52,58 +53,3 @@
         }
     }
 </script>
-
-<style scoped lang="scss">
-    @import '/resources/sass/vuefilemanager/_mixins';
-
-    .content-group {
-        margin-bottom: 15px;
-        transition: all 300ms;
-
-        .group-title {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 5px;
-
-            .title {
-                margin-bottom: 0;
-            }
-
-            .icon {
-                margin-right: 19px;
-                opacity: 0.25;
-                @include transition;
-            }
-        }
-
-        &.collapsable {
-            .group-title {
-                cursor: pointer;
-            }
-        }
-
-        &.is-collapsed {
-            margin-bottom: 15px;
-
-            .icon {
-                @include transform(rotate(180deg));
-            }
-
-        }
-    }
-
-    .list-enter,
-    .list-leave-to {
-        visibility: hidden;
-        height: 0;
-        margin: 0;
-        padding: 0;
-        opacity: 0;
-    }
-
-    .list-enter-active,
-    .list-leave-active {
-        transition: all 300ms;
-    }
-</style>