Add collection and new vocab + mess with repository

assets/app.js

@@ -44,10 +44,12 @@ if (location.pathname.includes('login')) {
 
 if (! location.pathname.includes('login')) {
     const vocabs = document.querySelector('#vocabs');
+    const records = document.querySelector('#records');
     const userMenu = document.querySelector('.dropdown-trigger');
     const userCaret = document.querySelector('#user-caret');
 
     const forVocabs = document.querySelector('#for-vocabs')
+    const forRecords = document.querySelector('#for-records')
     
     if (forVocabs) {
         forVocabs.addEventListener('click', function () {
@@ -63,6 +65,20 @@ if (! location.pathname.includes('login')) {
         });
     }
 
+    if (forRecords) {
+        forRecords.addEventListener('click', function () {
+            records.classList.toggle('is-hidden');
+
+            if (this.firstElementChild.classList.contains('fa-angle-right')) {
+                this.firstElementChild.classList.remove('fa-angle-right');
+                this.firstElementChild.classList.add('fa-angle-down');
+            } else {
+                this.firstElementChild.classList.remove('fa-angle-down');
+                this.firstElementChild.classList.add('fa-angle-right');
+            }
+        });
+    }
+
     userMenu.addEventListener('click', function () {
         document.querySelector('.dropdown').classList.toggle('is-active');
         if (userCaret.classList.contains('fa-caret-down')) {

assets/styles/app.css

@@ -1,6 +1,6 @@
-@import url('../vendor/bulma/css/bulma.min.css');
 @import url('../fonts/stylesheet.css');
 @import url('../fontawesome-free-6.6.0-web/css/all.min.css');
+@import url('../vendor/bulma/css/bulma.min.css');
 
 :root {
     --arcoa-blue: rgba(66,135,199,0.98);
@@ -15,13 +15,11 @@ body {
     min-height: 100vh;
     overflow-y: auto;
 }
-#vocabs a {
+
+#vocabs a,
+#records a {
     color: #fff;
 }
-/* For dev only*/
-.sf-toolbar-clearer {
-    display: none !important;
-}
 
 .table.record td, 
 .table.record th {
@@ -29,5 +27,13 @@ body {
 }
 
 .table.record th {
-    min-width: 220px;
+    min-width: 240px;
+}
+
+.table td {
+    vertical-align: middle;
+}
+
+.results tr > th {
+    text-align: center !important;
 }