Merge pull request #2000 from Sefaria/feature/sc-27511/library-add-us…

…er-drop-down-for-logged-out User Dropdown for Logged out Library
Sefaria · Sep 25, 2024 · 76632ba · 76632ba
2 parents e75e417 + f7725dd
commit 76632ba
Show file tree

Hide file tree

Showing 4 changed files with 119 additions and 22 deletions.
diff --git a/static/css/s2.css b/static/css/s2.css
@@ -13355,8 +13355,9 @@ span.ref-link-color-3 {color: blue}
 }
 
 .dropdownItem {
-  padding: 10px 0px 5px 10px !important;
+  padding: 10px 5px !important;
   flex-direction: column;
+  margin-inline-start: 5px;
 }
 
 .dropdownSeparator {
@@ -13653,6 +13654,38 @@ span.ref-link-color-3 {color: blue}
   color: #666666;
 }
 
+.languageHeader {
+  padding-right: 10px;
+  padding-left: 10px;
+  padding-top: 4px;
+  padding-bottom: 2px;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 18px;
+  text-align: left;
+  color: var(--medium-grey);
+
+}
+
+.languageToggleFlexContainer{
+  display: flex;
+  flex-direction: row;
+  /* padding: 10px 0px; */
+  align-items: baseline;
+  line-height: 18px;
+  height: 23px;
+  padding-bottom: 15px;
+}
+
+.languageDot{
+  font-size: 25px;
+  padding: 10px 2px;
+}
+
+.englishLanguageButton::after {
+  content: "•";
+  padding: 0px 4px;
+}
 
 @-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)}

diff --git a/static/icons/logged_out.svg b/static/icons/logged_out.svg
diff --git a/static/js/Header.jsx b/static/js/Header.jsx
@@ -18,22 +18,79 @@ import {Autocomplete} from './Autocomplete'
 import { DropdownMenu, DropdownMenuSeparator, DropdownMenuItem, DropdownMenuItemWithIcon } from './common/DropdownMenu';
 
 
