Show document and folder content-type in Navigation listing

eea · Dec 22, 2022 · 8471db3 · 8471db3
1 parent a27a6b7
commit 8471db3
Showing 1 changed file with 62 additions and 49 deletions.
diff --git a/src/ui/ContextNavigation/ContextNavigation.stories.jsx b/src/ui/ContextNavigation/ContextNavigation.stories.jsx
@@ -111,6 +111,14 @@ const sidenavItems = [
     url: '/#',
     is_in_path: true,
   },
+  {
+    '@id': 'About',
+    review_state: null,
+    title: 'About',
+    items: [],
+    url: '/#',
+    is_in_path: true,
+  },
 ];
 
 function Template({ ...args }) {
@@ -135,63 +143,68 @@ function Template({ ...args }) {
                   <div className="content">
                     <a
                       title={element.title}
-                      className="contenttype-folder"
+                      className={
+                        element?.items?.length > 0
+                          ? 'contenttype-folder'
+                          : 'contenttype-document'
+                      }
                       href={element.url}
                     >
                       {element.title}
                     </a>
-                    {element.items.length > 0 &&
-                      element.items.map((subelement, index) => {
-                        return (
-                          <div className="list" role="list">
-                            <div
-                              role="listitem"
-                              className={
-                                (subelement.is_current ? 'active ' : '') +
-                                (subelement.is_in_path ? 'in_path ' : '') +
-                                'item level-2'
-                              }
-                            >
-                              <div className="content">
-                                <a
-                                  title={subelement.title}
-                                  className="contenttype-document"
-                                  href={subelement.url}
-                                >
-                                  {subelement.title}
-                                </a>
-                                {subelement.items.length > 0 &&
-                                  subelement.items.map(
-                                    (subparelement, index) => {
-                                      return (
-                                        <div className="list" role="list">
-                                          <div
-                                            role="listitem"
-                                            className={
-                                              (subparelement.is_current
-                                                ? 'active '
-                                                : '') + 'item level-3'
-                                            }
-                                          >
-                                            <div className="content">
-                                              <a
-                                                title={subparelement.title}
-                                                className="contenttype-document"
-                                                href={subparelement.url}
-                                              >
-                                                {subparelement.title}
-                                              </a>
+                    {element?.items?.length > 0
+                      ? element.items.map((subelement, index) => {
+                          return (
+                            <div className="list" role="list">
+                              <div
+                                role="listitem"
+                                className={
+                                  (subelement.is_current ? 'active ' : '') +
+                                  (subelement.is_in_path ? 'in_path ' : '') +
+                                  'item level-2'
+                                }
+                              >
+                                <div className="content">
+                                  <a
+                                    title={subelement.title}
+                                    className="contenttype-document"
+                                    href={subelement.url}
+                                  >
+                                    {subelement.title}
+                                  </a>
+                                  {subelement?.items?.length > 0 &&
+                                    subelement.items.map(
+                                      (subparelement, index) => {
+                                        return (
+                                          <div className="list" role="list">
+                                            <div
+                                              role="listitem"
+                                              className={
+                                                (subparelement.is_current
+                                                  ? 'active '
+                                                  : '') + 'item level-3'
+                                              }
+                                            >
+                                              <div className="content">
+                                                <a
+                                                  title={subparelement.title}
+                                                  className="contenttype-document"
+                                                  href={subparelement.url}
+                                                >
+                                                  {subparelement.title}
+                                                </a>
+                                              </div>
                                             </div>
                                           </div>
-                                        </div>
-                                      );
-                                    },
-                                  )}
+                                        );
+                                      },
+                                    )}
+                                </div>
                               </div>
                             </div>
-                          </div>
-                        );
-                      })}
+                          );
+                        })
+                      : null}
                   </div>
                 </div>
               );