vercel - hide filter by default

Author: o2sh

docs/vercel/src/Index.svelte

@@ -7,6 +7,7 @@
 
   let tagName: string;
   let htmlUrl: string;
+  let showMenu: boolean;
 
   const languages: Language[] = Object.entries(data as Languages).map(
     ([name, { type, ascii, colors }]) => ({
@@ -71,28 +72,31 @@
     Suggestions and PRs are welcome at <a
       href="https://github.com/o2sh/onefetch">github.com/o2sh/onefetch</a>
   </p>
-
-  <h3>Languages <small>({$filteredLanguages.length})</small></h3>
-
-  <strong>Filter by type</strong>
-
-  <div class="checkbox-group">
-    {#each languageTypes as type}
-      <label for={type}>
-        <input
-          id={type}
-          type="checkbox"
-          value={type}
-          bind:group={$filter.checkboxes} />
-        {type}
-      </label>
-    {/each}
+  <div class="title">
+    <h3>Languages <small>({$filteredLanguages.length})</small></h3>
+    <button class="filter-button" on:click={() => (showMenu = !showMenu)}
+      >Filter by type</button>
   </div>
 
-  <small
-    >Note: By default, onefetch will only recognize <strong>programming</strong>
-    and <strong>markup</strong> types. Use the
-    <code>--type</code> flag to configure.</small>
+  <div class:hide={!showMenu}>
+    <div class="checkbox-group">
+      {#each languageTypes as type}
+        <label for={type}>
+          <input
+            id={type}
+            type="checkbox"
+            value={type}
+            bind:group={$filter.checkboxes} />
+          {type}
+        </label>
+      {/each}
+    </div>
+    <small
+      >Note: By default, onefetch will only recognize <strong
+        >programming</strong>
+      and <strong>markup</strong> types. Use the
+      <code>--type</code> flag to configure.</small>
+  </div>
 
   {#each $filteredLanguages as language}
     <AsciiPreview
@@ -115,15 +119,29 @@
     padding: 0.5rem 0;
   }
 
+  .title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 3rem;
+    margin-bottom: 1.5rem;
+  }
+
+  .title h3 {
+    margin-bottom: 0;
+    margin-top: 0;
+  }
+
   .checkbox-group {
     margin-top: 1.5rem;
   }
 
   .checkbox-group label {
     width: fit-content;
+    text-transform: capitalize;
   }
 
-  .checkbox-group label {
-    text-transform: capitalize;
+  .hide {
+    display: none;
   }
 </style>