loads script for alternate sidebar

.flowconfig

@@ -26,6 +26,6 @@ module.name_mapper='^analytics\(.*\)$' -> '<PROJECT_ROOT>/ui/analytics\1'
 module.name_mapper='^i18n\(.*\)$' -> '<PROJECT_ROOT>/ui/i18n\1'
 module.name_mapper='^effects\(.*\)$' -> '<PROJECT_ROOT>/ui/effects\1'
 module.name_mapper='^config\(.*\)$' -> '<PROJECT_ROOT>/config\1'
-
+module.name_mapper='^lbrytv\/component\(.*\)$' -> '<PROJECT_ROOT>/lbrytv/component\1'
 
 [strict]

lbrytv/component/ad/index.jsx

@@ -0,0 +1,33 @@
+import React, { useEffect } from 'react';
+
+function Extra(props) {
+  const url = '//assets.revcontent.com/master/delivery.js';
+
+  useEffect(() => {
+    const script = document.createElement('script');
+
+    script.src = url;
+    script.async = true;
+
+    document.body.appendChild(script);
+
+    return () => {
+      document.body.removeChild(script);
+      // if user navigates too rapidly, <style> tags can build up
+      if (document.body.getElementsByTagName('style').length) {
+          document.body.getElementsByTagName('style')[0].remove();
+      }
+    };
+  }, []);
+
+  return (
+    <>
+      <div><p>Ads</p></div>
+      <div>
+      <div id="rc-widget-0a74cf" data-rc-widget data-widget-host="habitat" data-endpoint="//trends.revcontent.com" data-widget-id="117427" />
+      </div>
+    </>
+  );
+};
+
+export default Extra;

ui/component/sideNavigation/view.jsx

@@ -8,6 +8,7 @@ import Tag from 'component/tag';
 import StickyBox from 'react-sticky-box/dist/esnext';
 import Spinner from 'component/spinner';
 import usePersistedState from 'effects/use-persisted-state';
+import Ad from 'lbrytv/component/ad';
 
 const SHOW_CHANNELS = 'SHOW_CHANNELS';
 const SHOW_TAGS = 'SHOW_TAGS';
@@ -84,11 +85,8 @@ function SideNavigation(props: Props) {
 
   return obscureSideNavigation ? (
     <Wrapper>
-      <div className="card navigation--placeholder">
+      <div className="navigation--placeholder">
-        <div className="wrap">
+        <Ad />
-          <h2>LBRY</h2>
-          <p>{__('The best decentralized content platform on the web.')}</p>
-        </div>
       </div>
     </Wrapper>
   ) : (

ui/scss/component/_navigation.scss

@@ -15,20 +15,15 @@
 
 .navigation--placeholder {
   @extend .navigation;
-  padding: 2rem 1.5rem;
+  padding: var(--spacing-quarter) 0rem;
   border-radius: var(--card-radius);
-  font-weight: var(--font-weight-bold);
-  color: #fff;
   position: relative;
-  background-color: black;
+  margin: auto;
-
-  h2 {
-    font-size: 2rem;
-    font-weight: var(--font-weight-bold);
-  }
 
   p {
-    font-size: 1.2rem;
+    font-size: var(--font-xsmall);
+    color: var(--color-text-subtitle);
+    padding: var(--spacing-quarter);
   }
 }
 

ui/scss/init/_vars.scss

@@ -11,6 +11,7 @@ $breakpoint-small: 900px;
   --mac-titlebar-height: 1.5rem;
   --mobile: 600px;
   --side-nav-width: 170px;
+  --spacing-quarter: calc(1rem / 4);
   --spacing-miniscule: calc(2rem / 5);
   --spacing-xsmall: calc(2rem / 4);
   --spacing-small: calc(2rem / 3);