docs: adjust font size of sidebar items (#2158)

* adjust font size

* made sidebar narrower

docs/content/contribution-guidelines.md

@@ -57,14 +57,18 @@ In the body of the PR, explain clearly what the PR does. If the PR solves an iss
 
 ## Sidebar
 
-When you add a new page to the documentation, you must add the new page in `www/docs/sidebars.js` under the `tutorialSidebar`. You can learn more about the syntax used [here](https://docusaurus.io/docs/sidebar/items).
+When you add a new page to the documentation, you must add the new page in `www/docs/sidebars.js` under the `docsSidebar`. You can learn more about the syntax used [here](https://docusaurus.io/docs/sidebar/items).
 
 ### Terminology
 
 When the documentation page is a conceptual or overview documentation, the label in the sidebar should start with a noun.
 
 When the documentation page is a tutorial documentation, the label in the sidebar should start with a verb. An exception of this rule are integration documentations and upgrade guides.
 
+### Character Count
+
+The character count of the sidebar item's label must be at most twenty seven characters.
+
 ## Notes and Additional Information
 
 When displaying notes and additional information in a documentation page, use [Admonitions](https://docusaurus.io/docs/markdown-features/admonitions). Make sure the type of admonition used matches the note’s importance to the current document.
@@ -109,7 +113,7 @@ For example, even though you can run the `start` script using NPM with `npm star
 
 When a command uses the global option `-g`, add it at the end of the NPM command to ensure that it’s transformed to a Yarn command properly. For example:
 
-```bash
+```bash npm2yarn
 npm install @medusajs/medusa-cli -g
 ```
 

www/docs/docusaurus.config.js

@@ -154,7 +154,7 @@ module.exports = {
         label: 'Go to medusajs.com',
         className: 'topright-icon',
       },
-    ]
+    ],
   },
   presets: [
     [

www/docs/sidebars.js

@@ -43,7 +43,7 @@ module.exports = {
         {
           type: "doc",
           id: "tutorial/set-up-your-development-environment",
-          label: "Set Up Development Environment"
+          label: "Set Up Dev Environment"
         },
         {
           type: "doc",
@@ -326,7 +326,7 @@ module.exports = {
                 {
                   type: "doc",
                   id: "add-plugins/contentful/customize-contentful",
-                  label: "Customize Contentful Integration",
+                  label: "Customize Integration",
                 },
               ]
             },
@@ -440,7 +440,7 @@ module.exports = {
         {
           type: "doc",
           id: "troubleshooting/missing-payment-providers",
-          label: "Payment provider (Stripe) not showing in checkout",
+          label: "Payment provider missing",
         },
         {
           type: "doc",

www/docs/src/css/custom.css

@@ -24,7 +24,7 @@
   --ifm-font-family-base: "Inter",BlinkMacSystemFont,-apple-system,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Helvetica","Arial",sans-serif;
 
   /* Sidebar */
-  --doc-sidebar-width: 350px !important;
+  --doc-sidebar-width: 250px !important;
 
   /* Docs Page */
   --ifm-docs-page-max-width: 850px;
@@ -387,7 +387,7 @@ kbd {
 .menu__link,
 .redocusaurus .menu-content label {
   font-weight: 500 !important;
-  font-size: 14px;
+  font-size: 12px;
   line-height: 1.7em;
   position: relative;
   white-space: nowrap;
@@ -430,11 +430,11 @@ kbd {
   font-weight: 600 !important;
 }
 
-.menu__list,
+/* .menu__list,
 .redocusaurus .menu-content ul {
   padding-left: 1.7em;
   padding-right: 1.7em;
-}
+} */
 
 a.menu__link--sublist::after {
   content: none;
@@ -540,7 +540,7 @@ a.menu__link--sublist::before,
   background-image: url('/img/alert.svg');
   width: 20px;
   height: 20px;
-  top: 23%;
+  top: 19%;
 }
 
 html:not([data-theme="dark"]) .menu__list-item.alert-icon .menu__link:hover::before,
@@ -557,7 +557,7 @@ html:not([data-theme="dark"]) .menu__list-item.alert-icon .menu__link.menu__link
   background-image: url('/img/arrow-top-right.svg');
   width: 20px;
   height: 20px;
-  top: 23%;
+  top: 19%;
 }
 
 html:not([data-theme="dark"]) .menu__list-item.topright-icon .menu__link:hover::before,
@@ -577,4 +577,8 @@ html:not([data-theme="dark"]) .menu__list-item.topright-icon .menu__link.menu__l
 
 .menu__list-item-collapsible {
   padding-bottom: 6px;
+}
+
+.redocusaurus .menu-content {
+  width: var(--doc-sidebar-width);
 }

www/docs/src/theme/DocSidebar/Desktop/styles.module.css

@@ -45,5 +45,10 @@
 .sidebarFooterList {
   border-top: 1px solid var(--ifm-toc-border-color);
   list-style: none;
-  padding: 1.7em;
+  padding-top: 1.7em;
+  padding-left: 0;
+}
+
+.sidebarFooterList li a {
+  padding-left: 1.8em !important;
 }