1 files changed, 32 insertions, 8 deletions
diff --git a/src/components/bookmark_folder_card/bookmark_folder_card.vue b/src/components/bookmark_folder_card/bookmark_folder_card.vue
index 50863071..9e8bef61 100644
--- a/src/components/bookmark_folder_card/bookmark_folder_card.vue
+++ b/src/components/bookmark_folder_card/bookmark_folder_card.vue
@@ -1,5 +1,25 @@
 <template>
-  <div class="bookmark-folder-card">
+  <div
+    v-if="allBookmarks"
+    class="bookmark-folder-card"
+  >
+    <router-link
+      :to="{ name: 'bookmarks' }"
+      class="bookmark-folder-name"
+    >
+      <span class="icon">
+        <FAIcon
+          fixed-width
+          class="fa-scale-110 menu-icon"
+          icon="bookmark"
+        />
+      </span>{{ $t('nav.all_bookmarks') }}
+    </router-link>
+  </div>
+  <div
+    v-else
+    class="bookmark-folder-card"
+  >
     <router-link
       :to="{ name: 'bookmark-folder', params: { id: folder.id } }"
       class="bookmark-folder-name"
@@ -44,27 +64,31 @@
   align-items: center;
 }
 
-.bookmark-folder-name {
+a.bookmark-folder-name {
+  display: flex;
+  align-items: center;
   flex-grow: 1;
 
+  .icon,
   .iconLetter,
   .iconEmoji {
-    margin-right: 0.5em;
+    display: inline-block;
+    height: 2.5rem;
+    width: 2.5rem;
+    margin-right: 0.5rem;
   }
 
+  .icon,
   .iconLetter {
-    height: 2.5rem;
-    width: 2.5rem;
     font-size: 1.5rem;
+    line-height: 2.5rem;
+    text-align: center;
   }
 
   .iconEmoji {
-    display: inline-block;
     text-align: center;
     object-fit: contain;
     vertical-align: middle;
-    height: 2.5em;
-    width: 2.5em;
 
     > span {
       font-size: 1.5rem;