[UI] Some navbar items are missing in moblie screen

[amitamrutiya]

Description

Link: HomePage I noticed that on the homepage when switching to mobile view, some navbar items are not appearing:

• Pricing
• News
• Recent Announcement
• Discussion Forum

These items are not displayed in mobile view, making it impossible to navigate to these pages via the navbar.

Expected Behavior

The displayed items are the same for both mobile and desktop views.

Screenshots

Environment:

• Host OS: Linux
• Browser: Firefox

If you find this issue valid I want to work on this.

---

Contributor Resources and Handbook

The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the master branch.

• 📚 See contributing instructions.
• 🎨 Wireframes and designs for Layer5 site in Figma (open invite)
• 🙋🏾🙋🏼 Questions: Discussion Forum and Community Slack.

Join the Layer5 Community by submitting your community member form.

[fakegithub01]

@narasimha-1511 I would like to work on this issue .Could you please assign this issue to me ?

[ashparshp]

Thank you, @amitamrutiya and @fakegithub01. However, @upsaurav12 is already working on the navbar, so let's hear his thoughts on this.

[upsaurav12]

@Ashparshp @amitamrutiya @fakegithub01 Sorry for late response, Yes i also think that pricing discussion-forum news should be present in mobile-nav. but if we notice then we can see that these are the special links ( ie these are represented with arrows-icon) So, we should make these link similar with desktop-view.

[amitamrutiya]

Yeah @upsaurav12, you're right, these are special links. Do you have any other solutions you want to propose without converting them into normal links?

[Jaishree2310]

@vishalvivekm Is this issue still pending or completed? If it require to complete still then please assign this to me. Thanks!

[rohansen856]

@vishalvivekm @amitamrutiya I would like to work on this issue. As the links are mentioned as special links they should be added to the mobile nav under the Solutions, Products, Community and Resources section in same manner as in the Desktop nav. The special links are already present in the /src/sections/General/Navigation/utility/menu-items.js file in actionItems array. The actionItems are not utilized in the src/sections/General/Navigation/index.js file which cause the links to be not present in the mobile view.

• The current code of the mobile nav looks like this:

            <div className="mobile-dropdown-container" ref={dropDownRef}>
              <div className="mobile-dropdown">
                <ul className="mobile-collapsed">
                  {Data.menuItems.map((menu, index) => (
                    <li
                      key={index}
                      className={
                        menu.subItems !== undefined
                          ? "mobile-nav-item has-dropdown"
                          : "mobile-nav-item"
                      }
                    >
                      <Link
                        to={menu.path}
                        onClick={changeDropdownState}
                        className="menu-item"
                        activeClassName="nav-link-active"
                      >
                        {menu.name}
                      </Link>
                      <ul>
                        {menu.subItems !== undefined &&
                          menu.subItems.map((subItems, index) => {
                            return (
                              <li key={index} className="mobile-nav-subitem">
                                {subItems.externalLink ? (
                                  <a
                                    href={subItems.path}
                                    target="_blank"
                                    onClick={() => {
                                      changeDropdownState();
                                      closeDropDown();
                                    }}
                                    className="mobile-sub-menu-item"
                                    rel="noreferrer"
                                  >
                                    {subItems.name}
                                  </a>
                                ) : (
                                  <Link
                                    to={subItems.path}
                                    onClick={() => {
                                      changeDropdownState();
                                      closeDropDown();
                                    }}
                                    className="mobile-sub-menu-item"
                                    activeClassName="nav-link-active"
                                  >
                                    {subItems.name}
                                  </Link>
                                )}
                              </li>
                            );
                          })}
                      </ul>
                    </li>
                  ))}
                </ul>
                {!userData && (
                  <div>
                    <ul>
                      <li>
                        <Button
                          id="get-started"
                          $secondary
                          className="banner-btn two"
                          title="Get Started"
                          $url="https://cloud.layer5.io/login"
                          $external={true}
                        />
                      </li>
                    </ul>
                  </div>
                )}
                <div>
                  <ul>
                    <li className="mobile-nav-item">
                      {/* <a href="https://calendar.google.com/calendar/appointments/schedules/AcZssZ3pmcApaDP4xd8hvG5fy8ylxuFxD3akIRc5vpWJ60q-HemQi80SFFAVftbiIsq9pgiA2o8yvU56?gv=true" className="menu-item">Book Demo</a> */}
                      <a href="https://play.meshery.io" className="menu-item">
                        Playground
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>

• I plan on Adding the special links in each section like this (reference from src/sections/General/Navigation/utility/ScrollspyMenu.js file):

                 {manu.actionItems.map((actionItem, i) => (
                    (actionItem.actionName === "Join the discussion" ?
                      <a key={i} href={actionItem.actionLink} target="_blank" className="action-link" rel="noreferrer">
                        <span className="readmore-btn">
                          {actionItem.actionName} <IoIosArrowRoundForward />
                        </span>
                      </a>
                      : (<Link key={i} to={actionItem.actionLink} partiallyActive={true} className="action-link">
                        <span className="readmore-btn">
                          {actionItem.actionName} <IoIosArrowRoundForward />
                        </span>
                      </Link>
                      )
                    )
                  ))}

If it's open for contribution I would like to take up this issue. Thanks.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.