Reactjs: Submenu component, setNavigation - help
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

This sub-menu has 7 options.

When I built this sub-menu I did not know how to set the state 'current' of the menu to the current sub-menu page being displayed using the current: 'true' or 'false' parameter.

So I replicated the sub-menu component 7 times and put a unique sub-menu into each of the 7 page. On each page I just changed the current: true/false parameter.

Are you able to help?
I only want one submenu .

Screenshot: https://www.dropbox.com/s/hmlbjyb5p53gll0/Screen%20Shot%202021-11-01%20at%202.42.29%20PM.png?dl=0

Code

https://www.dropbox.com/sh/hhdhvzbfaw3cvna/AACl1RhpcArALrbRt8__4yYda?dl=0

By the way, this is also a way to get rid of several submenu components for different languages. Just like this: add the 'lang' to the component's props (<Sunmenu lang="..." ... />), alter the 'tags' to make items have several names for different languages, etc.
GFalcon 1 month ago
awarded to GFalcon

Crowdsource coding tasks.

1 Solution

Winning solution

Here is the solution that comes to the head first:

1) Remove the current element from all tabs

2) Add props parameter to Submenu function

3) Replace defaultValue={tabs.find((tab) => tab.current).name} with defaultValue={props.current}

4) Replace all occurencies of tab.current ? with tab.name === props.current ?

After all this, the submenu-en-nawahi.js will look like this:

import { AnnotationIcon, BookOpenIcon, CalendarIcon, CollectionIcon, DocumentSearchIcon, MusicNoteIcon, ViewListIcon } from '@heroicons/react/outline';  
import Link from 'next/link';
import { useRouter } from 'next/router';

const tabs = [
  { name: "Narrative", href: '/en/nawahi-narrative', icon: AnnotationIcon },
  { name: "Timeline", href: '/en/nawahi-timeline', icon: CalendarIcon },
  { name: "Lessons", href: '/en/nawahi-lessons', icon: CollectionIcon },
  { name: "Songs", href: '/en/nawahi-songs', icon: MusicNoteIcon },
  { name: "Books", href: '/en/nawahi-books', icon: BookOpenIcon },
  { name: "Index", href: '/en/nawahi-index', icon: ViewListIcon },
  { name: "ʻŌlelo Resources", href: '/en/nawahi-waihona', icon: DocumentSearchIcon },
]

function classNames(...classes) {
  return classes.filter(Boolean).join(' ')
}

function handleChange(e, router) {
  const selectedTab = tabs.find(tab => tab.name === e.target.value);
  router.push(selectedTab.href);
}

export default function Submenu(props) {
  const router = useRouter();
  return (
    <div>
      <div className="sm:hidden">
        <label htmlFor="tabs" className="sr-only">
          Select a tab
        </label>
        {/* Use an "onChange" listener to redirect the user to the selected tab URL. */}
        <select
          id="tabs"
          name="tabs"
          className="block w-full focus:ring-beige-default focus:border-beige-default border-gray-300 rounded-md"
          defaultValue={props.current}
          onChange={(e) => handleChange(e, router)}
        >
          {tabs.map((tab) => (
            <option key={tab.name}>{tab.name}</option>
          ))}
        </select>
      </div>
      <div className="hidden sm:block">
        <div className="border-b bg-white border-gray-200">
          <nav className="-mb-px flex flex-wrap justify-center space-x-4" aria-label="Tabs">
            {tabs.map((tab) => (
              <Link href={tab.href}>
                <a
                  key={tab.name}
                  className={classNames(
                    tab.name === props.current
                      ? 'border-primary text-primary'
                      : 'border-transparent text-gray-500 hover:text-beige-default hover:border-beige-default',
                    'group inline-flex items-center py-4 px-1 border-b-2 font-medium text-sm leading-4'
                  )}
                  aria-current={tab.name === props.current ? 'page' : undefined}
                >
                  <div className="flex-col mx-auto">
                    <tab.icon
                      className={classNames(
                        tab.name === props.current ? 'text-primary' : 'text-gray-400 group-hover:text-beige-default',
                        'mx-auto h-4 w-4'
                      )}
                      aria-hidden="true"
                    />
                    <span>{tab.name}</span>
                  </div>
                </a>
              </Link>
            ))}
          </nav>
        </div>
      </div>
    </div>
  )
}

5) On every page, replace <SubMenu /> with <SubMenu current="Books" />, <SubMenu current="ʻŌlelo Resources" /> etc, i.e. the name of the page in the submenu.

Hope this simple solution would be useful for you. Please comment with some feedback. Thank you!

Nice work GFalcon! I like your code :) Thank you too.
fullakingi 1 month ago