Expensify · marcochavezf · Aug 11, 2023 · Aug 8, 2023 · Aug 8, 2023 · Aug 8, 2023
@@ -0,0 +1,5 @@
+<div class="search-icon">
+    <a href="javascript:void(0)" onclick="openSidebar()" id="toggle-search-open">
+        <img src="/assets/images/search.svg" class="base-icon" />
+    </a>
+</div>
@@ -0,0 +1,13 @@
+<div id="sidebar-layer">
+    <div id="sidebar-search" class="sidebar">
+        <div class="flex searchbar-title-wrapper">
+            <h4 class="search-title">Search</h4>
+            <a href="javascript:void(0)" id="toggle-search-close">
+                <img src="/assets/images/close.svg" class="base-icon--small" />
+            </a>
+        </div>
+        <!-- As the search box is being managed by Embed script from Google, the way search work is on via on Enter / Search Icon -->
+        <div class="gcse-searchbox"></div>
+        <div class="gcse-searchresults"></div>
+    </div>
+</div>
@@ -2,7 +2,7 @@
 <html>
 <head>
     <meta charset="utf-8">
-    <meta http-equiv="Content-Security-Policy" content="script-src https://kit.fontawesome.com https://cdnjs.cloudflare.com https://cdnjs.cloudflare.com/ajax/libs/tocbot/ 'self'; style-src cdnjs.cloudflare.com ka-f.fontawesome.com 'self' 'unsafe-inline'" >
+    <meta http-equiv="Content-Security-Policy" content="script-src https://kit.fontawesome.com https://cdnjs.cloudflare.com https://www.google.com https://www.gstatic.com/ https://cse.google.com http://cse.google.com https://partner.googleadservices.com/ https://cdnjs.cloudflare.com/ajax/libs/tocbot/ 'self' 'unsafe-eval' 'unsafe-inline'; style-src cdnjs.cloudflare.com cse.google.com www.google.com ka-f.fontawesome.com fonts.googleapis.com 'self' 'unsafe-inline'" >
     <title>Expensify Help</title>
     <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="/assets/images/expensify-logo-round.png">
@@ -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 async src="https://cse.google.com/cse.js?cx=41f40d6e5c14246ff"></script>
 
     <!-- SEO tags -->
     {% seo %}
@@ -25,11 +26,20 @@
                 <img id="angle-up-icon" src="/assets/images/arrow-up.svg" class="base-icon hide"></img>
                 <img id="bars-icon" src="/assets/images/menu.svg" class="base-icon"></img>
             </div>
-            <a href="/">
-                <img src="/assets/images/expensify-help.svg" class="logo" />
-            </a>
+            <div class="flex">
+                <div>
+                    <a href="/">
+                        <img src="/assets/images/expensify-help.svg" class="logo" />
+                    </a>
+                </div>
+                <!-- Search icons that'll open the Sidebar Search sections -->
+                {% include search-toggle.html %}
+            </div>
         </div>
 
+        <!-- Sidebar Search sections -->
+        {% include sidebar-search.html id="sidebar-layer" %}
+
         <!-- LHN content (Main navigation tree or Article TOC) -->
         <div id="lhn-content">
             {% if page.url == "/" or page.url contains "/hubs/" %}

@@ -4,6 +4,7 @@
 
 $color-appBG: $color-green-appBG;
 $color-highlightBG: $color-green-highlightBG;
+$color-accent : $color-green400;
 $color-borders: $color-green-borders;
 $color-icons: $color-green-icons;
 $color-text: $color-white;
@@ -182,6 +183,150 @@ button {
     align-content: center;
 }
 
