Module switcher

static/css/s2.css

@@ -844,13 +844,15 @@ div:has(#bannerMessage) + .readerApp.singlePanel .mobileNavMenu {
 .interface-english .header .interfaceLinks .interfaceLinks-menu .interfaceLinks-header {
   font-family: "Roboto", "Helvetica Neue", Helvetica, sans-serif;
 }
-.interface-hebrew .header .interfaceLinks .interfaceLinks-menu .interfaceLinks-header {
+.interface-hebrew .header .interfaceLinks .interfaceLinks-menu .interfaceLinks-header {∫
   font-family: "Heebo", sans-serif;
 }
+
 .interfaceLinks-options {
   display: flex;
   flex-direction: column;
-  padding: 4px 0;
+  padding: 4px;
+  max-width: 220px;
 }
 .header .interfaceLinks .interfaceLinks-option {
   display: flex;
@@ -859,7 +861,6 @@ div:has(#bannerMessage) + .readerApp.singlePanel .mobileNavMenu {
   font-weight: normal;
   font-size: 16px;
   line-height: 23px;
-  text-align: right;
   color: #666666;
   padding: 5px;
   direction: ltr;
@@ -13144,6 +13145,40 @@ span.ref-link-color-3 {color: blue}
     width: 67%;
   }
 }
+
+.dropdownHeader {
+  margin-bottom: 10px;
+  font-family: Roboto;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 18.75px;
+  color: var(--selected-option);
+
+}
+
+.dropdownHeaderText {
+  padding-left: 10px;
+}
+
+.dropdownDesc {
+  font-family: Roboto;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 18px;
+  padding-left: 30px;
+  padding-bottom: 10px;
+  padding-right: 10px;
+}
+
+.dropdownItem {
+  padding: 10px 0px 5px 10px !important;
+  flex-direction: column;
+}
+
+.dropdownSeparator {
+  border: 1px solid var(--light-grey);
+}
+
 .image-in-text-title {
     margin: auto; /* English System Small */
     margin-top: 15px;
@@ -13154,6 +13189,7 @@ span.ref-link-color-3 {color: blue}
     font-size: 14px;
     line-height: 18px;
     color: #666666;
+}
 
 @-webkit-keyframes load5 {
 0%,100%{box-shadow:0 -2.6em 0 0 #ffffff,1.8em -1.8em 0 0 rgba(0,0,0,0.2),2.5em 0 0 0 rgba(0,0,0,0.2),1.75em 1.75em 0 0 rgba(0,0,0,0.2),0 2.5em 0 0 rgba(0,0,0,0.2),-1.8em 1.8em 0 0 rgba(0,0,0,0.2),-2.6em 0 0 0 rgba(0,0,0,0.5),-1.8em -1.8em 0 0 rgba(0,0,0,0.7)}

static/js/Header.jsx

@@ -15,6 +15,7 @@ import {
   DonateLink
 } from './Misc';
 import {Autocomplete} from './Autocomplete'
+import { DropdownMenu, DropdownMenuSeparator, DropdownMenuItem, DropdownMenuItemWithIcon } from './common/DropdownMenu';
 
 class Header extends Component {
   constructor(props) {
@@ -68,11 +69,33 @@ class Header extends Component {
             <LoggedInButtons headerMode={this.props.headerMode}/>
             : <LoggedOutButtons headerMode={this.props.headerMode}/>
           }
+
+          { !Sefaria._uid && Sefaria._siteSettings.TORAH_SPECIFIC ?
+              <DropdownMenu>
+                <DropdownMenuItem url={'/'}>
+                  <DropdownMenuItemWithIcon icon={'/static/icons/library_icon.svg'} textEn={'Library'} textHe={'ספריה'} />
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem url={'//sheets.sefaria.org'}>
+                  <DropdownMenuItemWithIcon icon={'/static/icons/sheets_icon.svg'} textEn={'Sheets'} textHe={'דפים'}/>
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem url={'//developers.sefaria.org'}>
+                  <DropdownMenuItemWithIcon icon={'/static/icons/developers_icon.svg'} textEn={'Developers'} textHe={'מפתחים'}/>
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem url={'//sefaria.org/products'}>
+                  <InterfaceText text={{'he':'לכל המוצרים שלנו', 'en': 'See all products >'}} />
+                </DropdownMenuItem>
+
+              </DropdownMenu> : null}
+
           { !Sefaria._uid && Sefaria._siteSettings.TORAH_SPECIFIC ?
               <InterfaceLanguageMenu
                 currentLang={Sefaria.interfaceLang}
                 translationLanguagePreference={this.props.translationLanguagePreference}
                 setTranslationLanguagePreference={this.props.setTranslationLanguagePreference} /> : null}
+
         </div>
       </>
     );

static/js/common/DropdownMenu.jsx

@@ -0,0 +1,92 @@
+import React, {useContext, useEffect, useRef, useState} from 'react';
+import { InterfaceText } from '../Misc';
+
+
+// Todo
+// Fix the styling on the 'dropdown item' (regular one)
+// Restore the header to also show the globe icon
+
+const DropdownMenuSeparator = () => {
+
+  return (
+    <div className='dropdownSeparator'></div>
+  );
+
+}
+
+const DropdownMenuItem = ({url, children}) => {
+  return (
+
+    <a className={`interfaceLinks-option int-bi int-en dropdownItem`} href={url} target="_blank">
+      {children}
+    </a>
+
+  );
+}
+
+const DropdownMenuItemWithIcon = ({icon, textEn, textHe}) => {
+  return (
+    <>
+      <div className="dropdownHeader">
+        <img src={icon} />
+        <span className='dropdownHeaderText'>
+          <InterfaceText text={{'en': textEn, 'he': textHe}} />
+        </span>
+      </div>
+      <div className='dropdownDesc'>
+        <InterfaceText text={{'en': 'Lorem ipsum dolor sit amet, lorem dolor.', 'he': 'לורם איפסום דולור סיט אמט'}} />     
+      </div>
+  </>
+  );
+}
+
+const DropdownMenu = ({children}) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const wrapperRef = useRef(null);
+
+    const handleClick = (e) => {
+      e.stopPropagation();
+      setIsOpen(isOpen => !isOpen);
+    }
+    const handleHideDropdown = (event) => {
+        if (event.key === 'Escape') {
+            setIsOpen(false);
+        }
+    };
+    const handleClickOutside = (event) => {
+        if (
+            wrapperRef.current &&
+            !wrapperRef.current.contains(event.target)
+        ) {
+            setIsOpen(false);
+        }
+    };
+
+    useEffect(() => {
+        document.addEventListener('keydown', handleHideDropdown, true);
+        document.addEventListener('click', handleClickOutside, true);
+        return () => {
+            document.removeEventListener('keydown', handleHideDropdown, true);
+            document.removeEventListener('click', handleClickOutside, true);
+        };
+    }, []);
+
+    return (
+        <div className="interfaceLinks" ref={wrapperRef}>
+          <a className="interfaceLinks-button" onClick={handleClick}><img src="/static/icons/module_switcher_icon.svg" alt={Sefaria._('Toggle Module Switcher')}/></a>
+          <div className={`interfaceLinks-menu ${ isOpen ? "open" : "closed"}`}>
+            <div className="interfaceLinks-options">
+              {children}
+            </div>
+          </div>
+        </div>
+    );
+  }
+
+
+  export {
+    DropdownMenu, 
+    DropdownMenuSeparator, 
+    DropdownMenuItem,
+    DropdownMenuItemWithIcon
+  };