Merge pull request #1994 from Sefaria/feature/sc-26957/sidebar-with-c…

…reate-a-sheet-and-educational

Feature/sc 26957/sidebar with create a sheet and educational

static/css/s2.css

@@ -7940,6 +7940,24 @@ But not to use a display block directive that might break continuous mode for ot
   --hebrew-font: var(--hebrew-sans-serif-font-family);
   border: none;
 }
+.sheetsHomepage .button {
+  background-color: var(--midrash-green);
+}
+.button.getStartedSheets {
+  width: 111px;
+  height: 39px;
+  padding: 10px 15px 10px 15px;
+  border-radius: 6px;
+  border: 1px solid #CCCCCC;
+  display: block;
+  background-color: white;
+  color: black;
+  font-size: 16px;
+  white-space: nowrap;
+}
+.button.getStartedSheets:hover {
+  color: black;
+}
 .button.disabled{
   border: 1px solid var(--light-grey);
   background-color: var(--lightest-grey);
@@ -13300,8 +13318,6 @@ span.ref-link-color-3 {color: blue}
   }
 }
 
-
-
 @media screen and (min-aspect-ratio: 2/1) {
   .image-in-text {
     max-height: calc(4/3 * 2/3 * 100vw);

static/js/NavSidebar.jsx

@@ -6,6 +6,7 @@ import {NewsletterSignUpForm} from "./NewsletterSignUpForm";
 import {InterfaceText, ProfileListing, Dropdown} from './Misc';
 import { Promotions } from './Promotions'
 import {SignUpModalKind} from "./sefaria/signupModalContent";
+import Button from "./shared/Button";
 
 const NavSidebar = ({modules}) => {
   return <div className="navSidebar sans-serif">
@@ -43,6 +44,8 @@ const Modules = ({type, props}) => {
     "GetTheApp":              GetTheApp,
     "StayConnected":          StayConnected,
     "AboutLearningSchedules": AboutLearningSchedules,
+    "CreateASheet":           CreateASheet,
+    "WhatIsASourceSheet":     WhatIsASourceSheet,
     "AboutTranslatedText":    AboutTranslatedText,
     "AboutCollections":       AboutCollections,
     "ExploreCollections":     ExploreCollections,
@@ -75,14 +78,13 @@ const ModuleTitle = ({children, en, he}) => {
   return <h1>{content}</h1>;
 };
 
-
-const TitledText = ({enTitle, heTitle, enText, heText}) => {
+const TitledText = ({children, title, text}) => {
   return <Module>
-    <ModuleTitle en={enTitle} he={heTitle} />
-    <InterfaceText markdown={{en: enText, he: heText}} />
-  </Module>
+            <ModuleTitle en={title.en} he={title.he}/>
+            <InterfaceText markdown={{en: text.en, he: text.he}} />
+            {children}
+        </Module>
 };
-
 const RecentlyViewedItem = ({oref}) => {
    const trackItem = () => {
      gtag('event', 'recently_viewed', {link_text: oref.ref, link_type: 'ref'})
@@ -666,7 +668,29 @@ const StayConnected = () => { // TODO: remove? looks like we are not using this
   );
 };
 
+const GetStartedButton = () => {
+    const href = Sefaria._v({"en": "/sheets/393695", "he": "/sheets/399333"})
+    return <Button className="getStartedSheets" onClick={() => window.location.href=href}>Get Started</Button>;
+}
+const CreateSheetsButton = () => {
+  // #sheetsButton
+  return <Button icon={"/static/icons/new-sheet-black.svg"} className="small" onClick={() => window.location.href="/sheets/new"}>Create</Button>
+}
+const CreateASheet = () => (
+  <TitledText title={{'en': 'Create A Sheet', 'he': ''}}
+              text={{'en': 'Mix and match sources along with outside sources, comments, images, and videos.',
+                     'he': ''}}>
+      <CreateSheetsButton/>
+  </TitledText>
+);
 
+const WhatIsASourceSheet = () => (
+    <TitledText title={{'en': 'What is a Source Sheet?', 'he': ''}}
+                text={{'en': '',
+                       'he': ''}}>
+        <GetStartedButton/>
+    </TitledText>
+);
 const AboutLearningSchedules = () => (
   <Module>
     <ModuleTitle>Learning Schedules</ModuleTitle>

static/js/ReaderPanel.jsx

@@ -44,7 +44,7 @@ import {
 import {ContentText} from "./ContentText";
 import SheetsWithRefPage from "./sheets/SheetsWithRefPage";
 import {ElasticSearchQuerier} from "./ElasticSearchQuerier";
-import SheetsHomePage from "./sheets/SheetsHomePage";
+import {SheetsHomePage} from "./sheets/SheetsHomePage";
 
 
 class ReaderPanel extends Component {

static/js/shared/Button.jsx

@@ -0,0 +1,13 @@
+const Button = ({ variant = 'primary', icon, children, onClick, className = '' }) => {
+  return (
+    <button
+      className={`button ${variant} ${className}`}
+      onClick={onClick}
+    >
+      {icon && <img src={icon} className="button-icon" />}
+      {children}
+    </button>
+  );
+};
+
+export default Button;

static/js/shared/Card.jsx

@@ -1,6 +1,5 @@
 import {InterfaceText} from "../Misc";
 import React from "react";
-
 const Card = ({cardTitle, cardTitleHref, oncardTitleClick, cardText}) => {
     return <div className="card">
                 <a href={cardTitleHref} className="cardTitle" onClick={oncardTitleClick}>

static/js/sheets/SheetsHomePage.jsx

@@ -1,5 +1,4 @@
 import React  from 'react';
-import {InterfaceText, ResponsiveNBox} from "../Misc";
 import {NavSidebar} from "../NavSidebar";
 import Footer from "../Footer";
 
@@ -21,8 +20,18 @@ const SheetsHeroBanner = ({title, message, videoOptions, posterImg}) => {
         </div>;
 }
 
+const SheetsSidebar = () => {
+    const sidebarModules = [
+    {type: "CreateASheet"},
+    {type: "WhatIsASourceSheet"},
+  ];
+    return <NavSidebar modules={sidebarModules} />
+}
+
+
+
 const SheetsHomePage = () => {
-  return <div className="readerNavMenu" key="0">
+  return <div className="readerNavMenu sheetsHomepage" key="0">
             <div className="content">
                 <SheetsHeroBanner title="Join the Torah Conversation"
                                   message="Create, share, and discover source sheets."
@@ -31,10 +40,11 @@ const SheetsHomePage = () => {
                 />
                 <div className="sidebarLayout">
                     <div className="contentInner">
+                        <SheetsSidebar/>
                     </div>
                 </div>
                 <Footer/>
             </div>
         </div>
 }
-export default SheetsHomePage;
+export { SheetsHomePage };