From 5d67ae709a17d1d20ce63d3f071b75518739472b Mon Sep 17 00:00:00 2001
From: Tim McMackin <timothymcmackin@users.noreply.github.com>
Date: Mon, 22 Jan 2024 14:48:26 -0500
Subject: [PATCH] Divide tutorials sidebar like the tutorials landing page
 (#274)

---
 docs/architecture/tokens.md                   |   2 +-
 docs/dApps.mdx                                |   2 +-
 docs/dApps/sending-transactions.md            |   2 +-
 docs/dApps/wallets.md                         |   4 +-
 docs/overview/quickstart.md                   |   2 +-
 docs/tutorials.mdx                            |   4 +-
 .../build-an-nft-marketplace/part-1.md        |   2 +-
 .../build-files-archive-with-dal.mdx          |   2 +-
 .../get-dal-params.mdx                        |   2 +-
 docs/tutorials/build-your-first-app.md        |   2 +-
 docs/tutorials/create-an-nft.md               |   2 +-
 docs/tutorials/create-an-nft/nft-tznft.md     |   2 +-
 docs/tutorials/smart-contract/archetype.md    |   2 +-
 docs/tutorials/smart-contract/cameligo.mdx    |   2 +-
 docs/tutorials/smart-contract/jsligo.mdx      |   2 +-
 docs/tutorials/smart-contract/smartpy.mdx     |   2 +-
 sidebars.js                                   | 286 +++++++++---------
 src/css/custom.css                            |  12 +
 18 files changed, 172 insertions(+), 162 deletions(-)

diff --git a/docs/architecture/tokens.md b/docs/architecture/tokens.md
index 5ba3e6f94..78235e5f8 100644
--- a/docs/architecture/tokens.md
+++ b/docs/architecture/tokens.md
@@ -21,7 +21,7 @@ One exception is tickets, which are directly stored and managed by smart contrac
 To learn about tokens, see these tutorials:
 
 - [Create an NFT](../tutorials/create-an-nft)
-- [Build your first app on Tezos](../tutorials/build-your-first-app)
+- [Build a simple web application](../tutorials/build-your-first-app)
 
 ## Fungible and non-fungible tokens
 
diff --git a/docs/dApps.mdx b/docs/dApps.mdx
index f8f808787..ded06035e 100644
--- a/docs/dApps.mdx
+++ b/docs/dApps.mdx
@@ -47,6 +47,6 @@ For information on typical tasks that dApps do, see:
 
 These tutorials cover dApps of different complexities:
 
-- For a simple dApp, see [Build your first app on Tezos](./tutorials/build-your-first-app)
+- For a simple dApp, see [Build a simple web application](./tutorials/build-your-first-app)
 - For a dApp that mints NFTs, see [Mint NFTs from a web app](./tutorials/create-an-nft/nft-web-app)
 - For a large dApp that allows users to buy and sell NFTs, see [Build an NFT marketplace](./tutorials/build-an-nft-marketplace)
diff --git a/docs/dApps/sending-transactions.md b/docs/dApps/sending-transactions.md
index ce64a1615..fda2b0529 100644
--- a/docs/dApps/sending-transactions.md
+++ b/docs/dApps/sending-transactions.md
@@ -82,7 +82,7 @@ try {
 }
 ```
 
-For examples of calling smart contracts, see tutorials such as [Build your first app on Tezos](../tutorials/build-your-first-app) or [Create a contract and web app that mints NFTs](../tutorials/create-an-nft/nft-taquito).
+For examples of calling smart contracts, see tutorials such as [Build a simple web application](../tutorials/build-your-first-app) or [Create a contract and web app that mints NFTs](../tutorials/create-an-nft/nft-taquito).
 
 For more information about using Taquito, see [Smart contracts](https://tezostaquito.io/docs/smartcontracts) in the Taquito documentation.
 
diff --git a/docs/dApps/wallets.md b/docs/dApps/wallets.md
index 877f20c65..4c8ddbc05 100644
--- a/docs/dApps/wallets.md
+++ b/docs/dApps/wallets.md
@@ -29,7 +29,7 @@ The primary tools that dApps use to connect to wallets are:
 ## Beacon and Taquito
 
 Most of the time, dApps use Beacon and Taquito together for a straightforward way to connect to wallets and submit transactions.
-For an example, see the tutorial [Build your first app on Tezos](../tutorials/build-your-first-app).
+For an example, see the tutorial [Build a simple web application](../tutorials/build-your-first-app).
 
 ### Connecting to wallets
 
@@ -49,7 +49,7 @@ const address = await wallet.getPKH();
 When this code runs, Beacon opens a popup window that guides the user through connecting their wallet.
 
 Then the application can send transactions to Tezos.
-See [Part 3: Sending transactions](../tutorials/build-your-first-app/sending-transactions) in the tutorial [Build your first app on Tezos](../tutorials/build-your-first-app).
+See [Part 3: Sending transactions](../tutorials/build-your-first-app/sending-transactions) in the tutorial [Build a simple web application](../tutorials/build-your-first-app).
 
 ### Reconnecting to wallets
 
diff --git a/docs/overview/quickstart.md b/docs/overview/quickstart.md
index 10bd53e33..c7aeb3743 100644
--- a/docs/overview/quickstart.md
+++ b/docs/overview/quickstart.md
@@ -3,4 +3,4 @@
 Simple page to provide links to tutorials and what you learn from each one.
 
 - To learn about smart contracts, go to 'Deploy your first smart contract'
-- To learn about dApps, go to 'Build your first app on Tezos'
\ No newline at end of file
+- To learn about dApps, go to 'Build a simple web application'
\ No newline at end of file
diff --git a/docs/tutorials.mdx b/docs/tutorials.mdx
index 391d61525..16bfc8711 100644
--- a/docs/tutorials.mdx
+++ b/docs/tutorials.mdx
@@ -54,7 +54,7 @@ These tutorials contain multiple parts and are intended for developers with some
 />
 
 <TutorialCard
-  title="Build your first app on Tezos"
+  title="Build a simple web application"
   emoji="💡"
   href="/tutorials/build-your-first-app/"
   description="Learn how to set up and create a decentralized web application on Tezos using TypeScript, Taquito, and Svelte"
@@ -70,7 +70,7 @@ These tutorials contain multiple parts and are intended for developers with some
 />
 
 <TutorialCard
-  title="Create an NFT from the command line"
+  title="Create NFTs from the command line"
   emoji="⚡️"
   href="/tutorials/create-an-nft/nft-tznft"
   description="Learn about NFTs and how to create them from files on your computer"
diff --git a/docs/tutorials/build-an-nft-marketplace/part-1.md b/docs/tutorials/build-an-nft-marketplace/part-1.md
index 418247299..b837790e4 100644
--- a/docs/tutorials/build-an-nft-marketplace/part-1.md
+++ b/docs/tutorials/build-an-nft-marketplace/part-1.md
@@ -386,7 +386,7 @@ To save time, this tutorial provides a starter React application.
    ```
 
    This application contains basic navigation and the ability to connect to wallets.
-   For a tutorial that includes connecting to wallets, see [Build your first app on Tezos](../build-your-first-app).
+   For a tutorial that includes connecting to wallets, see [Build a simple web application](../build-your-first-app).
 
    Because Taqueria automatically keeps track of your deployed contract, the application automatically accesses the contract and shows that there are no NFTs in it yet.
    The application looks like this:
diff --git a/docs/tutorials/build-files-archive-with-dal.mdx b/docs/tutorials/build-files-archive-with-dal.mdx
index 121a98a0f..79d574fe0 100644
--- a/docs/tutorials/build-files-archive-with-dal.mdx
+++ b/docs/tutorials/build-files-archive-with-dal.mdx
@@ -1,5 +1,5 @@
 ---
-title: Implementing a file archive with the DAL and a Smart Rollup
+title: Implement a file archive with the DAL and a Smart Rollup
 authors: 'Tezos Core Developers'
 last_update:
   date: 17 January 2024
diff --git a/docs/tutorials/build-files-archive-with-dal/get-dal-params.mdx b/docs/tutorials/build-files-archive-with-dal/get-dal-params.mdx
index 03ea7292f..2676e9be4 100644
--- a/docs/tutorials/build-files-archive-with-dal/get-dal-params.mdx
+++ b/docs/tutorials/build-files-archive-with-dal/get-dal-params.mdx
@@ -31,7 +31,7 @@ In these steps, you set up a simple Smart Rollup to get the current DAL paramete
 
 ## Prerequisites
 
-Before you begin, make sure that you have installed the prerequisites and set up an environment and an account as described in [Implementing a File Archive with the DAL and a Smart Rollup](../build-files-archive-with-dal).
+Before you begin, make sure that you have installed the prerequisites and set up an environment and an account as described in [Implement a file archive with the DAL and a Smart Rollup](../build-files-archive-with-dal).
 
 ## Fetching the DAL parameters in a kernel
 
diff --git a/docs/tutorials/build-your-first-app.md b/docs/tutorials/build-your-first-app.md
index 56ec332e4..badc62fee 100644
--- a/docs/tutorials/build-your-first-app.md
+++ b/docs/tutorials/build-your-first-app.md
@@ -1,5 +1,5 @@
 ---
-title: Build your first app on Tezos
+title: Build a simple web application
 authors: 'Claude Barde, Tim McMackin'
 last_update:
   date: 17 October 2023
diff --git a/docs/tutorials/create-an-nft.md b/docs/tutorials/create-an-nft.md
index 3daca3f93..35a4d6210 100644
--- a/docs/tutorials/create-an-nft.md
+++ b/docs/tutorials/create-an-nft.md
@@ -5,6 +5,6 @@ title: Create an NFT
 There are many ways to create (or "mint") NFTs; in particular, you can create all of the NFTs in a collection at once or set up an application that can create NFTs as users request them.
 Try one of these tutorials to see different ways of minting NFTs:
 
-- [Create NFTs with the `tznft` tool](./create-an-nft/nft-tznft): Create metadata files to describe NFTs and then use a command-line tool to mint them and manipulate them
+- [Create NFTs from the command line](./create-an-nft/nft-tznft): Create metadata files to describe NFTs and then use a command-line tool to mint them and manipulate them
 - [Mint NFTs from a web app](./create-an-nft/nft-web-app): Use a pre-existing contract to create NFTs from a web application
 - [Create a contract and web app that mints NFTs](./create-an-nft/nft-taquito): Set up a web application that authorized users can use to create NFTs and all users can use to see the NFTs in a collection
diff --git a/docs/tutorials/create-an-nft/nft-tznft.md b/docs/tutorials/create-an-nft/nft-tznft.md
index d18029228..32e49af96 100644
--- a/docs/tutorials/create-an-nft/nft-tznft.md
+++ b/docs/tutorials/create-an-nft/nft-tznft.md
@@ -1,5 +1,5 @@
 ---
-title: Create NFTs with the `tznft` tool
+title: Create NFTs from the command line
 authors: 'Sol Lederer, Tim McMackin'
 last_update:
   date: 18 September 2023
diff --git a/docs/tutorials/smart-contract/archetype.md b/docs/tutorials/smart-contract/archetype.md
index 73a694d97..f1043ae38 100644
--- a/docs/tutorials/smart-contract/archetype.md
+++ b/docs/tutorials/smart-contract/archetype.md
@@ -324,5 +324,5 @@ Then, you can verify the updated storage on the block explorer or by running the
 Now the contract is running on the Tezos blockchain.
 You or any other user can call it from any source that can send transactions to Tezos, including command-line clients, dApps, and other contracts.
 
-If you want to continue working with this contract, try creating a dApp to call it from a web application, similar to the dApp that you create in the tutorial [Build your first app on Tezos](../build-your-first-app/).
+If you want to continue working with this contract, try creating a dApp to call it from a web application, similar to the dApp that you create in the tutorial [Build a simple web application](../build-your-first-app/).
 You can also try adding your own endpoints and originating a new contract, but you cannot update the existing contract after it is deployed.
diff --git a/docs/tutorials/smart-contract/cameligo.mdx b/docs/tutorials/smart-contract/cameligo.mdx
index dcb19a6d2..713ab1163 100644
--- a/docs/tutorials/smart-contract/cameligo.mdx
+++ b/docs/tutorials/smart-contract/cameligo.mdx
@@ -288,5 +288,5 @@ It also allows you to call the contract.
 Now the contract is running on the Tezos blockchain.
 You or any other user can call it from any source that can send transactions to Tezos, including Octez, dApps, and other contracts.
 
-If you want to continue working with this contract, try creating a dApp to call it from a web application, similar to the dApp that you create in the tutorial [Build your first app on Tezos](../build-your-first-app/).
+If you want to continue working with this contract, try creating a dApp to call it from a web application, similar to the dApp that you create in the tutorial [Build a simple web application](../build-your-first-app/).
 You can also try adding your own endpoints and originating a new contract, but you cannot update the existing contract after it is deployed.
diff --git a/docs/tutorials/smart-contract/jsligo.mdx b/docs/tutorials/smart-contract/jsligo.mdx
index eeb26626d..55e8a0bea 100644
--- a/docs/tutorials/smart-contract/jsligo.mdx
+++ b/docs/tutorials/smart-contract/jsligo.mdx
@@ -303,5 +303,5 @@ It also allows you to call the contract.
 Now the contract is running on the Tezos blockchain.
 You or any other user can call it from any source that can send transactions to Tezos, including Octez, dApps, and other contracts.
 
-If you want to continue working with this contract, try creating a dApp to call it from a web application, similar to the dApp that you create in the tutorial [Build your first app on Tezos](../build-your-first-app/).
+If you want to continue working with this contract, try creating a dApp to call it from a web application, similar to the dApp that you create in the tutorial [Build a simple web application](../build-your-first-app/).
 You can also try adding your own endpoints and originating a new contract, but you cannot update the existing contract after it is deployed.
diff --git a/docs/tutorials/smart-contract/smartpy.mdx b/docs/tutorials/smart-contract/smartpy.mdx
index 50da77700..0102c4a39 100644
--- a/docs/tutorials/smart-contract/smartpy.mdx
+++ b/docs/tutorials/smart-contract/smartpy.mdx
@@ -290,5 +290,5 @@ It will not be shown again.
 Now the contract is running on the Tezos blockchain.
 You or any other user can call it from any source that can send transactions to Tezos, including Octez, dApps, and other contracts.
 
-If you want to continue working with this contract, try creating a dApp to call it from a web application, similar to the dApp that you create in the tutorial [Build your first app on Tezos](../build-your-first-app/).
+If you want to continue working with this contract, try creating a dApp to call it from a web application, similar to the dApp that you create in the tutorial [Build a simple web application](../build-your-first-app/).
 You can also try adding your own endpoints and originating a new contract, but you cannot update the existing contract after it is deployed.
diff --git a/sidebars.js b/sidebars.js
index 8ace4d6d1..e1749ba90 100644
--- a/sidebars.js
+++ b/sidebars.js
@@ -249,156 +249,154 @@ const sidebars = {
     },
   ],
   tutorialsSidebar: [
+    {
+      type: 'doc',
+      label: 'Tutorials home',
+      id: 'tutorials',
+    },
+    {
+      type: 'html',
+      value: '<div>Beginner</div>',
+      className: 'menu__divider',
+    },
     {
       type: 'category',
-      label: 'Tutorials',
+      label: 'Deploy a smart contract',
       link: {
         type: 'doc',
-        id: 'tutorials',
+        id: 'tutorials/smart-contract',
       },
       items: [
-        {
-          type: 'category',
-          label: 'Deploy a smart contract',
-          link: {
-            type: 'doc',
-            id: 'tutorials/smart-contract',
-          },
-          items: [
-            'tutorials/smart-contract/jsligo',
-            'tutorials/smart-contract/cameligo',
-            'tutorials/smart-contract/smartpy',
-            'tutorials/smart-contract/archetype',
-          ],
-        },
-        {
-          type: 'category',
-          label: 'Create an NFT',
-          link: {
-            type: 'doc',
-            id: 'tutorials/create-an-nft',
-          },
-          items: [
-            'tutorials/create-an-nft/nft-tznft',
-            'tutorials/create-an-nft/nft-taquito',
-            {
-              type: 'category',
-              label: 'Mint NFTs from a web app',
-              link: {
-                type: 'doc',
-                id: 'tutorials/create-an-nft/nft-web-app',
-              },
-              items: [
-                'tutorials/create-an-nft/nft-web-app/setting-up-app',
-                'tutorials/create-an-nft/nft-web-app/defining-functions',
-                'tutorials/create-an-nft/nft-web-app/lets-play',
-              ],
-            },
-          ],
-        },
-        {
-          type: 'category',
-          label: 'Build your first app',
-          link: {
-            type: 'doc',
-            id: 'tutorials/build-your-first-app',
-          },
-          items: [
-            'tutorials/build-your-first-app/setting-up-app',
-            'tutorials/build-your-first-app/wallets-tokens',
-            'tutorials/build-your-first-app/sending-transactions',
-            'tutorials/build-your-first-app/getting-information',
-          ],
-        },
-
-        {
-          type: 'category',
-          label: 'Start with a minimum dApp and add new features',
-          link: {
-            type: 'doc',
-            id: 'tutorials/dapp',
-          },
-          items: [
-            'tutorials/dapp/part-1',
-            'tutorials/dapp/part-2',
-            'tutorials/dapp/part-3',
-            'tutorials/dapp/part-4',
-          ],
-        },
-
-        {
-          type: 'category',
-          label: 'Deploy a smart rollup',
-          link: {
-            type: 'doc',
-            id: 'tutorials/smart-rollup',
-          },
-          items: [
-            'tutorials/smart-rollup/set-up',
-            'tutorials/smart-rollup/debug',
-            'tutorials/smart-rollup/optimize',
-            'tutorials/smart-rollup/deploy',
-            'tutorials/smart-rollup/run',
-          ],
-        },
-        {
-          type: 'category',
-          label: 'Implement a file archive with the DAL',
-          link: {
-            type: 'doc',
-            id: 'tutorials/build-files-archive-with-dal',
-          },
-          items: [
-            'tutorials/build-files-archive-with-dal/get-dal-params',
-            'tutorials/build-files-archive-with-dal/get-slot-info',
-            'tutorials/build-files-archive-with-dal/publishing-on-the-dal',
-            'tutorials/build-files-archive-with-dal/using-full-slot',
-          ],
-        },
-        {
-          type: 'category',
-          label: 'Join the DAL as a Weeklynet baker',
-          link: {
-            type: 'doc',
-            id: 'tutorials/join-dal-baker',
-          },
-          items: [
-            'tutorials/join-dal-baker/get-octez',
-            'tutorials/join-dal-baker/run-node',
-            'tutorials/join-dal-baker/prepare-account',
-            'tutorials/join-dal-baker/run-dal-node',
-            'tutorials/join-dal-baker/run-baker',
-            'tutorials/join-dal-baker/conclusion',
-          ],
-        },
-        {
-          type: 'category',
-          label: 'Build an NFT marketplace',
-          link: {
-            type: 'doc',
-            id: 'tutorials/build-an-nft-marketplace',
-          },
-          items: [
-            'tutorials/build-an-nft-marketplace/part-1',
-            'tutorials/build-an-nft-marketplace/part-2',
-            'tutorials/build-an-nft-marketplace/part-3',
-            'tutorials/build-an-nft-marketplace/part-4',
-          ],
-        },
-        {
-          type: 'category',
-          label: 'Create a mobile game',
-          link: {
-            type: 'doc',
-            id: 'tutorials/mobile',
-          },
-          items: [
-            'tutorials/mobile/part-1',
-            'tutorials/mobile/part-2',
-            'tutorials/mobile/part-3',
-            'tutorials/mobile/part-4',
-          ],
-        },
+        'tutorials/smart-contract/jsligo',
+        'tutorials/smart-contract/cameligo',
+        'tutorials/smart-contract/smartpy',
+        'tutorials/smart-contract/archetype',
+      ],
+    },
+    {
+      type: 'category',
+      label: 'Mint NFTs from a web app',
+      link: {
+        type: 'doc',
+        id: 'tutorials/create-an-nft/nft-web-app',
+      },
+      items: [
+        'tutorials/create-an-nft/nft-web-app/setting-up-app',
+        'tutorials/create-an-nft/nft-web-app/defining-functions',
+        'tutorials/create-an-nft/nft-web-app/lets-play',
+      ],
+    },
+    {
+      type: 'category',
+      label: 'Start with a minimum dApp and add new features',
+      link: {
+        type: 'doc',
+        id: 'tutorials/dapp',
+      },
+      items: [
+        'tutorials/dapp/part-1',
+        'tutorials/dapp/part-2',
+        'tutorials/dapp/part-3',
+        'tutorials/dapp/part-4',
+      ],
+    },
+    {
+      type: 'html',
+      value: '<div>Intermediate</div>',
+      className: 'menu__divider',
+    },
+    {
+      type: 'category',
+      label: 'Build a simple web application',
+      link: {
+        type: 'doc',
+        id: 'tutorials/build-your-first-app',
+      },
+      items: [
+        'tutorials/build-your-first-app/setting-up-app',
+        'tutorials/build-your-first-app/wallets-tokens',
+        'tutorials/build-your-first-app/sending-transactions',
+        'tutorials/build-your-first-app/getting-information',
+      ],
+    },
+    'tutorials/create-an-nft/nft-taquito',
+    'tutorials/create-an-nft/nft-tznft',
+    {
+      type: 'html',
+      value: '<div>Advanced</div>',
+      className: 'menu__divider',
+    },
+    {
+      type: 'category',
+      label: 'Deploy a Smart Rollup',
+      link: {
+        type: 'doc',
+        id: 'tutorials/smart-rollup',
+      },
+      items: [
+        'tutorials/smart-rollup/set-up',
+        'tutorials/smart-rollup/debug',
+        'tutorials/smart-rollup/optimize',
+        'tutorials/smart-rollup/deploy',
+        'tutorials/smart-rollup/run',
+      ],
+    },
+    {
+      type: 'category',
+      label: 'Build an NFT marketplace',
+      link: {
+        type: 'doc',
+        id: 'tutorials/build-an-nft-marketplace',
+      },
+      items: [
+        'tutorials/build-an-nft-marketplace/part-1',
+        'tutorials/build-an-nft-marketplace/part-2',
+        'tutorials/build-an-nft-marketplace/part-3',
+        'tutorials/build-an-nft-marketplace/part-4',
+      ],
+    },
+    {
+      type: 'category',
+      label: 'Create a mobile game',
+      link: {
+        type: 'doc',
+        id: 'tutorials/mobile',
+      },
+      items: [
+        'tutorials/mobile/part-1',
+        'tutorials/mobile/part-2',
+        'tutorials/mobile/part-3',
+        'tutorials/mobile/part-4',
+      ],
+    },
+    {
+      type: 'category',
+      label: 'Implement a file archive with the DAL',
+      link: {
+        type: 'doc',
+        id: 'tutorials/build-files-archive-with-dal',
+      },
+      items: [
+        'tutorials/build-files-archive-with-dal/get-dal-params',
+        'tutorials/build-files-archive-with-dal/get-slot-info',
+        'tutorials/build-files-archive-with-dal/publishing-on-the-dal',
+        'tutorials/build-files-archive-with-dal/using-full-slot',
+      ],
+    },
+    {
+      type: 'category',
+      label: 'Join the DAL as a Weeklynet baker',
+      link: {
+        type: 'doc',
+        id: 'tutorials/join-dal-baker',
+      },
+      items: [
+        'tutorials/join-dal-baker/get-octez',
+        'tutorials/join-dal-baker/run-node',
+        'tutorials/join-dal-baker/prepare-account',
+        'tutorials/join-dal-baker/run-dal-node',
+        'tutorials/join-dal-baker/run-baker',
+        'tutorials/join-dal-baker/conclusion',
       ],
     },
   ],
diff --git a/src/css/custom.css b/src/css/custom.css
index 2423fd415..9426cf4df 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -148,6 +148,18 @@ nav.navbar {
   color: #0D61FF;
 }
 
+/* Headings for tutorials sidebar */
+.menu__divider {
+  font-family: 'GT Eesti Display', sans-serif;
+  font-weight: bold;
+  font-size: 16px;
+  line-height: 26px;
+  color: #4A4E52;
+  transition: color 0.3s;
+  padding-left: var(--ifm-menu-link-padding-horizontal);
+  padding-top: 30px;
+}
+
 /* breadcrumbs menu */
 .breadcrumbs__item--active .breadcrumbs__link {
   color: #0D61FF;