+const LoggedOutMenu = () => {
+  const [isClient, setIsClient] = useState(false);
+  const [next, setNext] = useState("/");
+  const [loginLink, setLoginLink] = useState("/login?next=/");
+  const [registerLink, setRegisterLink] = useState("/register?next=/");
+
+  useEffect(()=>{
+    setIsClient(true);
+  }, []);
+
+  useEffect(()=> {
+    if(isClient){
+      setNext(encodeURIComponent(Sefaria.util.currentPath()));
+      setLoginLink("/login?next="+next);
+      setRegisterLink("/register?next="+next);
+    }
+  })
+
+  const getCurrentPage = () => {
+    return encodeURIComponent(Sefaria.util.currentPath());
+  }
+  return (
+    <DropdownMenu menu_icon={'/static/icons/logged_out.svg'}>
+      <DropdownMenuItem url={loginLink}>
+        Log in
+      </DropdownMenuItem>
+      <DropdownMenuItem url={registerLink}>
+        Sign up
+      </DropdownMenuItem>
+      <DropdownMenuSeparator />
+      <div className="languageHeader">
+          <InterfaceText>Site Language</InterfaceText>
+      </div>
+      <div className='languageToggleFlexContainer'>
+        <span className='englishLanguageButton'>
+          <DropdownMenuItem url={`/interface/english?next=${getCurrentPage()}`}>
+            English
+          </DropdownMenuItem>
+        </span>
+        <DropdownMenuItem url={`/interface/hebrew?next=${getCurrentPage()}`}>
+        עברית    
+        </DropdownMenuItem>
+
+      </div>
+      <DropdownMenuSeparator />
+      <DropdownMenuItem url={'/updates'}>
+        New additions
+      </DropdownMenuItem>
+      <DropdownMenuItem url={'/help'}>
+        Help
+      </DropdownMenuItem>
+
+  </DropdownMenu>
+  );
+}
+
+
 const ModuleSwitcher = () => {
   return (
-    <DropdownMenu>
-    <DropdownMenuItem url={'/'}>
+    <DropdownMenu menu_icon={'/static/icons/module_switcher_icon.svg'}>
+    <DropdownMenuItem url={'/'} newTab={true}>
       <DropdownMenuItemWithIcon icon={'/static/icons/library_icon.svg'} textEn={'Library'} textHe={'ספריה'} />
     </DropdownMenuItem>
     <DropdownMenuSeparator />
-    <DropdownMenuItem url={'//sheets.sefaria.org'}>
+    <DropdownMenuItem url={'//sheets.sefaria.org'} newTab={true}>
       <DropdownMenuItemWithIcon icon={'/static/icons/sheets_icon.svg'} textEn={'Sheets'} textHe={'דפים'}/>
     </DropdownMenuItem>
     <DropdownMenuSeparator />
-    <DropdownMenuItem url={'//developers.sefaria.org'}>
+    <DropdownMenuItem url={'//developers.sefaria.org'} newTab={true}>
       <DropdownMenuItemWithIcon icon={'/static/icons/developers_icon.svg'} textEn={'Developers'} textHe={'מפתחים'}/>
     </DropdownMenuItem>
     <DropdownMenuSeparator />
-    <DropdownMenuItem url={'//sefaria.org/products'}>
+    <DropdownMenuItem url={'//sefaria.org/products'} newTab={true}>
       <InterfaceText text={{'he':'לכל המוצרים שלנו', 'en': 'See all products ›'}} />
     </DropdownMenuItem>
 
@@ -87,21 +144,20 @@ class Header extends Component {
             openURL={this.props.openURL}
         />
 
-
-          { Sefaria._uid ?
-            <LoggedInButtons headerMode={this.props.headerMode}/>
-            : <LoggedOutButtons headerMode={this.props.headerMode}/>
-          }
-
-          { !Sefaria._uid && Sefaria._siteSettings.TORAH_SPECIFIC ?
-          <ModuleSwitcher /> : null}
-
           { !Sefaria._uid && Sefaria._siteSettings.TORAH_SPECIFIC ?
               <InterfaceLanguageMenu
                 currentLang={Sefaria.interfaceLang}
                 translationLanguagePreference={this.props.translationLanguagePreference}
                 setTranslationLanguagePreference={this.props.setTranslationLanguagePreference} /> : null}
-
+
+
+          <ModuleSwitcher /> 
+
+          { Sefaria._uid ?
+            <LoggedInButtons headerMode={this.props.headerMode}/>
+            : <LoggedOutMenu currentLang={Sefaria.interfaceLang}/>
+          }
+
         </div>
       </>
     );

diff --git a/static/js/common/DropdownMenu.jsx b/static/js/common/DropdownMenu.jsx
@@ -14,10 +14,15 @@ const DropdownMenuSeparator = () => {
 
 }
 
-const DropdownMenuItem = ({url, children}) => {
+const DropdownMenuItem = ({url, children, newTab}) => {
+
+  if (!newTab){
+    newTab = false;
+  }
+
   return (
 
-    <a className={`interfaceLinks-option int-bi dropdownItem`} href={url} target="_blank">
+    <a className={`interfaceLinks-option int-bi dropdownItem`} href={url} target={newTab ? '_blank' : null}>
       {children}
     </a>
 
@@ -40,7 +45,7 @@ const DropdownMenuItemWithIcon = ({icon, textEn, textHe}) => {
   );
 }
 
-const DropdownMenu = ({children}) => {
+const DropdownMenu = ({children, menu_icon}) => {
     const [isOpen, setIsOpen] = useState(false);
     const wrapperRef = useRef(null);
 
@@ -73,7 +78,7 @@ const DropdownMenu = ({children}) => {
 
     return (
         <div className="dropdownLinks" ref={wrapperRef}>
-          <a className="dropdownLinks-button" onClick={handleClick}><img src="/static/icons/module_switcher_icon.svg" alt={Sefaria._('Toggle Module Switcher')}/></a>
+          <a className="dropdownLinks-button" onClick={handleClick}><img src={menu_icon} alt={Sefaria._('Dropdown menu')}/></a>
           <div className={`dropdownLinks-menu ${ isOpen ? "open" : "closed"}`}>
             <div className="dropdownLinks-options">
               {children}
@@ -87,6 +92,6 @@ const DropdownMenu = ({children}) => {
   export {
     DropdownMenu, 
     DropdownMenuSeparator, 
-    DropdownMenuItem,
-    DropdownMenuItemWithIcon
+    DropdownMenuItemWithIcon,
+    DropdownMenuItem
   };