Import Collections directly from Docs page

components/collections/collection.vue

@@ -14,7 +14,7 @@
           @click="$emit('select-collection')"
           v-tooltip.left="$t('import')"
         >
-          <i class="material-icons">keyboard_backspace</i>
+          <i class="material-icons">topic</i>
         </button>
         <v-popover>
           <button class="tooltip-target icon" v-tooltip.left="$t('more')">
@@ -51,6 +51,7 @@
             :folder="folder"
             :folderIndex="index"
             :collection-index="collectionIndex"
+            :doc="doc"
             @edit-folder="editFolder(collectionIndex, folder, index)"
             @edit-request="$emit('edit-request', $event)"
           />
@@ -66,6 +67,7 @@
             :collection-index="collectionIndex"
             :folder-index="-1"
             :request-index="index"
+            :doc="doc"
             @edit-request="
               $emit('edit-request', {
                 request,

components/collections/folder.vue

@@ -38,6 +38,7 @@
             :collection-index="collectionIndex"
             :folder-index="folderIndex"
             :request-index="index"
+            :doc="doc"
             @edit-request="
               $emit('edit-request', {
                 request,
@@ -77,6 +78,7 @@ export default {
     folder: Object,
     collectionIndex: Number,
     folderIndex: Number,
+    doc: Boolean,
   },
   components: {
     request: () => import("./request"),

components/collections/index.vue

@@ -80,18 +80,12 @@ TODO:
         </li>
       </ul>
     </div>
-    <!-- <nuxt-link :to="localePath('doc')" :aria-label="$t('documentation')">
-      <button class="icon">
-        <i class="material-icons">topic</i>
-        <span>{{ $t("generate_docs") }}</span>
-      </button>
-    </nuxt-link> -->
   </pw-section>
 </template>
 
 <style scoped lang="scss">
 .virtual-list {
-  max-height: calc(100vh - 290px);
+  max-height: calc(100vh - 245px);
 }
 
 ul {

components/collections/request.vue

@@ -1,7 +1,11 @@
 <template>
   <div class="flex-wrap">
     <div>
-      <button class="icon" @click="selectRequest()" v-tooltip="$t('use_request')">
+      <button
+        class="icon"
+        @click="!doc ? selectRequest() : {}"
+        v-tooltip="!doc ? $t('use_request') : ''"
+      >
         <i class="material-icons">insert_drive_file</i>
         <span>{{ request.name }}</span>
       </button>
@@ -50,6 +54,7 @@ export default {
     collectionIndex: Number,
     folderIndex: Number,
     requestIndex: Number,
+    doc: Boolean,
   },
   methods: {
     syncCollections() {

components/layout/section.vue

@@ -14,8 +14,6 @@
 
 <style scoped lang="scss">
 fieldset {
-  display: flex;
-  flex: 1;
   margin: 16px 0;
   border-radius: 8px;
   background-color: var(--bg-dark-color);

components/layout/sidenav.vue

@@ -126,7 +126,7 @@
       <nav class="secondary-nav">
         <ul>
           <li>
-            <a href="#collections" v-tooltip.right="$t('collections')">
+            <a href="#import" v-tooltip.right="$t('import')">
               <i class="material-icons">folder</i>
             </a>
           </li>

pages/doc.vue

@@ -2,7 +2,7 @@
   <div class="page">
     <div class="content">
       <div class="page-columns inner-left">
-        <pw-section class="blue" :label="$t('import')" ref="collections">
+        <pw-section class="blue" :label="$t('import')" ref="import">
           <ul>
             <li>
               <p class="info">
@@ -277,9 +277,7 @@
       </div>
 
       <aside class="sticky-inner inner-right">
-        <section>
         <collections @use-collection="useSelectedCollection($event)" :doc="true" />
-        </section>
       </aside>
     </div>
   </div>