From c49576fcee5edfa5e5fb9c8cd7a02e784ebdd55f Mon Sep 17 00:00:00 2001
From: Soitora <simon.mattila@protonmail.com>
Date: Thu, 30 Apr 2020 05:15:38 +0200
Subject: [PATCH] Make use of new Navigation component (#152)

Make use of new Navigation component (#152)
---
 src/.vuepress/components/Navigation.vue | 15 ++++++++--
 src/help/faq/README.md                  | 38 ++++++++++++-------------
 src/help/guides/categories.md           | 12 ++++----
 src/help/guides/creating-backups.md     | 12 ++++----
 src/help/guides/getting-started.md      | 12 ++++----
 src/help/guides/reading-local-manga.md  | 22 +++++++-------
 src/help/guides/settings/downloads.md   |  2 +-
 src/help/guides/settings/general.md     |  2 +-
 src/help/guides/settings/reader.md      | 21 ++++++++------
 src/help/guides/source-migration.md     |  2 +-
 src/help/guides/source-problems.md      |  4 +--
 11 files changed, 78 insertions(+), 64 deletions(-)

diff --git a/src/.vuepress/components/Navigation.vue b/src/.vuepress/components/Navigation.vue
index 7d520d7f..df6b58da 100644
--- a/src/.vuepress/components/Navigation.vue
+++ b/src/.vuepress/components/Navigation.vue
@@ -1,6 +1,6 @@
 <template>
 	<span v-if="nav.link" class="app-navigation" title="App navigation">
-		<a class="app-link" :href="nav.link">
+		<a class="app-link" :href="nav.link + entry">
 			<MaterialIcon v-if="nav.icon" class="app-icon" :iconName="nav.icon" />
 			<span class="app-label">{{ nav.text }}</span>
 			<slot />
@@ -23,6 +23,10 @@ export default {
 			type: String,
 			required: true,
 		},
+		entry: {
+			type: String,
+			default: "",
+		},
 	},
 	computed: {
 		nav() {
@@ -43,7 +47,7 @@ export default {
 				extensions: { text: "Extensions", icon: "extension" },
 				download_queue: { text: "Download queue", icon: "get_app" },
 				source_migration: { text: "Source migration", icon: "compare_arrows" },
-				settings: { text: "Settings", icon: "settings" },
+				settings: { text: "Settings", icon: "settings", link: "/help/guides/settings/" },
 				about: { text: "About", icon: "info" },
 				help: { text: "Help", icon: "help" },
 				/* Settings */
@@ -64,6 +68,13 @@ export default {
 				/* Sources */
 				latest: { text: "LATEST" },
 				browse: { text: "BROWSE" },
+				/* Legacy */
+				old_library: { text: "My library", icon: "class" },
+				old_about: { text: "About", icon: "help", link: "/help/guides/settings/about" },
+				old_catalogues: { text: "Catalogues", icon: "explore" },
+				old_overflow: { text: "Overflow menu", icon: "more_vert" },
+				old_backup: { text: "Backup", icon: "cloud_upload", link: "/help/guides/settings/backup" },
+				old_extensions: { text: "Extensions", icon: "extension" },
 			}[this.item];
 		},
 	},
diff --git a/src/help/faq/README.md b/src/help/faq/README.md
index be08f1c6..bdb52375 100644
--- a/src/help/faq/README.md
+++ b/src/help/faq/README.md
@@ -11,17 +11,17 @@ sidebarDepth: 2
 ### Library
 
 #### How can I see how many chapters I've downloaded?
-This can be done by enabling **Download badges** under **<MaterialIcon icon-name="class"/> My library**.
+This can be done by enabling **Download badges** under <Navigation item="old_library"/>.
 
 ::: guide
-Enable it by going to **<MaterialIcon icon-name="class"/> My library** → **<MaterialIcon icon-name="filter_list"/> Filter** → **Display** section then checking the **Download badges** option in the bottom.
+Enable it by going to <Navigation item="old_library"/> → <Navigation item="filter"/> → **Display** section then checking the **Download badges** option in the bottom.
 :::
 
 #### Some covers are white after restoring from backup
 The URL to the cover has probably changed. To fix this, refresh the metadata of your library.
 
 ::: guide
-Refresh your metadata by going to **[<MaterialIcon icon-name="settings"/> Settings](/help/guides/settings/)** → **[<MaterialIcon icon-name="code"/> Advanced](/help/guides/settings/advanced)** then pressing **[Refresh library metadata](/help/guides/settings/advanced/#refresh-library-metadata)**.
+Refresh your metadata by going to <Navigation item="settings"/> → <Navigation item="settings_advanced"/> then pressing **[Refresh library metadata](/help/guides/settings/advanced/#refresh-library-metadata)**.
 ::: aside
 Read more [here](/help/guides/settings/advanced/#refresh-library-metadata)
 :::
@@ -30,7 +30,7 @@ Read more [here](/help/guides/settings/advanced/#refresh-library-metadata)
 Every now and then you find a manga that is translated by more than one group, because of this you get multiple releases for every chapter in the manga. To fix this the easiest way is to change sorting to **Total chapters**. You won't see any changes but, when you start reading you'll automatically skip the duplicate releases.
 
 ::: guide
-Change library sorting by going to **<MaterialIcon icon-name="class"/> My library** → **<MaterialIcon icon-name="filter_list"/> Filter** → **Sort** section then in this case selecting **Total chapters**.
+Change library sorting by going to <Navigation item="old_library"/> → <Navigation item="filter"/> → **Sort** section then in this case selecting **Total chapters**.
 :::
 
 #### Why do I see `attempt to invoke virtual method 'com.hippo.unifile...`?
@@ -83,7 +83,7 @@ If you don't see a **Tachiyomi** folder on your device, try downloading a chapte
 #### How do I enable automatic updates?
 The **Tachiyomi** app now has in-app updating for both stable and preview versions. It happens automatically in the background if you got **[Check for updates](/help/guides/settings/about/#check-for-updates)** enabled.
 ::: guide
-If you go to **[<MaterialIcon icon-name="settings"/> Settings](/help/guides/settings/)** → **[<MaterialIcon icon-name="help"/> About](/help/guides/settings/about)** you will find the **[Check for updates](/help/guides/settings/about/#check-for-updates)** toggle, you can also press **[Version](/help/guides/settings/about/#version)** to force check for updates.
+If you go to <Navigation item="settings"/> → <Navigation item="old_about"/> you will find the **[Check for updates](/help/guides/settings/about/#check-for-updates)** toggle, you can also press **[Version](/help/guides/settings/about/#version)** to force check for updates.
 :::
 
 ### User Interface
@@ -92,7 +92,7 @@ If you go to **[<MaterialIcon icon-name="settings"/> Settings](/help/guides/sett
 Only the UI has been localized, language in manga will still be using the language of the source selected.
 
 ::: guide
-You can change language by going to **[<MaterialIcon icon-name="settings"/> Settings](/help/guides/settings/)** → **[<MaterialIcon icon-name="tune"/> General](/help/guides/settings/general)** then pressing **[Language](/help/guides/settings/general/#language)**.
+You can change language by going to <Navigation item="settings"/> → <Navigation item="settings_general"/> then pressing **[Language](/help/guides/settings/general/#language)**.
 ::: aside
 Read more [here](/help/guides/settings/general/#language)
 :::
@@ -188,11 +188,11 @@ If you need more help regarding this, read [this](https://www.theandroidsoul.com
 Extensions for **Tachiyomi** are technically installed the same as normal apps. Either you uninstall them through the app section on your phones settings or you go can do it in the app.
 
 ::: guide
-To uninstall an extension from within **Tachiyomi**, go to **<MaterialIcon icon-name="extension"/> Extensions** then tap **Uninstall** on the extension you want to remove.
+To uninstall an extension from within **Tachiyomi**, go to <Navigation item="old_extensions"/> then tap **Uninstall** on the extension you want to remove.
 :::
 
 #### Why don't I have extensions or any sources in the catalogue?
-- **Tachiyomi** no longer have pre-installed extensions, this means that you will need to install extensions you want to use from the **<MaterialIcon icon-name="extension"/> Extensions** menu.
+- **Tachiyomi** no longer have pre-installed extensions, this means that you will need to install extensions you want to use from the <Navigation item="old_extensions"/> menu.
 - If you're getting the `Loader not implemented` error after clicking on a manga, you will need to reinstall the extensions you used to use. Which number in the menu corresponds to which is below.
 
 ::: expander <strong>Click to expand!</strong>
@@ -215,10 +215,10 @@ Read more about Batoto shutting down [here](https://goboiano.com/manga-scanlatio
 :::
 
 #### Why are my extensions not showing up in Catalogues?
-If you've freshly reinstalled the **Tachiyomi** app, the installed extensions might not show up in **<MaterialIcon icon-name="explore"/> Catalogues** until you enable them.
+If you've freshly reinstalled the **Tachiyomi** app, the installed extensions might not show up in <Navigation item="old_catalogues"/> until you enable them.
 
 ::: guide GUIDE
-To fix this, go to **<MaterialIcon icon-name="explore"/> Catalogues**→**[<MaterialIcon icon-name="settings"/> Sources](/help/guides/catalogues/#sources)**. Now you can proceed to enabling your desired sources.
+To fix this, go to <Navigation item="old_catalogues"/> → **Sources**. Now you can proceed to enabling your desired sources.
 :::
 
 #### Why can't I restore my backup?
@@ -229,8 +229,8 @@ To restore backups, **Tachiyomi** requires to have extensions installed for the
 It might be because the title is worded differently. Follow any of the steps below:
 - Look up the title on a search engine like **Google** or a manga tracking service such as [AniList](https://anilist.co/home).
 - See which site has the series, often a single site will not satisfy all your needs.
-- Download the extension for that source from **<MaterialIcon icon-name="extension"/> Extensions** if it exists, read [this](/help/faq/#which-sources-are-in-the-multi-source-extensions) for a list of which extensions contains what sources.
-- Go to **<MaterialIcon icon-name="explore"/> Catalogues** → **[Browse](/help/guides/catalogues/#browse)** on a source then search for the manga again.
+- Download the extension for that source from <Navigation item="old_extensions"/> if it exists, read [this](/help/faq/#which-sources-are-in-the-multi-source-extensions) for a list of which extensions contains what sources.
+- Go to <Navigation item="old_catalogues"/> → <Navigation item="browse"/> on a source then search for the manga again.
 
 
 #### Some common errors you might encounter
@@ -248,10 +248,10 @@ This means that the manga has been licensed and can no longer be read on that so
 The source you selected may have Cloudflare protection on and is enforcing CAPTCHAs.
 
 1. Find a manga in your library that is from the source you're trying to access
-1. Tap on the overflow menu in the Info tab (3 dots)
-1. Open in Webview
-1. Complete the CAPTCHA if present and wait for the page to finish loading
-1. Press back rather than exiting the app and if that does not work, use the back arrow
+2. Tap on the <Navigation item="old_overflow"/> in the **Info** tab
+3. Open in WebView
+4. Complete the CAPTCHA if present and wait for the page to finish loading
+5. Press back rather than exiting the app and if that does not work, use the back arrow
 
 ### MangaDex
 
@@ -259,7 +259,7 @@ The source you selected may have Cloudflare protection on and is enforcing CAPTC
 If you're not getting any results when searching MangaDex then you need to log in. To do so enter the **WebView** for **MangaDex** then press the **Manga** drop-down and choose either **Sign up** or **Log in** to proceed with the log in.
 
 ::: guide
-To enter the **WebView** go to **<MaterialIcon icon-name="explore"/> Catalogues** → **[Browse](/help/guides/catalogues/#browse)**/**[Latest](/help/guides/catalogues/#latest)** next to **MangaDex**, open any manga from the list and then press the **<MaterialIcon icon-name="more_vert"/> Overflow menu** in the top-right corner and then press **Open in web view**.
+To enter the **WebView** go to <Navigation item="old_catalogues"/> → <Navigation item="browse"/>/<Navigation item="latest"/> next to **MangaDex**, open any manga from the list and then press the <Navigation item="old_overflow"/> in the top-right corner and then press **Open in web view**.
 :::
 
 ::: expander <strong>Click to reveal video guide!</strong>
@@ -313,14 +313,14 @@ It's not currently possible to restore backup from MangaRock officially, as the
 
 1. Uninstall the MangaRock extension.
 1. Install the [DummyRock](/assets/misc/tachiyomi-en.dummyrock-v1.2.1-debug.apk) file.
-1. Go to **<MaterialIcon icon-name="extension"/> Extensions** menu and press **Trust** to proceed.
+1. Go to <Navigation item="old_extensions"/> menu and press **Trust** to proceed.
 1. Restore backup.
 
 #### Why do I get `Value url at 0 of type java.lang.String cannot be converted to JSONObject`?
 If you get this error when opening **MangaRock** chapters, try clearing your chapter cache.
 
 ::: guide
-Chapter cache can be cleared by going to **[<MaterialIcon icon-name="settings"/> Settings](/help/guides/settings/)** → **[<MaterialIcon icon-name="code"/> Advanced](/help/guides/settings/advanced)** then pressing [Clear chapter cache](/help/guides/settings/advanced/#clear-chapter-cache).
+Chapter cache can be cleared by going to <Navigation item="settings"/> → <Navigation item="settings_advanced"/> then pressing [Clear chapter cache](/help/guides/settings/advanced/#clear-chapter-cache).
 ::: aside
 Read more about clearing chapter cache [here](/help/guides/settings/advanced/#clear-chapter-cache)
 :::
diff --git a/src/help/guides/categories.md b/src/help/guides/categories.md
index 117aa3dd..e93619d5 100644
--- a/src/help/guides/categories.md
+++ b/src/help/guides/categories.md
@@ -5,11 +5,11 @@ lang: en-US
 
 # Categories
 
-`Categories` can store your bookmarks in custom made categories, which keeps your library neat and organized. You can name and sort them however you want according to your preference (ie. Genre, Reading Status etc).
+**Categories** can store your bookmarks in custom made categories, which keeps your library neat and organized. You can name and sort them however you want according to your preference (ie. Genre, Reading Status etc).
 
 ## Create a Category
 
-To make a category, go to `My Library`, then click on the triple dots (`⋮`) on the top right, then click `Edit categories` and then press the button with a plus sign (`+`).
+To make a category, go to <Navigation item="old_library"/>, then click on the <Navigation item="old_overflow"/> on the top right, then click **Edit categories** and then press the button with a plus sign **(`+`)**.
 
 ::: expander <strong>Click to reveal video guide!</strong>
 <figure class="centered">
@@ -21,7 +21,7 @@ To make a category, go to `My Library`, then click on the triple dots (`⋮`) on
 
 ## Edit a Category
 
-You can edit a Category in `My Library` > triple dots (`⋮`) > `Edit categories` then long press the category you want to edit, then press the pencil icon.
+You can edit a Category in <Navigation item="old_library"/> → <Navigation item="old_overflow"/> → **Edit categories** then long press the category you want to edit, then press the pencil icon.
 
 ::: expander <strong>Click to reveal video guide!</strong>
 <figure class="centered">
@@ -33,9 +33,9 @@ You can edit a Category in `My Library` > triple dots (`⋮`) > `Edit categories
 
 ## Change Category order
 
-You can change the order of Categories, such as bringing a certain Category to the top. This category will appear as the first tab on `My Library`.
+You can change the order of Categories, such as bringing a certain Category to the top. This category will appear as the first tab on <Navigation item="old_library"/>.
 
-To do this, go to `My Library` > triple dots (`⋮`) > `Edit categories` then drag the triple bar icon (`≡`) up or down.
+To do this, go to <Navigation item="old_library"/> → <Navigation item="old_overflow"/> → **Edit categories** then drag the triple bar icon **(`≡`)** up or down.
 
 ::: expander <strong>Click to reveal video guide!</strong>
 <figure class="centered">
@@ -47,7 +47,7 @@ To do this, go to `My Library` > triple dots (`⋮`) > `Edit categories` then dr
 
 ## Delete a Category
 
-You can delete a Category in `My Library` > triple dots (`⋮`) > `Edit categories` then long press the category you want to delete, and press the trash can icon (<MaterialIcon icon-name="delete"/>).
+You can delete a Category in <Navigation item="old_library"/> → <Navigation item="old_overflow"/> → **Edit categories** then long press the category you want to delete, and press the trash can icon (<MaterialIcon icon-name="delete"/>).
 
 ::: expander <strong>Click to reveal video guide!</strong>
 <figure class="centered">
diff --git a/src/help/guides/creating-backups.md b/src/help/guides/creating-backups.md
index e44eca41..cc183b26 100644
--- a/src/help/guides/creating-backups.md
+++ b/src/help/guides/creating-backups.md
@@ -16,11 +16,11 @@ Backups can hold the following information:
 
 ## Restoring
 
-Restoring is done from the [<MaterialIcon icon-name="cloud_upload"/> Backup](/help/guides/settings/backup) settings. To restore without issues be sure to:
+Restoring is done from the <Navigation item="old_backup"/> settings. To restore without issues be sure to:
 
-* Install all the <MaterialIcon icon-name="extension"/> Extensions that were installed at the time of the backup.
-* Log into the [<MaterialIcon icon-name="autorenew"/> Tracking](/help/guides/settings/tracking) services that you use.
-* Log into **MangaDex** using **Webview** [as explained here](/help/faq/#no-results-when-searching).
+* Install all the <Navigation item="extensions"/> Extensions that were installed at the time of the backup.
+* Log into the <Navigation item="settings_tracking"/> services that you use.
+* Log into **MangaDex** using **WebView** [as explained here](/help/faq/#no-results-when-searching).
 * You're able to access all the sources through the **WebView**.
 * Be on a consistent internet connection.
 
@@ -29,7 +29,7 @@ Restoring is done from the [<MaterialIcon icon-name="cloud_upload"/> Backup](/he
 You can transfer downloaded manga chapters from one version of **Tachiyomi** to another.
 
 ::: guide
-You can do this by going to **[<MaterialIcon icon-name="settings"/> Settings](/help/guides/settings/)** → [<MaterialIcon icon-name="get_app"/> Downloads](/help/guides/settings/downloads) and then set the download directory to that of the download folder of your old **Tachiyomi**, then restore the backup.
+You can do this by going to <Navigation item="settings"/> → <Navigation item="settings_downloads"/> and then set the download directory to that of the download folder of your old **Tachiyomi**, then restore the backup.
 :::
 
 ## Turning on auto-backups
@@ -37,7 +37,7 @@ You can do this by going to **[<MaterialIcon icon-name="settings"/> Settings](/h
 It is highly recommended you turn on auto backups, this will ensure you can recover if need be.
 
 ::: guide
-You can do this by going to **[<MaterialIcon icon-name="settings"/> Settings](/help/guides/settings/)** → [<MaterialIcon icon-name="cloud_upload"/> Backup](/help/guides/settings/backup) and then setting a [backup frequency](/help/guides/settings/backup/#backup-frequency). In the case of a catastrophic failure, at least you will be able to recover.
+You can do this by going to <Navigation item="settings"/> → <Navigation item="old_backup"/> and then setting a [backup frequency](/help/guides/settings/backup/#backup-frequency). In the case of a catastrophic failure, at least you will be able to recover.
 :::
 
 ## Forks information
diff --git a/src/help/guides/getting-started.md b/src/help/guides/getting-started.md
index d84c674a..25c8748b 100644
--- a/src/help/guides/getting-started.md
+++ b/src/help/guides/getting-started.md
@@ -13,7 +13,7 @@ You can download the latest version of **Tachiyomi** from any of the above butto
 
 If you want to try new features before they get to the stable release, you can download the preview version.
 
-Open and install the `.apk` file you just downloaded.
+Open and install the **`.apk`** file you just downloaded.
 
 <figure class="centered">
 	<img height="128"
@@ -22,10 +22,10 @@ Open and install the `.apk` file you just downloaded.
 
 ## Installing an extension
 
-Now that Tachiyomi is installed, open the app and navigate to the `Extensions` tab.
+Now that Tachiyomi is installed, open the app and navigate to the <Navigation item="old_extensions"/> tab.
 
 In this guide we will use MangaDex, our most popular extension.
-Press the `Install` button and accept the installation prompt that will be shown.
+Press the **Install** button and accept the installation prompt that will be shown.
 
 If you're getting stopped by a security prompt and don't know what to do you can read this FAQ section: ["How do I allow third-party installations?"](/help/faq/#how-do-i-allow-third-party-installations).
 
@@ -39,13 +39,13 @@ If you're getting stopped by a security prompt and don't know what to do you can
 
 ## Adding manga to your library
 
-Now that you've installed the MangaDex extension it should show up in the `Catalogues` tab. The items appearing here are called `Sources` (can also be called Catalogues), an extension can contains multiple sources.
+Now that you've installed the MangaDex extension it should show up in the <Navigation item="old_catalogues"/> tab. The items appearing here are called **Sources** (can also be called **Catalogues**), an extension can contains *multiple* sources.
 
-To find and add manga, you can now either use the `Latest` button on your source, or you can use `Browse` and search for it.
+To find and add manga, you can now either use the <Navigation item="latest"/> button on your source, or you can use <Navigation item="browse"/> and search for it.
 
 Now that you've found manga that you want to add to your library, click on it and then press the blue bookmark button.
 
-It should now appear in your `My Library` tab, ready to be read!
+It should now appear in your <Navigation item="old_library"/> tab, ready to be read!
 
 ::: expander <strong>Click to reveal video guide!</strong>
 <figure class="centered">
diff --git a/src/help/guides/reading-local-manga.md b/src/help/guides/reading-local-manga.md
index 532a4a98..c834837c 100644
--- a/src/help/guides/reading-local-manga.md
+++ b/src/help/guides/reading-local-manga.md
@@ -5,13 +5,9 @@ lang: en-US
 
 # Reading local manga
 
-You have to first create a folder named `local` in Tachiyomi folder, which is located in the phone's `Internal storage` or external SD card. Then place your manga inside `Tachiyomi/local` folder.
+You have to first create a folder named `local` in Tachiyomi folder, which is located in the phone's **Internal storage** or external SD card. Then place your manga inside `Tachiyomi/local` folder.
 
-After that, the manga be can be found in `Local manga`, which is located under `Catalogues` as a new source.
-
-::: warning IMPORTANT
-Remember to give the app disk permissions on Android 6 and newer.
-:::
+After that, the manga be can be found in **Local manga**, which is located under <Navigation item="old_catalogues"/> as a new source.
 
 If you add more chapters then you'll have to manually refresh the chapter list (by pulling down the list).
 
@@ -19,13 +15,17 @@ Supported chapter formats are directories with pictures inside, `ZIP`/`CBZ`, `RA
 
 You can also place your chapters or manga in both storages and Tachiyomi will merge them.
 
-You can then access the manga in `Catalogues > Local manga`.
+You can then access the manga in <Navigation item="old_catalogues"/> → **Local manga**.
+
+::: warning IMPORTANT
+Remember to give the app disk permissions on Android 6 and newer.
+:::
 
 ## Folder Structure
 
 Tachiyomi requires a specific folder structure for local manga to be correctly processed. Local manga will be read from the `Tachiyomi/local` folder. Each manga must have a `Manga` folder and a `Chapter` folder. Images will then go into the chapter folder. See below for more information on archive files. You can refer to the following example:
 
-::: tip EXAMPLE
+::: guide EXAMPLE
 <div class="side-by-side">
 	<ul class="file-tree">
 		<li>
@@ -88,7 +88,7 @@ The path to the folder with images must contain both the manga title and the cha
 
 Archive files such as `ZIP`/`CBZ` are supported but the folder structure inside is not. Any folders inside the archive file are ignored. You must place the archive inside the `Manga` folder where the name will become the `Chapter` title. All images inside the archive regardless of folder structure will become pages for that chapter.
 
-::: tip ZIP EXAMPLE
+::: guide ZIP EXAMPLE
 <ul class="file-tree">
 		<li>
 			/sdcard/Tachiyomi/local
@@ -125,9 +125,9 @@ Archive files such as `ZIP`/`CBZ` are supported but the folder structure inside
 ## Advanced
 ### Local Manga Details
 
-Starting with preview version `r1628` and above, it is now possible to add details to local manga. Like manga from other catalogs, you add information about the manga such as the author, artist, description, and genre tags.
+It is possible to add details to local manga. Like manga from other catalogs, you add information about the manga such as the author, artist, description, and genre tags.
 
-To import details along with your local manga, you have to create a file called `details.json` and place it within the manga folder. This file will contain the extended details about the manga in the `json` format. You can see the example below on how to build the file. Once the file is there, the app should load the data when you first open the manga or you can pull down to refresh the details.
+To import details along with your local manga, you have to create a file called `details.json` and place it within the manga folder. This file will contain the extended details about the manga in the `JSON` format. You can see the example below on how to build the file. Once the file is there, the app should load the data when you first open the manga or you can pull down to refresh the details.
 
 You can copy the following example and edit the details as needed:
 ``` json
diff --git a/src/help/guides/settings/downloads.md b/src/help/guides/settings/downloads.md
index 66b191ab..82c3e1b8 100644
--- a/src/help/guides/settings/downloads.md
+++ b/src/help/guides/settings/downloads.md
@@ -15,7 +15,7 @@ This setting allows you to set where downloads are to be read from and downloade
 This setting makes the [Download new chapters](#download-new-chapters) option only download when you're connected to Wi-Fi, and not data.
 
 ## Remove when marked as read <Badge text="False" type="default-indicator" vertical="middle"/>
-This setting removes a downloaded chapter after you've used the overflow (3 dot menu next to each chapter) and marked it as read.
+This setting removes a downloaded chapter after you've used the <Navigation item="old_overflow"/> and marked it as read.
 
 ## Remove after read <Badge text="Disabled" type="default-indicator" vertical="middle"/>
 This setting removes a downloaded chapter after you've reached the last page and exited the reader.
diff --git a/src/help/guides/settings/general.md b/src/help/guides/settings/general.md
index a12c7337..f18e01f4 100644
--- a/src/help/guides/settings/general.md
+++ b/src/help/guides/settings/general.md
@@ -38,7 +38,7 @@ How the app looks and what colors are used through the app. There are four theme
 This setting allows you to set how many manga show up per row. It can be between 1 and 10 and can be set to differing amounts depending on the orientation you want.
 
 ## Start screen <Badge text="My library" type="default-indicator" vertical="middle"/>
-This setting changes what screen the app opens up to. It can be changed between `My library`, `Recently read` and `Library updates`.
+This setting changes what screen the app opens up to. It can be changed between **My library**, **Recently read** and **Library updates**.
 
 ## Library update frequency <Badge text="Manual" type="default-indicator" vertical="middle"/>
 This setting changes how often the app automatically scans bookmarked manga for chapter updates. It can be changed from preset values between hourly and every 2 days.
diff --git a/src/help/guides/settings/reader.md b/src/help/guides/settings/reader.md
index 837eb11f..4950fda6 100644
--- a/src/help/guides/settings/reader.md
+++ b/src/help/guides/settings/reader.md
@@ -22,7 +22,7 @@ This setting sets the reader's default direction when you open a manga.
 - Webtoon is like vertical but stitches all the images together into one stream.
 
 ::: tip
-You can have different Viewer for different series. You can do this by going to the series, opening a chapter, tapping the middle of the screen, pressing the gear icon, and selecting a different viewer in `Viewer for this series`
+You can have different Viewer for different series. You can do this by going to the series, opening a chapter, tapping the middle of the screen, pressing the gear icon, and selecting a different viewer in **Viewer for this series**
 :::
 
 ## Scale type <Badge text="Fit screen" type="default-indicator" vertical="middle" />
@@ -75,7 +75,7 @@ All examples are illustrations and may not reflect what actually happens.
 </Carousel>
 
 ::: tip
-You can change scale type when reading a chapter. Tap the middle of the screen, press the gear icon at the top, select a different scale type under `Scale type`. This will change Scale type for all series.
+You can change scale type when reading a chapter. Tap the middle of the screen, press the gear icon at the top, select a different scale type under **Scale type**. This will change Scale type for all series.
 :::
 
 ## Zoom start position <Badge text="Automatic" type="default-indicator" vertical="middle" />
@@ -111,13 +111,16 @@ All examples are illustrations
 </Carousel>
 
 ## Rotation <Badge text="Free" type="default-indicator" vertical="middle" />
-This allows you to control how the screen is going to be oriented. `Free` lets you rotate the screen between portrait and
-landscape. `Lock` will lock the orientation to whatever orientation you had before entering the reader. `Force Portrait`
-forces the reader to be in portrait. `Force Landscape` forces the reader to be in landscape.
+This allows you to control how the screen is going to be oriented.
+
+- **Free** lets you rotate the screen between portrait and landscape.
+- **Lock** will lock the orientation to whatever orientation you had before entering the reader.
+- **Force Portrait** forces the reader to be in portrait.
+- **Force Landscape** forces the reader to be in landscape.
 
 ## Background color <Badge text="White" type="default-indicator" vertical="middle" />
-This allows you to control what color the background should be in reader. Background color can either be `Black` or
-`White`.
+This allows you to control what color the background should be in reader. Background color can either be **Black** or
+**White**.
 
 <Carousel name="carousel-background-color">
 <CarouselItem>
@@ -140,7 +143,7 @@ This allows you to control what color the background should be in reader. Backgr
 Double tap animation speed changes the speed in which the zoom happens when double tapping.
 
 ## Skip chapters marked read <Badge text="False" type="default-indicator" vertical="middle" />
-This setting allows the chapters marked as read to be skipped during reading. To mark a chapter as read, tap the overflow (three-dot) icon and press 'Mark as Read.'
+This setting allows the chapters marked as read to be skipped during reading. To mark a chapter as read, tap the <Navigation item="old_overflow"/> and press **Mark as Read**.
 This setting can be useful if a series has multiple scanlation groups and you want to hide one's chapters during reading.
 
 ## Fullscreen <Badge text="True" type="default-indicator" vertical="middle" />
@@ -153,7 +156,7 @@ This setting determines if the device should be allowed to go to sleep while rea
 This settings shows the page number at the bottom of the page in current page/total page format.
 
 ## 32-bit color <Badge text="False" type="default-indicator" vertical="middle" />
-This setting decodes images in ARGB888 format to allow the reader to display more colors.
+This setting decodes images in `ARGB888` format to allow the reader to display more colors.
 
 ::: warning
 This setting will only show up on smartphones running Android 8.0 Oreo and later versions.
diff --git a/src/help/guides/source-migration.md b/src/help/guides/source-migration.md
index 54faf663..f941f2d8 100644
--- a/src/help/guides/source-migration.md
+++ b/src/help/guides/source-migration.md
@@ -8,7 +8,7 @@ lang: en-US
 Migration is the process of moving manga from one source to another while keeping your current progress and data. This is used often when a source is no longer accessible or you want to move it off one source to another for a myriad of reasons.
 
 ::: guide
-1. Go to **<MaterialIcon icon-name="class"/> My library**, open the **<MaterialIcon icon-name="more_vert"/> Overflow menu**, and then tap **<MaterialIcon icon-name="compare_arrows"/> Source migration**.
+1. Go to <Navigation item="old_library"/>, open the <Navigation item="old_overflow"/>, and then tap <Navigation item="source_migration"/>.
 1. Select the **Source** you're migrating from.
 1. Find and select the title that you want to migrate.
 
diff --git a/src/help/guides/source-problems.md b/src/help/guides/source-problems.md
index c70bfd99..5a72d969 100644
--- a/src/help/guides/source-problems.md
+++ b/src/help/guides/source-problems.md
@@ -52,13 +52,13 @@ Please note that WebView is not the same as using your browser.
 WebView is a new feature introduced in stable version `0.8.4` to allow
 for log-in only features and solving CAPTCHA.
 
-You can find the web view option by opening a manga, then tapping the 3 dots in the top right while in the `Info` tab. If you have no existing manga from the source, go to `Catalogues`, press `Browse` beside the source, and open a manga, following the above instructions.
+You can find the web view option by opening a manga, then tapping the 3 dots in the top right while in the **Info** tab. If you have no existing manga from the source, go to <Navigation item="old_catalogues"/>, press <Navigation item="browse"/> beside the source, and open a manga, following the above instructions.
 
 Once you are in WebView, you will see a webpage and a bar on top with an arrow at the left side, pointing to the left edge of your screen.
 If there is no CAPTCHA on the webpage, initiate one by tapping a manga title, if possible. Once a CAPTCHA is shown, solve it. After that, use the aforementioned back arrow on the bar at the top of your screen to go back to your manga. Please do not use the back button on your phone as it does not work as expected.
 
 ::: tip
-If WebView doesn't work for you, please update the `Android System WebView` app through [Play Store](https://play.google.com/store/apps/details?id=com.google.android.webview), then go to [Developer Options](https://developer.android.com/studio/debug/dev-options) in your phone's settings and set WebView Implementation to Android System WebView.
+If WebView doesn't work for you, please update the **Android System WebView** app through [Play Store](https://play.google.com/store/apps/details?id=com.google.android.WebView), then go to [Developer Options](https://developer.android.com/studio/debug/dev-options) in your phone's settings and set WebView Implementation to Android System WebView.
 :::
 
 <figure class="centered">