<template>
  <ul class="space-y-2 pb-2">
    <li>
      <router-link :to="{path: '/'}" class="text-base text-violet-900 font-bold flex flex-col rounded-lg p-2 px-3 hover:bg-violet-100 group" active-class="bg-violet-800 text-white hover:bg-violet-800">
        Introduction
      </router-link>
    </li>
    <li>
      <span class="flex font-bold px-3 py-1 text-violet-900">What is the statewide trend in...</span>
      <ul class="space-y-1 py-2 ml-3">
        <li>
          <router-link :to="{path: '/state/testing'}" class="text-base rounded-lg flex items-center p-2 mr-3 hover:bg-violet-100 group" active-class="bg-violet-800 hover:bg-violet-800 text-white">
            <icon-mdi-test-tube class="mr-2"></icon-mdi-test-tube> testing?
          </router-link>
        </li>
        <li>
          <router-link :to="{path: '/cases'}" class="text-base rounded-lg flex items-center p-2 mr-3 hover:bg-violet-100 group" active-class="bg-violet-800 text-white hover:bg-violet-800">
            <icon-mdi-virus-outline class="mr-2"></icon-mdi-virus-outline> cases?
          </router-link>
        </li>
        <li>
          <router-link :to="{path: '/cases'}" class="text-base rounded-lg flex items-center p-2 mr-3 hover:bg-violet-100 group" active-class="bg-violet-800 text-white hover:bg-violet-800">
            <icon-mdi-hospital-box-outline class="mr-2"></icon-mdi-hospital-box-outline> hospitalizations?
          </router-link>
        </li>
        <li>
          <router-link :to="{path: '/cases'}" class="text-base rounded-lg flex items-center p-2 mr-3 hover:bg-violet-100 group" active-class="bg-violet-800 text-white hover:bg-violet-800">
            <icon-mdi-grave-stone class="mr-2"></icon-mdi-grave-stone> deaths?
          </router-link>
        </li>
      </ul>
    </li>
    <li>
      <span class="flex font-bold px-3 py-1 text-violet-900">Which counties have the...</span>
      <ul class="space-y-1 py-2 ml-3">
        <li>
          <router-link :to="{path: '/cases'}" class="text-base rounded-lg flex items-center p-2 mr-3 hover:bg-violet-100 group" active-class="bg-violet-800 text-white hover:bg-violet-800">
            <icon-mdi-percent-outline class="mr-2"></icon-mdi-percent-outline> highest positivity rate?
          </router-link>
        </li>
        <li>
          <router-link :to="{path: '/cases'}" class="text-base rounded-lg flex items-center p-2 mr-3 hover:bg-violet-100 group" active-class="bg-violet-800 text-white hover:bg-violet-800">
            <icon-mdi-virus-outline class="mr-2"></icon-mdi-virus-outline> most cases by population?
          </router-link>
        </li>
        <li>
          <router-link :to="{path: '/cases'}" class="text-base rounded-lg flex items-center p-2 mr-3 hover:bg-violet-100 group" active-class="bg-violet-800 text-white hover:bg-violet-800">
            <icon-mdi-hospital-box-outline class="mr-2"></icon-mdi-hospital-box-outline> most hospitalizations by population?
          </router-link>
        </li>
        <li>
          <router-link :to="{path: '/cases'}" class="text-base rounded-lg flex items-center p-2 mr-3 hover:bg-violet-100 group" active-class="bg-violet-800 text-white hover:bg-violet-800">
            <icon-mdi-grave-stone class="mr-2"></icon-mdi-grave-stone> most deaths by population?
          </router-link>
        </li>
      </ul>
    </li>
    <li>
      <span class="flex font-bold px-3 py-1 text-violet-900">Who is most at-risk...</span>
      <ul class="space-y-1 py-2 ml-3">
        <li>
          <router-link :to="{path: '/cases'}" class="text-base rounded-lg flex items-center p-2 mr-3 hover:bg-violet-100 group" active-class="bg-violet-800 text-white hover:bg-violet-800">
            <icon-mdi-human-cane class="mr-2"></icon-mdi-human-cane> by age?
          </router-link>
        </li>
        <li>
          <router-link :to="{path: '/cases'}" class="text-base rounded-lg flex items-center p-2 mr-3 hover:bg-violet-100 group" active-class="bg-violet-800 text-white hover:bg-violet-800">
            <icon-mdi-gender-male-female class="mr-2"></icon-mdi-gender-male-female> by gender?
          </router-link>
        </li>
        <li>
          <router-link :to="{path: '/cases'}" class="text-base rounded-lg flex items-center p-2 mr-3 hover:bg-violet-100 group" active-class="bg-violet-800 text-white hover:bg-violet-800">
            <icon-mdi-web class="mr-2"></icon-mdi-web> by ethnicity?
          </router-link>
        </li>
        <li>
          <router-link :to="{path: '/cases'}" class="text-base rounded-lg flex items-center p-2 mr-3 hover:bg-violet-100 group" active-class="bg-violet-800 text-white hover:bg-violet-800">
            <icon-healthicons-clinical-f-outline class="mr-2"></icon-healthicons-clinical-f-outline> by health condition?
          </router-link>
        </li>
      </ul>
    </li>
  </ul>
</template>
