Creates prop for setting the collapse state of panels

src/components/Collapsable.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="collapsable">
-        <input :id="`collapsible-${uniqueKey}`" class="toggle" type="checkbox" checked>
+        <input
+            :id="`collapsible-${uniqueKey}`"
+            class="toggle"
+            type="checkbox"
+            :checked="!collapsed">
         <label :for="`collapsible-${uniqueKey}`" class="lbl-toggle" tabindex="0">
             <h2>{{ title }}</h2>
         </label>
@@ -18,6 +22,7 @@ export default {
   props: {
     uniqueKey: String,
     title: String,
+    collapsed: Boolean,
   },
 };
 </script>

src/components/FilterTile.vue

@@ -41,9 +41,13 @@ export default {
     window.addEventListener('keyup', (event) => {
       const { key } = event;
       if (/^[a-zA-Z]$/.test(key) && !document.activeElement.id) {
+        try {
           this.input += key;
           this.$refs.filter.focus();
           this.userIsTypingSomething();
+        } catch (e) {
+          // Do nothing
+        }
       }
     });
   },

src/components/ItemGroup.vue

@@ -1,5 +1,5 @@
 <template>
-   <Collapsable :title="title" :uniqueKey="groupId">
+   <Collapsable :title="title" :uniqueKey="groupId" :collapsed="collapsed">
     <div v-if="!items || items.length < 1" class="no-items">
       No Items to Show Yet
     </div>
@@ -25,6 +25,7 @@ export default {
   props: {
     groupId: String,
     title: String,
+    collapsed: Boolean,
     items: Array,
   },
   components: {

src/data/item-data.json

@@ -2,6 +2,7 @@
     {
         "id": "0",
         "name": "Server Management | External",
+        "collapsed": false,
         "items": [
             {
                 "id":"001",
@@ -32,6 +33,7 @@
     {
         "id": "1",
         "name": "Server Management | Hosted",
+        "collapsed": false,
         "items": [
             {
                 "id":"001",
@@ -98,5 +100,28 @@
                 "url": ""
             }
         ]
+    },
+    {
+        "id": "2",
+        "name": "Dev Tools",
+        "collapsed": true,
+        "items": [
+            {
+                "id":"001",
+                "title": "DNS Management",
+                "description": "Configure Server Gateways",
+                "provider": "CloudFlare",
+                "icon": "009-cloud",
+                "url": "https://dash.cloudflare.com"
+            },
+            {
+                "id":"002",
+                "title": "Servers",
+                "description": "Manage scaling, power and credentials",
+                "provider": "Digital Ocean",
+                "icon": "021-folder",
+                "url": "https://cloud.digitalocean.com"
+            }
+        ]
     }
 ]

src/views/Home.vue

@@ -9,6 +9,7 @@
         :key="item.id"
         :groupId="item.id"
         :title="item.name"
+        :collapsed="item.collapsed"
         :items="filterTiles(item.items)"
       />
     </div>