fix styles for hub pages and article page

docs/Gemfile.lock

@@ -254,6 +254,7 @@ GEM
 
 PLATFORMS
   x86_64-darwin-20
+  x86_64-darwin-21
 
 DEPENDENCIES
   github-pages

docs/README.md

@@ -11,23 +11,23 @@ Expensify Help is mainly composed of static HTML (`.html`) and Markdown (`.md`)
 - Install Jekyll locally by running:
 ```
 gem install bundler
-cd help
+cd docs
 bundle install
 ```
 
 ## Steps
 
 1. Open the Terminal command line in macOS.
-2. Navigate to the `help` folder in the command line.
+2. Navigate to the `docs` folder in the command line.
 3. Run `bundle exec jekyll serve --livereload`.
     - _Note: If you see an error like `Unable to load the EventMachine C Extension...`, try running `gem uninstall eventmachine && bundle install`. If that doesn't work just removing the `--livereload` flag should work._
 4. Open http://localhost:4000 in the browser to see the site running locally.
 5. Modify a `.html` or `.md` file and refresh the page in the browser.
 
 # How the project is structured
 
-The [help](https://github.com/Expensify/App/tree/e6cea38ef22f83ae4730a34a9281d8962388dff8/help) folder will contain the following main folders:
-- *_layouts*: This contains HTML templates used by Jekyll to create pages in the static site. For now it has only one file ([default.html](https://github.com/Expensify/App/blob/e6cea38ef22f83ae4730a34a9281d8962388dff8/docs/_layouts/default.html)) which will render the common HTML elements and the assets on every page. It also supports the use of the [liquid template language](https://shopify.github.io/liquid/).
+The [docs](https://github.com/Expensify/App/tree/main/docs) folder will contain the following main folders:
+- *_layouts*: This contains HTML templates used by Jekyll to create pages in the static site. For now it has only one file ([default.html](https://github.com/Expensify/App/blob/main/docs/_layouts/default.html)) which will render the common HTML elements and the assets on every page. It also supports the use of the [liquid template language](https://shopify.github.io/liquid/).
 - *_includes*: Contains HTML content that can be reused on different pages. For now, it contains various html elements that are used to populate the left-hand-nav (LHN).
 - *assets*: it will contain the three sub-folders css, images, and js.
   - The css folder can contain either .css or .sass files (where SASS files will be processed by Jekyll and it will generate a CSS file in an output folder also generated by Jekyll).
@@ -43,7 +43,7 @@ More details about the Jekyll project structure can be found [here](https://jeky
 
 ## Add content
 
-Copy the [template](https://github.com/Expensify/App/blob/e6cea38ef22f83ae4730a34a9281d8962388dff8/docs/TEMPLATE.md) file and rename it with the name of the article title, i.e. [SmartScan.md](https://github.com/Expensify/App/blob/e6cea38ef22f83ae4730a34a9281d8962388dff8/docs/articles/request-money/request-money/SmartScan.md) (you can use dashes for spaces in the file name if it's needed) and put the new file inside of the respective hub folder or sub-folder. The title will be rendered automatically according to the filename (the dashes will be removed in the generated site page).
+Copy the [template](https://github.com/Expensify/App/blob/main/docs/TEMPLATE.md) file and rename it with the name of the article title, i.e. [SmartScan.md](https://github.com/Expensify/App/blob/main/docs/articles/request-money/SmartScan.md) (you can use dashes for spaces in the file name if it's needed) and put the new file inside of the respective hub folder or sub-folder. The title will be rendered automatically according to the filename (the dashes will be removed in the generated site page).
 
 The sections of the article will be filled and nested automatically in the LHN, just ensure to use the [heading markdown tags](https://www.markdownguide.org/cheat-sheet/) correctly.
 
@@ -58,25 +58,25 @@ There are 3 main components in the hub page: 1. Stage title, 2. Row of Card butt
 </h2>
 
 <!-- 2. Row of Card buttons -->
-<div class="cards-row">
+<div class="cards-group">
 
     <!-- 3. Card buttons -->
 
-    <div class="card" onclick="openArticle('./request-money/SmartScan')">
+    <div class="card" onclick="navigateTo('./request-money/SmartScan')">
         <div class="body">
             <div class="title">SmartScan</div>
         </div>
         <div class="right-icon">
-            <i class="fa-solid fa-angle-right caret-icon"></i>
+            <i class="fa-solid fa-angle-right icon"></i>
         </div>
     </div>
 
-    <div class="card" onclick="openArticle('./request-money/AnotherArticle')">
+    <div class="card" onclick="navigateTo('./request-money/AnotherArticle')">
         <div class="body">
             <div class="title">Another Article</div>
         </div>
         <div class="right-icon">
-            <i class="fa-solid fa-angle-right caret-icon"></i>
+            <i class="fa-solid fa-angle-right icon"></i>
         </div>
     </div>
 
@@ -101,7 +101,7 @@ Where `id` is an arbitrary value that will help us to anchor this title to the L
 If it's required, you can add a new row of Card buttons with the following HTML block:
 
 ```html
-<div class="cards-row">
+<div class="cards-group">
     <!-- Add Cards components here -->
 </div>
 ```
@@ -110,15 +110,15 @@ If it's required, you can add a new row of Card buttons with the following HTML
 
 A card button is the box that contains the article title and the caret right icon `>`. It navigates to the article when it's pressed.
 
-In order to add a new Card button in the respective hub page ([send-money/index.html](https://github.com/Expensify/App/blob/e6cea38ef22f83ae4730a34a9281d8962388dff8/docs/articles/send-money/index.html) or [request-money/index.html](https://github.com/Expensify/App/blob/e6cea38ef22f83ae4730a34a9281d8962388dff8/docs/articles/request-money/index.html)) just copy and pase the following Card element:
+In order to add a new Card button in the respective hub page ([send-money/index.html](https://github.com/Expensify/App/blob/main/docs/hubs/send-money.html) or [request-money/index.html](https://github.com/Expensify/App/blob/main/docs/hubs/request-money.html)) just copy and pase the following Card element:
 
 ```html
-<div class="card" onclick="openArticle('./request-money/SmartScan')">
+<div class="card" onclick="navigateTo('./request-money/SmartScan')">
     <div class="body">
         <div class="title">SmartScan</div>
     </div>
     <div class="right-icon">
-        <i class="fa-solid fa-angle-right caret-icon"></i>
+        <i class="fa-solid fa-angle-right icon"></i>
     </div>
 </div>
 ```
@@ -147,7 +147,7 @@ There are 2 main components in the LHN page associated with the hub you're addin
 
 ### Add a new Stage title anchor (optional)
 
-Just add copy and paste the following HTML block in the corresponding navigation tree file (either for [Request Money](https://github.com/Expensify/App/blob/e6cea38ef22f83ae4730a34a9281d8962388dff8/docs/_includes/request-money-navigation-tree.html) or [Send Money](https://github.com/Expensify/App/blob/e6cea38ef22f83ae4730a34a9281d8962388dff8/docs/_includes/send-money-navigation-tree.html)):
+Just add copy and paste the following HTML block in the corresponding navigation tree file (either for [Request Money](https://github.com/Expensify/App/blob/main/docs/_includes/request-money-lhn.html) or [Send Money](https://github.com/Expensify/App/blob/main/docs/_includes/send-money-lhn.html)):
 
 ```
 <li><a href="#request-money">Request Money</a>

docs/_includes/home-lhn.html

@@ -0,0 +1,17 @@
+<ul class="lhn-items">
+    <li class="home-link">
+        <a href="/index.html">Home</a>
+    </li>
+    <li>
+        <div onclick="navigateTo('/hubs/send-money')" class="icon-with-link">
+            <i class="fa-solid fa-angle-right icon"></i>
+            <div class="link">Send money</div>
+        </div>
+    </li>
+    <li>
+        <div onclick="navigateTo('/hubs/request-money')" class="icon-with-link">
+            <i class="fa-solid fa-angle-right icon"></i>
+            <div class="link">Request money</div>
+        </div>
+    </li>
+</ul>

docs/_includes/request-money-lhn.html

@@ -0,0 +1,34 @@
+<ul class="lhn-items">
+    <li class="home-link">
+        <a href="/index.html">Home</a>
+    </li>
+    <li>
+        <div onclick="navigateTo('/hubs/send-money')" class="icon-with-link">
+            <i class="fa-solid fa-angle-right icon"></i>
+            <span class="link">Send money</span>
+        </div>
+    </li>
+    <li>
+        <div class="icon-with-link selected">
+            <i class="fa-solid fa-angle-down icon"></i>
+            <span>Request money</span>
+        </div>
+        <ul class="nested-treeview">
+
+            <!-- Add content below, more instructions in the README.md file
+                https://github.com/Expensify/App/blob/main/docs/README.md#add-a-new-entry-in-the-lhn-page
+            -->
+
+            <!-- Stage title anchor -->
+            <li><a href="#request-money">Request money</a>
+                <ul>
+                    <!-- Article links -->
+                    <li onclick="navigateTo('/articles/request-money/SmartScan')"><a>SmartScan</a></li>
+                    <!-- More Article links here (if required)... -->
+                </ul>
+            </li>
+
+            <!-- More Stage title anchors here... -->
+        </ul>
+    </li>
+</ul>

docs/_includes/send-money-lhn.html

@@ -0,0 +1,23 @@
+<ul class="lhn-items">
+    <li class="home-link">
+        <a href="/index.html">Home</a>
+    </li>
+    <li>
+        <div class="icon-with-link selected">
+            <i class="fa-solid fa-angle-down icon"></i>
+            <span>Send money</span>
+        </div>
+        <ul class="nested-treeview">
+
+            <!-- Add content below, more instructions in the README.md file
+                https://github.com/Expensify/App/blob/main/docs/README.md#add-a-new-entry-in-the-lhn-page
+            -->
+        </ul>
+    </li>
+    <li>
+        <div onclick="navigateTo('/hubs/request-money')" class="icon-with-link">
+            <i class="fa-solid fa-angle-right icon"></i>
+            <a href="/hubs/request-money">Request money</a>
+        </div>
+    </li>
+</ul>

docs/_layouts/default.html

@@ -7,33 +7,40 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
     <link rel="icon" type="image/png" href="https://d2k5nsl2zxldvw.cloudfront.net/images/expensify-favicon.png">
     <link rel="stylesheet" href="/assets/css/styles.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.1.1/tocbot.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.12.0/tocbot.css">
+
     <script src="https://kit.fontawesome.com/263e5e8608.js" crossorigin="anonymous"></script>
-    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.1.1/tocbot.min.js"></script>
+    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.12.0/tocbot.js"></script>
     <script defer src="/assets/js/main.js"></script>
 </head>
 
 <body>
 
-    <div class="lhn">
-        <img src="/assets/images/expensify-help.svg" class="logo" />
+    <div id="lhn">
+
+        <div class="lhn-header">
+            <div class="header-button" onclick="toggleHeaderMenu()">
+                <i id="angle-up-icon" class="fa-solid fa-angle-up icon hide"></i>
+                <i id="bars-icon" class="fa-solid fa-bars icon"></i>
+            </div>
+            <img src="/assets/images/expensify-help.svg" class="logo" />
+        </div>
 
         <!-- LHN content (Main navigation tree or Article TOC) -->
-        <div class="lhn-content">
+        <div id="lhn-content">
             {% case page.lhn_content %}
             {% when "homepage" %}
-                {% include home-navigation-tree.html %}
+                {% include home-lhn.html %}
             {% when "request-money" %}
-                {% include request-money-navigation-tree.html %}
+                {% include request-money-lhn.html %}
             {% when "send-money" %}
-                {% include send-money-navigation-tree.html %}
+                {% include send-money-lhn.html %}
             {% else %}
-                <div onclick="history.back()" class="main-navigation-tree">
-                    <div class="link">
-                        <i class="fa-solid fa-angle-left caret-icon"></i>Back
-                    </div>
+                <div onclick="navigateBack()" class="icon-with-link">
+                    <i class="fa-solid fa-angle-left icon"></i>
+                    <div class="link">Back</div>
                 </div>
-                <span>In this article</span>
+                <span class="in-this-article">In this article</span>
                 <div class="article-toc"></div>
             {% endcase %}
         </div>
@@ -45,17 +52,16 @@
         </div>
     </div>
 
-    <div class="content-area">
+    <div id="content-area">
 
         <!-- Article title (only shown in article pages) -->
         {% if page.lhn_content == nil %}
-            <h1>
+            <h1 class="title">
                 {{ page.name | remove: '.md' | split: "-" |  join: " " }}
             </h1>
         {% endif %}
 
         <div class="article-toc-content">
-
             {{ content }}
         </div>