+.logo {
+    width: 80%;
+}
+
+.search-icon {
+    margin: auto 0px;
+}
+
+.flex {
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -moz-flex;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-flex-flow: row wrap;
+    flex-flow: row wrap;
+    align-content: space-between;
+}
+
+#sidebar-search {
+    background-color: $color-green-appBG;
+    width: 400px;
+    height: 100vh;
+    position: fixed;
+    display: block;
+    top: 0;
+    right: 0;
+}
+
+@media only screen and (max-width: $breakpoint-tablet) {
+    #sidebar-search {
+        width: 100%;
+    }
+}
+.searchbar-title-wrapper {
+    padding: 20px;
+    padding-bottom: 0px;
+}
+
+.search-title {
+    font-size: 120%;
+}
+
+#toggle-search-close {
+    margin: auto;
+    margin-left: auto;
+    margin-right: 0px;
+}
+
+#sidebar-layer {
+    position: fixed;
+    /* Sit on top of the page content */
+    display: none;
+    /* Hidden by default */
+    width: 100%;
+    /* Full width (cover the whole page) */
+    height: 100%;
+    /* Full height (cover the whole page) */
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #1b574470;
+    z-index: 2;
+    /* Specify a stack order in case you're using a different order for other elements */
+}
+
+#___gcse_0 {
+    margin-left: 20px;
+}
+
+input#gsc-i-id1.gsc-input {
+    background-color: $color-green-appBG;
+    color: #E7ECE9;
+}
+
+#gsc-iw-id1 {
+    background-color: $color-green-appBG;
+    border-bottom: rgba(255, 255, 255, 0.496) 1px solid;
+    border-bottom-left-radius: 0px;
+    &:focus-within {
+        border-bottom: $color-accent 1px solid;
+    }
+}
+
+.gsc-input-box .gsib_a {
+    padding: 0;
+}
+
+.search-icon {
+    margin-left: auto;
+}
+
+/* Hide the relevance, etc sections */
+.gsc-above-wrapper-area {
+    display: none;
+}
+
+.gsc-webResult.gsc-result .gsc-url-top {
+    display: none;
+}
+
+/* Hide the ad */
+.gsc-results-wrapper-visible .gsc-adBlock {
+    display: none;
+}
+
+/* Hide branding */
+.gcsc-more-maybe-branding-root {
+    display: none;
+}
+
+.gsc-control-cse {
+    background-color: $color-green-appBG;
+    border: $color-green-appBG;
+    font-family: "ExpensifyNeue", "Helvetica Neue", "Helvetica", Arial, sans-serif;
+    max-height: 75vh;
+    overflow-y: scroll;
+}
+
+.gs-title {
+    font-weight: bold;
+}
+
+.gsc-search-button.gsc-search-button-v2 {
+    width: auto;
+    padding: 11px 20px;
+    margin: 0;
+    border-radius: 0;
+    border-top-right-radius: 8px;
+    border-bottom-right-radius: 8px;
+    background-color: transparent;
+}
+
+/* Hide find more button google */
+.gcsc-find-more-on-google-root {
+    display: none;
+}
+
+.gsc-resultsbox-visible .gsc-webResult .gsc-result {
+    border-bottom: none;
+}
+
 #lhn {
     position: fixed;
     background-color: $color-highlightBG;
@@ -526,6 +671,11 @@ button {
     height: 20px;
 }
 
