[HelpDot] Add platform tabs

docs/_layouts/default.html

@@ -12,6 +12,7 @@
     <script src="https://kit.fontawesome.com/263e5e8608.js" crossorigin="anonymous"></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>
+    <script defer src="/assets/js/platform-tabs.js"></script>
     <script defer src="/assets/js/selector.js"></script>
     <script async src="https://cse.google.com/cse.js?cx=41f40d6e5c14246ff"></script>
     <!-- Google Tag Manager -->
@@ -65,10 +66,13 @@
         <div id="article-content">
             <!-- Article title (only shown in article pages) -->
             {% if page.url contains "/articles/" %}
-            <h1 class="title">
-                {{ page.name | remove: '.md' | split: "-" |  join: " " }}
-            </h1>
-
+            <div class="title-platform-tabs">
+                <h1 class="title">
+                    {{ page.name | remove: '.md' | split: "-" |  join: " " }}
+                </h1>
+                <div id="platform-tabs">
+                </div>
+            </div>
             <div class="article-toc-content article">
                 {{ content }}
             </div>

docs/_sass/_main.scss

@@ -350,10 +350,14 @@ button {
     h1 {
         &.title {
             font-size: 2.25em;
+            flex: 1;
         }
     }
 
     .article {
+        .hidden {
+            display: none;
+        }
         img {
             display: block;
             margin: 20px auto;
@@ -906,6 +910,44 @@ button {
     }
 }
 
+.title-platform-tabs {
+    display: flex;
+    justify-content: space-between;
+    padding-bottom: 12px;
+    h1 {
+        padding: 0;
+    }
+
+    @include maxBreakpoint($breakpoint-tablet) {
+        flex-direction: column;
+        gap: 20px;
+    }
+}
+
+#platform-tabs {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    text-align: center;
+    font-weight: 700;
+    font-size: 13px;
+    gap: 4px;
+}
+
+#platform-tabs > * {
+    cursor: pointer;
+    border-radius: 20px;
+    padding: 10px 20px;
+    box-sizing: border-box;
+    height: 36px;
+    line-height: 16px;
+}
+
+#platform-tabs > .active {
+    color: $color-text;
+    background-color: $color-button-background;
+}
+
 .hidden {
     display: none;
 }

docs/articles/expensify-classic/getting-started/Using-The-App.md

@@ -2,14 +2,16 @@
 title: Using the app
 description: Streamline expense management effortlessly with the Expensify mobile app. Learn how to install, enable push notifications, and use SmartScan to capture, categorize, and track expenses. Versatile for personal and business use, Expensify is a secure and automated solution for managing your finances on the go.
 ---
+
+<div id="expensify-classic" markdown="1">
 # Overview
 The Expensify mobile app is the ultimate expense management solution that makes it effortless to track and submit your receipts and expenses. Use the app to snap a picture of your receipts, categorize and submit expenses, and even review and approve expense reports.
 # How to install the Expensify app
 To get started with Expensify on your mobile device, you need to download the app:
 1. Visit the App Store (iOS) or Google Play Store (Android).
 2. Search for "Expensify" and select the official Expensify app.
 3. Tap "Download" or "Install."
-   
+
 Once the app is installed, open it and log in with your Expensify credentials. If you don't have an Expensify account, you can create one during the sign-up process.
 # How to enable on push notifications
 Push notifications keep you informed about expense approvals, reimbursements, and more. To enable push notifications:
@@ -54,3 +56,10 @@ Expensify takes security seriously and employs encryption and other security mea
 Yes, you can use the mobile app offline to capture receipts and create expenses. The app will sync your data once you have an internet connection.
 
 {% include faq-end.md %}
+</div>
+<div id="new-expensify" markdown="1">
+
+# Coming soon
+
+
+</div>

docs/assets/js/main.js

@@ -165,6 +165,37 @@ window.addEventListener('load', () => {
     insertElementAfter(searchInput, searchLabel);
 });
 
