Customize sidebar

assets/css/scss/_sidebar.scss

@@ -85,4 +85,8 @@
 .breadcrumb{
   background-color: $breadcrumb-back;
   margin-bottom: 0.7rem;
+}
+
+.navbar-expand-sm .navbar-toggler {
+  display: block;
 }

assets/vue/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <span>
+  <div>
     <transition
       name="fade"
       mode="out-in"
@@ -8,30 +8,24 @@
       <Header />
     </transition>
 
-    <b-container fluid>
-      <b-row>
-        <b-col>
-          <transition
-            name="fade"
-            mode="out-in"
-            appear
-          >
-            <Sidebar />
-          </transition>
-        </b-col>
+    <Sidebar />
 
-        <b-col cols="10">
-          <Breadcrumb layout-class="pl-3 py-3" />
-          <snackbar />
-          <router-view />
-          <div
-            id="legacy_content"
-            v-html="legacy_content"
-          />
-          <b-col />
-        </b-col></b-row>
-    </b-container>
-  </span>
+    <main role="main">
+      <b-container fluid>
+        <b-row>
+          <b-col cols="12">
+            <Breadcrumb />
+            <snackbar />
+            <router-view />
+            <div
+              id="legacy_content"
+              v-html="legacy_content"
+            />
+          </b-col>
+        </b-row>
+      </b-container>
+    </main>
+  </div>
 </template>
 <style>
 </style>

assets/vue/components/layout/Header.vue

@@ -1,16 +1,27 @@
 <template>
   <b-navbar
-    toggleable="lg"
+    toggleable="sm"
     type="dark"
     variant="primary"
     sticky
   >
-    <b-navbar-brand href="/">
+    <button
+      v-b-toggle.sidebar-1
+      type="button"
+      aria-label="Toggle navigation"
+      class="navbar-toggler mr-3"
+      aria-controls="sidebar-1"
+    >
+      <span class="navbar-toggler-icon" />
+    </button>
+
+    <b-navbar-brand
+      href="/"
+      class="mr-auto mr-sm-0"
+    >
       Chamilo
     </b-navbar-brand>
 
-    <b-navbar-toggle target="nav-collapse" />
-
     <b-collapse
       id="nav-collapse"
       is-nav
@@ -75,11 +86,16 @@
           v-if="isAuthenticated"
           right
           no-caret
+          toggle-class="p-0"
         >
           <!-- Using 'button-content' slot -->
           <template v-slot:button-content>
             <b-avatar variant="light" />
           </template>
+          <b-dropdown-text style="width: 240px;">
+            {{ username }}
+          </b-dropdown-text>
+          <b-dropdown-divider />
           <b-dropdown-item href="/main/messages/inbox.php">
             Inbox
           </b-dropdown-item>
@@ -117,6 +133,9 @@ export default {
     isAuthenticated() {
       return this.$store.getters['security/isAuthenticated']
     },
+    username() {
+      return this.$store.getters['security/getUser'].username
+    }
   },
   methods: {
   }

assets/vue/components/layout/Sidebar.vue

@@ -1,56 +1,88 @@
 <template>
-  <b-list-group>
-    <b-list-group-item :to="{ name: 'Index' }">
-      Home
-    </b-list-group-item>
-
-    <b-list-group-item
-      v-if="isAuthenticated"
-      :to="{ name: 'MyCourses' }"
-    >
-      Courses
-    </b-list-group-item>
-
-    <b-list-group-item
-      v-if="isAuthenticated"
-      :to="{ name: 'MySessions' }"
+  <b-sidebar
+    id="sidebar-1"
+    title="Chamilo"
+    backdrop
+  >
+    <template
+      v-slot:footer
     >
-      Sessions
-    </b-list-group-item>
+      <b-nav
+        v-if="!isAuthenticated"
+        class="d-sm-none bg-dark text-light"
+      >
+        <b-nav-item to="/login">
+          Login
+        </b-nav-item>
+        <b-nav-item to="/register">
+          Register
+        </b-nav-item>
+      </b-nav>
 
-    <b-list-group-item
-      v-if="isAuthenticated"
-    />
+      <p
+        v-if="isAuthenticated"
+        class="d-sm-none px-3 py-2 mb-0 bg-dark text-light"
+      >
+        {{ username }}
+      </p>
+      <b-nav
+        v-if="isAuthenticated"
+        class="d-sm-none bg-dark text-light"
+      >
+        <b-nav-item href="/main/messages/inbox.php">
+          Inbox
+        </b-nav-item>
+        <b-nav-item href="/account/home">
+          Profile
+        </b-nav-item>
+        <b-nav-item href="/logout">
+          Logout
+        </b-nav-item>
+      </b-nav>
+    </template>
 
-    <b-list-group-item
-      v-if="isAuthenticated"
-      :to="'/main/admin/user_list.php'"
-    >
-      Users
-    </b-list-group-item>
-
-    <b-list-group-item
-      v-if="isAuthenticated"
-      :to="'/main/admin/course_list.php'"
-    >
-      Courses
-    </b-list-group-item>
-
-    <b-list-group-item
-      v-if="isAuthenticated"
-      :to="'/main/session/session_list.php'"
-    >
-      Sessions
-    </b-list-group-item>
-
-
-    <b-list-group-item
-      v-if="isAuthenticated"
-      :to="'/main/admin/index.php'"
-    >
-      Settings
-    </b-list-group-item>
-  </b-list-group>
+    <b-nav vertical>
+      <b-nav-item :to="{ name: 'Index' }">
+        Home
+      </b-nav-item>
+      <b-nav-item
+        v-if="isAuthenticated"
+        :to="{ name: 'MyCourses' }"
+      >
+        Courses
+      </b-nav-item>
+      <b-nav-item
+        v-if="isAuthenticated"
+        :to="{ name: 'MySessions' }"
+      >
+        Sessions
+      </b-nav-item>
+      <b-nav-item
+        v-if="isAuthenticated"
+        :to="'/main/admin/user_list.php'"
+      >
+        Users
+      </b-nav-item>
+      <b-nav-item
+        v-if="isAuthenticated"
+        :to="'/main/admin/course_list.php'"
+      >
+        Courses
+      </b-nav-item>
+      <b-nav-item
+        v-if="isAuthenticated"
+        :to="'/main/session/session_list.php'"
+      >
+        Sessions
+      </b-nav-item>
+      <b-nav-item
+        v-if="isAuthenticated"
+        :to="'/main/admin/index.php'"
+      >
+        Settings
+      </b-nav-item>
+    </b-nav>
+  </b-sidebar>
 </template>
 
 <script>
@@ -59,6 +91,9 @@ export default {
     isAuthenticated() {
       return this.$store.getters['security/isAuthenticated']
     },
+    username() {
+      return this.$store.getters['security/getUser'].username
+    }
   },
 };