Merge pull request #2243 from Sefaria/feature/sc-30176/create-topicca…

…tlist Add Topic Category List and A-Z Topics Link to Sidebar
Sefaria · Jan 14, 2025 · e73cadd · e73cadd
2 parents bbd409a + 8f847fc
commit e73cadd
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 1 deletion.
diff --git a/static/css/s2.css b/static/css/s2.css
@@ -4954,6 +4954,11 @@ h1.topic-landing-header {
 .topic-landing-search-suggestion.highlighted{
   background-color: #EDEDEC;
 }
+.topic-landing-sidebar-list{
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 20px
+}
 
 .topic-landing-search-dropdown{
   background: #FFFFFF;

diff --git a/static/js/NavSidebar.jsx b/static/js/NavSidebar.jsx
@@ -37,6 +37,8 @@ const SidebarModules = ({type, props}) => {
     "AboutTopics":            AboutTopics,
     "TrendingTopics":         TrendingTopics,
     "TopicLandingTrendingTopics": TopicLandingTrendingTopics,
+    "TopicLandingTopicCatList":  TopicLandingTopicCatList,
+    "AZTopicsLink":           AZTopicsLink,
     "RelatedTopics":          RelatedTopics,
     "TitledText":             TitledText,
     "Visualizations":         Visualizations,
@@ -619,6 +621,7 @@ const TopicLandingTrendingTopics = () => {
     <div data-anl-feature_name="Trending" data-anl-link_type="topic">
         <SidebarModule>
             <SidebarModuleTitle>Trending Topics</SidebarModuleTitle>
+            <div className="topic-landing-sidebar-list">
             {trendingTopics.map((topic, i) =>
                 <div className="navSidebarLink ref serif" key={i}>
                     <a
@@ -630,9 +633,34 @@ const TopicLandingTrendingTopics = () => {
                     </a>
                 </div>
             )}
+            </div>
         </SidebarModule>
     </div>)
 };
+const TopicLandingTopicCatList = () => {
+    const topicCats = Sefaria.topicTocPage();
+    return(
+        <SidebarModule>
+            <SidebarModuleTitle>Browse Topics</SidebarModuleTitle>
+            <div className="topic-landing-sidebar-list">
+                {topicCats.map((topic, i) =>
+                    <div className="navSidebarLink ref serif" key={i}>
+                        <a href={"/topics/category/" + topic.slug}><InterfaceText text={{en: topic.en, he: topic.he}}/></a>
+                    </div>
+                )}
+            </div>
+        </SidebarModule>
+    )
+};
+const AZTopicsLink = () => {
+    return (
+        <SidebarModule>
+            <a href={'/topics/all/a'}>
+            <SidebarModuleTitle>All Topics A-Z ›</SidebarModuleTitle>
+            </a>
+        </SidebarModule>
+    )
+};
 
 
 const RelatedTopics = ({title}) => {

diff --git a/static/js/TopicLandingPage/TopicsLandingPage.jsx b/static/js/TopicLandingPage/TopicsLandingPage.jsx
@@ -13,7 +13,9 @@ import Sefaria from "../sefaria/sefaria";
 
 export const TopicsLandingPage = ({openTopic}) => {
     const sidebarModules = [
-        {type: "TopicLandingTrendingTopics"}
+        {type: "TopicLandingTopicCatList"},
+        {type: "TopicLandingTrendingTopics"},
+        {type: "AZTopicsLink"},
     ];
     return (
         <div className="readerNavMenu" key="0">