+const tocbotOptions = {
+    // Where to render the table of contents.
+    tocSelector: '.article-toc',
+
+    // Where to grab the headings to build the table of contents.
+    contentSelector: '',
+
+    // Disable the collapsible functionality of the library by
+    // setting the maximum number of heading levels (6)
+    collapseDepth: 6,
+    headingSelector: 'h1, h2, h3, summary',
+
+    // Main class to add to lists.
+    listClass: 'lhn-items',
+
+    // Main class to add to links.
+    linkClass: 'link',
+
+    // Class to add to active links,
+    // the link corresponding to the top most heading on the page.
+    activeLinkClass: 'selected-article',
+
+    // Headings offset between the headings and the top of the document (requires scrollSmooth enabled)
+    headingsOffset: 80,
+    scrollSmoothOffset: -80,
+    scrollSmooth: true,
+
+    // If there is a fixed article scroll container, set to calculate titles' offset
+    scrollContainer: 'content-area',
+};
+
 window.addEventListener('DOMContentLoaded', () => {
     injectFooterCopywrite();
 
@@ -179,38 +210,51 @@ window.addEventListener('DOMContentLoaded', () => {
         buttonCloseSidebar.addEventListener('click', closeSidebar);
     }
 
-    if (window.tocbot) {
-        window.tocbot.init({
-            // Where to render the table of contents.
-            tocSelector: '.article-toc',
+    const expensifyClassicTab = document.getElementById('platform-tab-expensify-classic');
+    const newExpensifyTab = document.getElementById('platform-tab-new-expensify');
 
-            // Where to grab the headings to build the table of contents.
-            contentSelector: '.article-toc-content',
+    const expensifyClassicContent = document.getElementById('expensify-classic');
+    const newExpensifyContent = document.getElementById('new-expensify');
 
-            // Disable the collapsible functionality of the library by
-            // setting the maximum number of heading levels (6)
-            collapseDepth: 6,
-            headingSelector: 'h1, h2, h3, summary',
+    let contentSelector = '.article-toc-content';
+    if (expensifyClassicContent) {
+        contentSelector = '#expensify-classic';
+    } else if (newExpensifyContent) {
+        contentSelector = '#new-expensify';
+    }
 
-            // Main class to add to lists.
-            listClass: 'lhn-items',
+    if (window.tocbot) {
+        window.tocbot.init({
+            ...tocbotOptions,
+            contentSelector,
+        });
+    }
 
-            // Main class to add to links.
-            linkClass: 'link',
+    // eslint-disable-next-line es/no-optional-chaining
+    expensifyClassicTab?.addEventListener('click', () => {
+        expensifyClassicTab.classList.add('active');
+        expensifyClassicContent.classList.remove('hidden');
 
-            // Class to add to active links,
-            // the link corresponding to the top most heading on the page.
-            activeLinkClass: 'selected-article',
+        newExpensifyTab.classList.remove('active');
+        newExpensifyContent.classList.add('hidden');
+        window.tocbot.refresh({
+            ...tocbotOptions,
+            contentSelector: '#expensify-classic',
+        });
+    });
 
-            // Headings offset between the headings and the top of the document (requires scrollSmooth enabled)
-            headingsOffset: 80,
-            scrollSmoothOffset: -80,
-            scrollSmooth: true,
+    // eslint-disable-next-line es/no-optional-chaining
+    newExpensifyTab?.addEventListener('click', () => {
+        newExpensifyTab.classList.add('active');
+        newExpensifyContent.classList.remove('hidden');
 
-            // If there is a fixed article scroll container, set to calculate titles' offset
-            scrollContainer: 'content-area',
+        expensifyClassicTab.classList.remove('active');
+        expensifyClassicContent.classList.add('hidden');
+        window.tocbot.refresh({
+            ...tocbotOptions,
+            contentSelector: '#new-expensify',
         });
-    }
+    });
 
     document.getElementById('header-button').addEventListener('click', toggleHeaderMenu);
 

docs/assets/js/platform-tabs.js

@@ -0,0 +1,22 @@
+const expensifyClassicContent = document.getElementById('expensify-classic');
+const newExpensifyContent = document.getElementById('new-expensify');
+const platformTabs = document.getElementById('platform-tabs');
+
+if (expensifyClassicContent) {
+    const tab = document.createElement('div');
+    tab.innerHTML = 'Expensify Classic';
+    tab.id = 'platform-tab-expensify-classic';
+    tab.classList.add('active');
+    platformTabs.appendChild(tab);
+}
+
+if (newExpensifyContent) {
+    const tab = document.createElement('div');
+    tab.innerHTML = 'New Expensify';
+    tab.id = 'platform-tab-new-expensify';
+
+    if (!expensifyClassicContent) {
+        tab.classList.add('active');
+    }
+    platformTabs.appendChild(tab);
+}