+.base-icon--small {
+    width: 14px;
+    height: 14px;
+}
+
 .homepage {
     h1 {
         margin-top: 0;

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<Annotations>
+    <Annotation about="help.expensify.com/*" timestamp="0x00060214357b5e77" score="1.0">
+        <Label name="_include_"></Label>
+        <AdditionalData attribute="original_url" value="https://help.expensify.com/*"></AdditionalData>
+    </Annotation>
+</Annotations>
@@ -75,9 +75,45 @@ function injectFooterCopywrite() {
     footer.innerHTML = `&copy;2008-${new Date().getFullYear()} Expensify, Inc.`;
 }
 
+// Count property of --scroll-y variable
+window.addEventListener('scroll', () => {
+    document.documentElement.style.setProperty('--scroll-y', `${window.scrollY}px`);
+});
+
+function openSidebar() {
+    document.getElementById('sidebar-layer').style.display = 'block';
+    document.getElementById('gsc-i-id1').placeholder = 'Search for something...';
+    // Make body unscrollable
+    const scrollY = document.documentElement.style.getPropertyValue('--scroll-y');
+    const body = document.body;
+    body.style.position = 'fixed';
+    body.style.top = `-${scrollY}`;
+}
+
+function closeSidebar() {
+    document.getElementById('sidebar-layer').style.display = 'none';
+    // Make body scrollable again
+    const body = document.body;
+    const scrollY = body.style.top;
+    body.style.position = '';
+    body.style.top = '';
+    window.scrollTo(0, parseInt(scrollY || '0', 10) * -1);
+}
+
 window.addEventListener('DOMContentLoaded', () => {
     injectFooterCopywrite();
 
+    // Handle open & close the sidebar
+    const buttonOpenSidebar = document.getElementById('toggle-search-open');
+    if (buttonOpenSidebar) {
+        buttonOpenSidebar.addEventListener('click', openSidebar);
+    }
+
+    const buttonCloseSidebar = document.getElementById('toggle-search-close');
+    if (buttonCloseSidebar) {
+        buttonCloseSidebar.addEventListener('click', closeSidebar);
+    }
+
     if (window.tocbot) {
         window.tocbot.init({
             // Where to render the table of contents.

@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<CustomSearchEngine language="" safesearch="false" autocompletions="false" enable_promotions="false" top_refinements="-1">
+    <Title>Expensify Help Search</Title>
+    <Description>Help Search configuration details</Description>
+    <Context>
+        <BackgroundLabels>
+            <Label name="_include_" mode="FILTER"></Label>
+            <Label name="_exclude_" mode="ELIMINATE"></Label>
+        </BackgroundLabels>
+    </Context>
+    <LookAndFeel element_layout="3" theme="1" enable_cse_thumbnail="false" element_branding="hide" custom_theme="true" font="8">
+        <Colors url="" title="#7BAAF7" visited="#7BAAF7" title_hover="#7BAAF7" title_active="#7BAAF7" text="#FFFFFF" background="#061b09" border="#061b09"></Colors>
+        <Promotions title_color="" title_visited_color="" title_hover_color="" title_active_color="" background_color="" border_color="" url_color="" snippet_color=""></Promotions>
+        <SearchControls input_border_color="#061b09" button_icon_color="#03d47c" button_border_color="#061b09" button_background_color="#061b09" tab_border_color="" tab_background_color="" tab_selected_border_color="" tab_selected_background_color=""></SearchControls>
+        <Results border_color="#061b09" border_hover_color="#061b09" background_color="#061b09" background_hover_color="#061b09"></Results>
+        <Logo url="" destination="" height="30"></Logo>
+        <Widget query_parameter_name="q"></Widget>
+    </LookAndFeel>
+    <ImageSearchSettings enable="false"></ImageSearchSettings>
+    <cse_advance_settings enable_facet_search="false">
+        <web_search_options enable_history="true" show_structured_data="false">
+            <search_restrict_args lr="" cr="" gl="" filter="0" sort="" as_siteseach="" as_oq=""></search_restrict_args>
+        </web_search_options>
+        <image_advanced_options default_to_image_search="false">
+            <search_restrict_args lr="" cr="" gl="" filter="0" sort="" as_siteseach="" as_oq=""></search_restrict_args>
+        </image_advanced_options>
+        <search_options link_target=""></search_options>
+        <custom_search_control_options no_results_string="Upps no results found, Please try again..."></custom_search_control_options>
+    </cse_advance_settings>
+    <sort_by_keys label="Relevance" key=""></sort_by_keys>
+    <sort_by_keys label="Date" key="date"></sort_by_keys>
+    <autocomplete_settings source="1"></autocomplete_settings>
+</CustomSearchEngine>