JSFiddle - React, Tailwind, and code Playground

HTML

<body data-main="code">


<ul id="mainlist"></ul>
<br>
<ul id="sublist"></ul>

</body>

CSS

* {
  margin: 0;
  padding: 0;
}

nav,
#sublist,
#mainlist{
  display: block;
  width: 180px;
  height: 100%;
  border: 1px solid lightgray;
}

#sublist li,
#mainlist li{
  display: block;
  position: relative;
  height: 42px;
  line-height: 42px;
  border-bottom: 1px solid lightgray;
}

a:link {
  text-decoration: none;
}

#sublist li a,
#mainlist li a{
  display: grid;
  height: 42px;
  width: 180px;
  line-height: 42px;
  padding-left: 10px;
}

JavaScript

if (window.location.href.split("/").pop() === "") {
  window.location.href = "home"
}

const load_menu = async () => {
  try {
    const response = await fetch('https://api3.go4webdev.org/menu/all')
    const data = await response.json()
    sessionStorage.setItem('main', JSON.stringify(data));
  } catch (err) {
    console.error(err)
  }
}

//sessionStorage.clear() //to ensure that it work (remove)

const get_menu = async () => {
  if (sessionStorage.length === 0) {
    alert("load from db")
    await load_menu()
  }
  let data = JSON.parse(sessionStorage.main)
  let main = document.body.dataset.main

  fillmain(data.filter(item => item.menu_main == ['min']))
  fillsub(data.filter(item => item.menu_main == [main]))
}

//sessionStorage.clear()
get_menu()

function fillmain(data) {
  let mainlist = document.getElementById("mainlist");
  data.forEach(function(item) {
    let li = document.createElement('li')
    li.setAttribute('id', item.menu_id)
    li.innerHTML = `<a href="` + item.menu_lnk + `"><svg class="icn56"><use xlink:href="` + item.menu_icn + `"/></svg>` + item.menu_txt + `</a>`
    mainlist.appendChild(li)
  })
}


function fillsub(data) {
  let sublist = document.getElementById("sublist");
  data.forEach(function(item) {
    sublist.setAttribute('data-main', item.menu_main)
    let li = document.createElement('li')
    li.setAttribute('id', item.menu_id)
    li.innerHTML = `<a href="` + item.menu_lnk + `">` + item.menu_txt + `</a>`
    sublist.appendChild(li)
  })
  // mainlist.appendChild(fragment)
}