fix header urls

eea · Feb 28, 2022 · e590891 · e590891
1 parent 81973ca
commit e590891
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 12 deletions.
diff --git a/src/ui/Header/Header.jsx b/src/ui/Header/Header.jsx
@@ -271,10 +271,10 @@ class Header extends Component {
                   <Menu className="eea-main-menu tablet or lower hidden" text>
                     {this.props.menuItems.map((item) => (
                       <Menu.Item
-                        name={item['@id']}
+                        name={item['@id'] || item.url}
                         onClick={this.menuOnClick}
                         active={this.state.activeItem === item.key}
-                        key={item['@id']}
+                        key={item['@id'] || item.url}
                       >
                         {item.title}
                       </Menu.Item>

diff --git a/src/ui/Header/HeaderMenuPopUp.js b/src/ui/Header/HeaderMenuPopUp.js
@@ -9,42 +9,56 @@ function HeaderMenuPopUp({ menuItems }) {
           <ul className="menu">
             {menuItems.map((item) => (
               //first tier
-              <li key={item['@id']}>
+              <li key={item['@id'] || item.url}>
                 {item.items.length > 0 && (
-                  <label htmlFor={`drop-${item['@id']}`} className="toggle">
+                  <label
+                    htmlFor={`drop-${item['@id'] || item.url}`}
+                    className="toggle"
+                  >
                     {item.title}
                   </label>
                 )}
-                <a href="/#">{item.title}</a>
+                <a href={item['@id'] || item.url}>{item.title}</a>
                 {item.items.length > 0 && (
-                  <input type="checkbox" id={`drop-${item['@id']}`} />
+                  <input
+                    type="checkbox"
+                    id={`drop-${item['@id'] || item.url}`}
+                  />
                 )}
                 {item.items.length > 0 && (
                   //second tier
                   <ul className="sub second">
                     {item.items.map((section) => (
-                      <li key={section['@id']}>
+                      <li key={section['@id'] || section.url}>
                         {section.items.length > 0 && (
                           <label
-                            htmlFor={`drop-${item['@id']}-${section['@id']}`}
+                            htmlFor={`drop-${item['@id'] || item.url}-${
+                              section['@id'] || section.url
+                            }`}
                             className="toggle"
                           >
                             {section.title}
                           </label>
                         )}
-                        <a href="/#">{section.title}</a>
+                        <a href={section['@id'] || section.url}>
+                          {section.title}
+                        </a>
                         {section.items.length > 0 && (
                           <input
                             type="checkbox"
-                            id={`drop-${item['@id']}-${section['@id']}`}
+                            id={`drop-${item['@id'] || item.url}-${
+                              section['@id'] || section.url
+                            }`}
                           ></input>
                         )}
                         {section.items.length > 0 && (
                           //third tier
                           <ul className="sub third">
                             {section.items.map((page) => (
-                              <li key={page['@id']}>
-                                <a href="/#">{page.title}</a>
+                              <li key={page['@id'] || page.url}>
+                                <a href={page['@id'] || page.url}>
+                                  {page.title}
+                                </a>
                               </li>
                             ))}
                           </ul>