sidebar quick access

index.html

@@ -27,6 +27,7 @@
                     <div>
                         <h2 class="nosel">Quick Access</h2>
                     </div>
+                    <div id="favorites-container"></div>
                 </div>
             </div>
             <div id='container'>

json/qa.json

@@ -0,0 +1,23 @@
+{
+    "default": [
+        {
+            "name": "Desktop",
+            "win32": "{r}\\Desktop"
+        }, {
+            "name": "Documents",
+            "win32": "{r}\\Documents"
+        }, {
+            "name": "Pictures",
+            "win32": "{r}\\Pictures"
+        }, {
+            "name": "Videos",
+            "win32": "{r}\\Videos"
+        }, {
+            "name": "Music",
+            "win32": "{r}\\Music"
+        }, {
+            "name": "Downloads",
+            "win32": "{r}\\Downloads"
+        }
+    ]
+}

scripts/startup/initsidebar.js

@@ -0,0 +1,27 @@
+const refresh = require('../fileview/refresh');
+
+const qa = require('../../json/qa.json');
+const os = require("os");
+
+module.exports = () => {
+    let root
+    switch (window.kade.platform) {
+        case 'win32':
+            root = `${os.homedir()}`;
+            break;
+        case 'linux':
+            root = `~/home`;
+            break;
+    }
+
+    let quickAccess = document.getElementById('favorites-container');
+
+    qa.default.forEach(i => {
+        let quick = document.createElement('div');
+        quick.innerHTML = i.name;
+        quick.onclick = () => {refresh(i[window.kade.platform].replace('{r}', root));};
+        quick.className = 'favorites-button';
+        quick.classList.add('nosel');
+        quickAccess.appendChild(quick);
+    });
+};

scripts/startup/preload.js

@@ -40,6 +40,7 @@ window.addEventListener('DOMContentLoaded', () => {
     }
 
     require('./initcontext')();
+    require('./initsidebar')();
 
     require('../fileview/refresh')(startDir);
     setButtons();

styles/sidebar.css

@@ -12,4 +12,27 @@
     height: 100%;
 }
 
-#container {margin-left: 200px;}
+#container {margin-left: 200px;}
+
+#favorites-container {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    align-content: flex-start;
+    justify-content: flex-start;
+    row-gap: 6px;
+}
+
+.favorites-button {
+    padding: 4px 6px;
+    color: #afafaf;
+    border-radius: 3px 3px;
+    cursor: pointer;
+    transition: padding-left .05s linear;
+}
+
+.favorites-button:hover {
+    background-color: #a172a65f;
+    padding-left: 10px;
+    color: white;
+}