
<template>
    <div class="container mx-auto">
      <div
        id="hidden_mnu"
        class="flex justify-center gap-1 bg-blue-900 shadow-md"
      >
  
        <Menu>
          <MenuItem v-slot="{ active }"
          class="
           ring-1 ring-black ring-opacity-5 text-white
            hover:text-blue-800
          ">
            <router-link
              to="/"
              :class="[
                active ? 'bg-gray-100 text-gray-100' : 'text-gray-50',
                'block px-1 py-2 text-sm text-white',
              ]"
            >
              Home </router-link
            >
          </MenuItem>
        </Menu>
        <Menu>
          <MenuItem v-slot="{ active }"
          class="
            text-gray-100
            ring-1 ring-black ring-opacity-5
            hover:text-blue-800
          ">
            <router-link
              to="/about-us"
              :class="[
                active ? 'bg-gray-100 text-gray-100' : 'text-gray-50',
                'block px-1 py-2 text-sm',
              ]"
            >
              About </router-link
            >
          </MenuItem>
        </Menu>
        <Menu>
          <MenuItem v-slot="{ active }"
          class="
            text-gray-100
            ring-1 ring-black ring-opacity-5
            hover:text-blue-800
          ">
            <router-link
              to="/notice"
              :class="[
                active ? 'bg-gray-100 text-gray-100' : 'text-gray-50',
                'block px-1 py-2 text-sm',
              ]"
            >
              Notice </router-link
            >
          </MenuItem>
        </Menu>
        <Menu>
          <MenuItem v-slot="{ active }"
          class="
            text-gray-100
            ring-1 ring-black ring-opacity-5
            hover:text-blue-800
          ">
            <router-link
              to="/library"
              :class="[
                active ? 'bg-gray-100 text-gray-100' : 'text-gray-50',
                'block px-1 py-2 text-sm',
              ]"
            >
              Library </router-link
            >
          </MenuItem>
        </Menu>
        <Menu as="div" class="relative inline-flex justify-center text-center">
          <div>
            <MenuButton
              class="
                inline-flex
                justify-center
                w-full
                px-4
                py-2
                text-sm
                font-medium
                text-white
                focus:outline-none
              "
            >
              Administration
              <ChevronDownIcon class="-mr-1 ml-2 h-5 w-5" aria-hidden="true" />
            </MenuButton>
          </div>
  
          <div
            enter-active-class="transition ease-out duration-100"
            enter-from-class="transform opacity-0 scale-95"
            enter-to-class="transform opacity-100 scale-100"
            leave-active-class="transition ease-in duration-75"
            leave-from-class="transform opacity-100 scale-100"
            leave-to-class="transform opacity-0 scale-95"
          >
            <MenuItems
              class="
                origin-top-right
                absolute
                top-10
                left-0
                mt-2
                w-56
                rounded-md
                shadow-lg
                bg-white
                ring-1 ring-black ring-opacity-5
                focus:outline-none
              "
            >
              <div class="py-1">
                <MenuItem v-slot="{ active }">
                  <router-link
                    to="/governing-body"
                    :class="[
                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                      'block px-1 py-2 text-sm',
                    ]"
                  >
                    Governing Body</router-link
                  >
                </MenuItem>
                <MenuItem v-slot="{ active }">
                  <router-link
                    to="/composition-of-gb"
                    :class="[
                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                      'block px-1 py-2 text-sm',
                    ]"
                    >Composition of GB</router-link
                  >
                </MenuItem>
                <MenuItem v-slot="{ active }">
                  <router-link
                    to="/staff"
                    :class="[
                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                      'block px-1 py-2 text-sm',
                    ]"
                    >Staff</router-link
                  >
                </MenuItem>
                <MenuItem v-slot="{ active }">
                  <router-link
                    to="/working-hour"
                    :class="[
                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                      'block px-1 py-2 text-sm',
                    ]"
                    >Working Hour</router-link
                  >
                </MenuItem>
              </div>
            </MenuItems>
          </div>
        </Menu>
        <Menu as="div" class="relative inline-flex justify-center text-center">
          <div>
            <MenuButton
              class="
                inline-flex
                justify-center
                w-full
                px-4
                py-2
                text-sm
                font-medium
                text-white
                focus:outline-none
              "
            >
              Academics
              <ChevronDownIcon class="-mr-1 ml-2 h-5 w-5" aria-hidden="true" />
            </MenuButton>
          </div>
  
          <div
            enter-active-class="transition ease-out duration-100"
            enter-from-class="transform opacity-0 scale-95"
            enter-to-class="transform opacity-100 scale-100"
            leave-active-class="transition ease-in duration-75"
            leave-from-class="transform opacity-100 scale-100"
            leave-to-class="transform opacity-0 scale-95"
          >
            <MenuItems
              class="
                origin-top-right
                absolute
                top-10
                left-0
                mt-2
                w-56
                rounded-md
                shadow-lg
                bg-white
                ring-1 ring-black ring-opacity-5
                focus:outline-none
              "
            >
              <div class="py-1">
                <MenuItem v-slot="{ active }">
                  <router-link
                    to="/departments"
                    :class="[
                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                      'block px-1 py-2 text-sm',
                    ]"
                    >Departments and Faculty</router-link
                  >
                </MenuItem>
                <MenuItem v-slot="{ active }">
                        <router-link
                          to="admission"
                          :class="[
                            active
                              ? 'bg-gray-100 text-gray-900'
                              : 'text-gray-700',
                            'block px-1 py-2 text-sm',
                          ]"
                          >Admission</router-link
                        >
                      </MenuItem>
                <MenuItem v-slot="{ active }">
                  <router-link
                    to="/librarians"
                    :class="[
                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                      'block px-1 py-2 text-sm',
                    ]"
                    >Librarians</router-link
                  >
                </MenuItem>
                <MenuItem v-slot="{ active }">
                  <router-link
                    to="/course-offered"
                    :class="[
                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                      'block px-1 py-2 text-sm',
                    ]"
                    >Course Offered
                  </router-link>
                </MenuItem>
                <MenuItem v-slot="{ active }">
                  <router-link
                    to="/subject-combinantionhons"
                    :class="[
                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                      'block px-1 py-2 text-sm',
                    ]"
                    >Subject Combinantion(Hons)</router-link
                  >
                </MenuItem>
                <MenuItem v-slot="{ active }">
                  <router-link
                    to="/subject-combinantiongen"
                    :class="[
                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                      'block px-1 py-2 text-sm',
                    ]"
                    >Subject Combinantion(Gen)
                  </router-link>
                </MenuItem>
                <MenuItem v-slot="{ active }">
                  <router-link
                    to="/intake-capacity"
                    :class="[
                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                      'block px-1 py-2 text-sm',
                    ]"
                    >Intake Capacity</router-link
                  >
                </MenuItem>
                <MenuItem v-slot="{ active }">
                  <router-link
                    to="/academic-calendar"
                    :class="[
                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                      'block px-1 py-2 text-sm',
                    ]"
                  >
                    Academic Calendar
                  </router-link>
                </MenuItem>
                <MenuItem v-slot="{ active }">
                  <router-link
                    to="/prospectus"
                    :class="[
                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                      'block px-1 py-2 text-sm',
                    ]"
                    >Prospectus</router-link
                  >
                </MenuItem>
                <MenuItem v-slot="{ active }">
                  <router-link
                    to="Marks-Distribution"
                    :class="[
                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                      'block px-1 py-2 text-sm',
                    ]"
                  >
                    Marks Distribution</router-link
                  >
                </MenuItem>
                <MenuItem v-slot="{ active }">
                  <router-link
                    to="/result"
                    :class="[
                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                      'block px-1 py-2 text-sm',
                    ]"
                    >Result</router-link
                  >
                </MenuItem>
              </div>
            </MenuItems>
          </div>
        </Menu>
        <Menu as="div" class="relative inline-flex justify-center text-center">
          <div>
            <MenuButton
              class="
                inline-flex
                justify-center
                w-full
                px-4
                py-2
                text-sm
                font-medium
                text-white
                focus:outline-none
              "
            >
              Organizations
              <ChevronDownIcon class="-mr-1 ml-2 h-5 w-5" aria-hidden="true" />
            </MenuButton>
          </div>
  
          <div
            enter-active-class="transition ease-out duration-100"
            enter-from-class="transform opacity-0 scale-95"
            enter-to-class="transform opacity-100 scale-100"
            leave-active-class="transition ease-in duration-75"
            leave-from-class="transform opacity-100 scale-100"
            leave-to-class="transform opacity-0 scale-95"
          >
            <MenuItems
              class="
                origin-top-right
                absolute
                top-10
                left-0
                mt-2
                w-56
                rounded-md
                shadow-lg
                bg-white
                ring-1 ring-black ring-opacity-5
                focus:outline-none
              "
            >
              <div class="py-1">
                <MenuItem v-slot="{ active }">
                  <router-link
                    to="/iqac"
                    :class="[
                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                      'block px-1 py-2 text-sm',
                    ]"
                    >IQAC</router-link
                  >
                </MenuItem>
                <MenuItem v-slot="{ active }">
                  <router-link
                    to="/naac"
                    :class="[
                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                      'block px-1 py-2 text-sm',
                    ]"
                    >NAAC</router-link
                  >
                </MenuItem>
                <MenuItem v-slot="{ active }">
                  <router-link
                    to="/aqar"
                    :class="[
                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                      'block px-1 py-2 text-sm',
                    ]"
                    >AQAR</router-link
                  >
                </MenuItem>
                <!-- <MenuItem v-slot="{ active }">
                  <router-link
                    to="/icc"
                    :class="[
                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                      'block px-1 py-2 text-sm',
                    ]"
                    >ICC</router-link
                  >
                </MenuItem> -->
                <!-- <MenuItem v-slot="{ active }">
                                  <router-link to="/Teacher's-Council":class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block px-1 py-2 text-sm']">Teacher's Council</router-link>
                              </MenuItem> -->
                <MenuItem v-slot="{ active }">
                  <router-link
                    to="/students-union"
                    :class="[
                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                      'block px-1 py-2 text-sm',
                    ]"
                    >Student's Union</router-link
                  >
                </MenuItem>
                <MenuItem v-slot="{ active }">
                  <router-link
                    to="/teachers-council"
                    :class="[
                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                      'block px-1 py-2 text-sm',
                    ]"
                    >Teacher's Council</router-link
                  >
                </MenuItem>
                <MenuItem v-slot="{ active }">
                  <router-link
                    to="/alumni-association"
                    :class="[
                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                      'block px-1 py-2 text-sm',
                    ]"
                    >Alumni Association</router-link
                  >
                </MenuItem>
                <MenuItem v-slot="{ active }">
                  <router-link
                    to=""
                    :class="[
                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                      'block px-1 py-2 text-sm',
                    ]"
                    ></router-link
                  >
                </MenuItem>
                <MenuItem v-slot="{ active }">
                  <router-link
                    to="/gallery"
                    :class="[
                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                      'block px-1 py-2 text-sm',
                    ]"
                    >Image Gallery</router-link
                  >
                </MenuItem>
              </div>
            </MenuItems>
          </div>
        </Menu>
        <Menu as="div" class="relative inline-flex justify-center text-center">
          <div>
            <MenuButton
              class="
                inline-flex
                justify-center
                w-full
                px-4
                py-2
                text-sm
                font-medium
                text-white
                focus:outline-none
              "
            >
              Facilities
              <ChevronDownIcon class="-mr-1 ml-2 h-5 w-5" aria-hidden="true" />
            </MenuButton>
          </div>
  
          <div
            enter-active-class="transition ease-out duration-100"
            enter-from-class="transform opacity-0 scale-95"
            enter-to-class="transform opacity-100 scale-100"
            leave-active-class="transition ease-in duration-75"
            leave-from-class="transform opacity-100 scale-100"
            leave-to-class="transform opacity-0 scale-95"
          >
            <MenuItems
              class="
                origin-top-right
                absolute
                top-10
                left-0
                mt-2
                w-56
                rounded-md
                shadow-lg
                bg-white
                ring-1 ring-black ring-opacity-5
                focus:outline-none
              "
            >
              <div class="py-1">
                <MenuItem v-slot="{ active }">
                  <router-link
                    to="/facilities"
                    :class="[
                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                      'block px-1 py-2 text-sm',
                    ]"
                    >Facilities</router-link
                  >
                </MenuItem>
  
                <MenuItem v-slot="{ active }">
                  <router-link
                    to="/rti"
                    :class="[
                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                      'block px-1 py-2 text-sm',
                    ]"
                    >RTI</router-link
                  >
                </MenuItem>
              </div>
            </MenuItems>
          </div>
        </Menu>
  
        <Menu as="div" class="relative inline-flex justify-center text-center">
          <div>
            <MenuButton
              class="
                inline-flex
                justify-center
                w-full
                px-4
                py-2
                text-sm
                font-medium
                text-white
                focus:outline-none
              "
            >
              Students
              <ChevronDownIcon class="-mr-1 ml-2 h-5 w-5" aria-hidden="true" />
            </MenuButton>
          </div>
  
          <div
            enter-active-class="transition ease-out duration-100"
            enter-from-class="transform opacity-0 scale-95"
            enter-to-class="transform opacity-100 scale-100"
            leave-active-class="transition ease-in duration-75"
            leave-from-class="transform opacity-100 scale-100"
            leave-to-class="transform opacity-0 scale-95"
          >
            <MenuItems
              class="
                origin-top-right
                absolute
                top-10
                left-0
                mt-2
                w-56
                rounded-md
                shadow-lg
                bg-white
                ring-1 ring-black ring-opacity-5
                focus:outline-none
              "
            >
              <div class="py-1">
                <MenuItem v-slot="{ active }">
                  <router-link
                    to="/admission"
                    :class="[
                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                      'block px-1 py-2 text-sm',
                    ]"
                    >Admission</router-link
                  >
                </MenuItem>
                <MenuItem v-slot="{ active }">
                  <router-link
                    to="/activities"
                    :class="[
                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                      'block px-1 py-2 text-sm',
                    ]"
                    >Activities</router-link
                  >
                </MenuItem>
                <MenuItem v-slot="{ active }">
                  <router-link
                    to="/students-union"
                    :class="[
                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                      'block px-1 py-2 text-sm',
                    ]"
                    >Student's Union</router-link
                  >
                </MenuItem>
                <MenuItem v-slot="{ active }">
                  <router-link
                    to="/student-grievance"
                    :class="[
                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                      'block px-1 py-2 text-sm',
                    ]"
                  >
                    Student Suggestions/Grievance</router-link
                  >
                </MenuItem>
                <MenuItem v-slot="{ active }">
                  <router-link
                    to="/students-feedback"
                    :class="[
                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                      'block px-1 py-2 text-sm',
                    ]"
                    >Student's feedback</router-link
                  >
                </MenuItem>
                <MenuItem v-slot="{ active }">
                  <router-link
                    to="/students-health-home"
                    :class="[
                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                      'block px-1 py-2 text-sm',
                    ]"
                    >Student's Health Home</router-link
                  >
                </MenuItem>
                <MenuItem v-slot="{ active }">
                  <router-link
                    to="/code-of-conduct"
                    :class="[
                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                      'block px-1 py-2 text-sm',
                    ]"
                  >
                    Code of Conduct</router-link
                  >
                </MenuItem>
                <MenuItem v-slot="{ active }">
                  <router-link
                    to="/holidays-list"
                    :class="[
                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                      'block px-1 py-2 text-sm',
                    ]"
                    >Holiday List</router-link
                  >
                </MenuItem>
                <MenuItem v-slot="{ active }">
                  <router-link
                    to="/gallery"
                    :class="[
                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                      'block px-1 py-2 text-sm',
                    ]"
                    >Photo Gallery
                  </router-link>
                </MenuItem>
              </div>
            </MenuItems>
          </div>
        </Menu>
        <Menu>
          <MenuItem v-slot="{ active }"
          class="
            text-gray-100
            ring-1 ring-black ring-opacity-5
            hover:text-blue-800
          ">
            <router-link
              to="/contact-us"
              :class="[
                active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                'block px-1 py-2 text-sm',
              ]"
            >
              Contact </router-link
            >
          </MenuItem>
        </Menu>
  
      </div>
      <div class="w-full h-8 bg-blue-700 fixed bottom-0" id="hidden_large">
        <div>
          <p></p>
        </div>
        <div class="overflow-hidden">
          <label
            class="
              block
              cursor-pointer
              text-2xl text-center
              font-semibold
              text-white
              bottom-0
              right-0
            "
            for="mobile_mnu"
          >
            Menu</label
          >
          <input class="hidden" type="checkbox" id="mobile_mnu" />
          <div class="mobile_menu bg-cyan-200 transition duration-150">
            <!-- mobile_menu_item -->
            <div class="bg-white">
              <div class="text-center">
                <button class="text-sm font-medium py-2 px-4 rounded">
                  <router-Link to="/">Home</router-Link>
                </button>
              </div>
              <div class="text-center">
                <button class="text-sm font-medium py-2 px-4 rounded">
                  <router-Link to="/about-us">About Us</router-Link>
                </button>
              </div>
              <Menu as="div" class="text-center">
                <div>
                  <MenuButton
                    class="
                      inline-flex
                      justify-center
                      w-full
                      px-4
                      py-2
                      bg-white
                      text-sm
                      font-medium
                      text-gray-700
                      focus:outline-none
                    "
                  >
                    Administration
                    <ChevronDownIcon
                      class="-mr-1 ml-2 h-5 w-5"
                      aria-hidden="true"
                    />
                  </MenuButton>
                </div>
  
                <div
                  enter-active-class="transition ease-out duration-100"
                  enter-from-class="transform opacity-0 scale-95"
                  enter-to-class="transform opacity-100 scale-100"
                  leave-active-class="transition ease-in duration-75"
                  leave-from-class="transform opacity-100 scale-100"
                  leave-to-class="transform opacity-0 scale-95"
                >
                  <MenuItems class="w-full rounded-md shadow-lg bg-cyan-200">
                    <div class="py-1">
                      <MenuItem v-slot="{ active }">
                        <router-link
                          to="/governing-body"
                          :class="[
                            active
                              ? 'bg-gray-100 text-gray-900'
                              : 'text-gray-700',
                            'block px-1 py-2 text-sm',
                          ]"
                        >
                          Governing Body</router-link
                        >
                      </MenuItem>
                      <MenuItem v-slot="{ active }">
                        <router-link
                          to="/composition-of-gb"
                          :class="[
                            active
                              ? 'bg-gray-100 text-gray-900'
                              : 'text-gray-700',
                            'block px-1 py-2 text-sm',
                          ]"
                          >Composition of GB</router-link
                        >
                      </MenuItem>
                      <MenuItem v-slot="{ active }">
                        <router-link
                          to="/staff"
                          :class="[
                            active
                              ? 'bg-gray-100 text-gray-900'
                              : 'text-gray-700',
                            'block px-1 py-2 text-sm',
                          ]"
                          >Staff</router-link
                        >
                      </MenuItem>
                      <MenuItem v-slot="{ active }">
                        <router-link
                          to="/working-hour"
                          :class="[
                            active
                              ? 'bg-gray-100 text-gray-900'
                              : 'text-gray-700',
                            'block px-1 py-2 text-sm',
                          ]"
                          >Working Hour</router-link
                        >
                      </MenuItem>
                    </div>
                  </MenuItems>
                </div>
              </Menu>
              <Menu as="div" class="text-center">
                <div>
                  <MenuButton
                    class="
                      inline-flex
                      justify-center
                      w-full
                      px-4
                      py-2
                      bg-white
                      text-sm
                      font-medium
                      text-gray-700
                      focus:outline-none
                    "
                  >
                    Academics
                    <ChevronDownIcon
                      class="-mr-1 ml-2 h-5 w-5"
                      aria-hidden="true"
                    />
                  </MenuButton>
                </div>
  
                <div
                  enter-active-class="transition ease-out duration-100"
                  enter-from-class="transform opacity-0 scale-95"
                  enter-to-class="transform opacity-100 scale-100"
                  leave-active-class="transition ease-in duration-75"
                  leave-from-class="transform opacity-100 scale-100"
                  leave-to-class="transform opacity-0 scale-95"
                >
                  <MenuItems class="w-full rounded-md shadow-lg bg-cyan-200">
                    <div class="py-1">
                      <MenuItem v-slot="{ active }">
                        <router-link
                          to="#"
                          :class="[
                            active
                              ? 'bg-gray-100 text-gray-900'
                              : 'text-gray-700',
                            'block px-1 py-2 text-sm',
                          ]"
                          >Departments and Faculty</router-link
                        >
                      </MenuItem>
                      <MenuItem v-slot="{ active }">
                        <router-link
                          to="ug-admission"
                          :class="[
                            active
                              ? 'bg-gray-100 text-gray-900'
                              : 'text-gray-700',
                            'block px-1 py-2 text-sm',
                          ]"
                          >UG Admission</router-link
                        >
                      </MenuItem>
                      <MenuItem v-slot="{ active }">
                        <router-link
                          to="/librarians"
                          :class="[
                            active
                              ? 'bg-gray-100 text-gray-900'
                              : 'text-gray-700',
                            'block px-1 py-2 text-sm',
                          ]"
                          >Librarians</router-link
                        >
                      </MenuItem>
                      <MenuItem v-slot="{ active }">
                        <router-link
                          to="/course-offered"
                          :class="[
                            active
                              ? 'bg-gray-100 text-gray-900'
                              : 'text-gray-700',
                            'block px-1 py-2 text-sm',
                          ]"
                          >Course Offered
                        </router-link>
                      </MenuItem>
                      <MenuItem v-slot="{ active }">
                        <router-link
                          to="/subject-combinantionhons"
                          :class="[
                            active
                              ? 'bg-gray-100 text-gray-900'
                              : 'text-gray-700',
                            'block px-1 py-2 text-sm',
                          ]"
                          >Subject Combinantion(Hons)</router-link
                        >
                      </MenuItem>
                      <MenuItem v-slot="{ active }">
                        <router-link
                          to="/Subject-combinantiongen"
                          :class="[
                            active
                              ? 'bg-gray-100 text-gray-900'
                              : 'text-gray-700',
                            'block px-1 py-2 text-sm',
                          ]"
                          >Subject Combinantion(Gen)
                        </router-link>
                      </MenuItem>
                      <MenuItem v-slot="{ active }">
                        <router-link
                          to="/intake-capacity"
                          :class="[
                            active
                              ? 'bg-gray-100 text-gray-900'
                              : 'text-gray-700',
                            'block px-1 py-2 text-sm',
                          ]"
                          >Intake Capacity</router-link
                        >
                      </MenuItem>
                      <MenuItem v-slot="{ active }">
                        <router-link
                          to="/academic-calendar"
                          :class="[
                            active
                              ? 'bg-gray-100 text-gray-900'
                              : 'text-gray-700',
                            'block px-1 py-2 text-sm',
                          ]"
                        >
                          Academic Calendar
                        </router-link>
                      </MenuItem>
                      <MenuItem v-slot="{ active }">
                        <router-link
                          to="/prospectus"
                          :class="[
                            active
                              ? 'bg-gray-100 text-gray-900'
                              : 'text-gray-700',
                            'block px-1 py-2 text-sm',
                          ]"
                          >Prospectus</router-link
                        >
                      </MenuItem>
                      <MenuItem v-slot="{ active }">
                        <router-link
                          to="Marks-Distributionyarn"
                          :class="[
                            active
                              ? 'bg-gray-100 text-gray-900'
                              : 'text-gray-700',
                            'block px-1 py-2 text-sm',
                          ]"
                        >
                          Marks Distribution</router-link
                        >
                      </MenuItem>
                      <MenuItem v-slot="{ active }">
                        <router-link
                          to="/result"
                          :class="[
                            active
                              ? 'bg-gray-100 text-gray-900'
                              : 'text-gray-700',
                            'block px-1 py-2 text-sm',
                          ]"
                          >Result</router-link
                        >
                      </MenuItem>
                    </div>
                  </MenuItems>
                </div>
              </Menu>
              <Menu as="div" class="text-center">
                <div>
                  <MenuButton
                    class="
                      inline-flex
                      justify-center
                      w-full
                      px-4
                      py-2
                      bg-white
                      text-sm
                      font-medium
                      text-gray-700
                      focus:outline-none
                    "
                  >
                    Organizations
                    <ChevronDownIcon
                      class="-mr-1 ml-2 h-5 w-5"
                      aria-hidden="true"
                    />
                  </MenuButton>
                </div>
  
                <div
                  enter-active-class="transition ease-out duration-100"
                  enter-from-class="transform opacity-0 scale-95"
                  enter-to-class="transform opacity-100 scale-100"
                  leave-active-class="transition ease-in duration-75"
                  leave-from-class="transform opacity-100 scale-100"
                  leave-to-class="transform opacity-0 scale-95"
                >
                  <MenuItems class="w-full rounded-md shadow-lg bg-cyan-200">
                    <div class="py-1">
                      <MenuItem v-slot="{ active }">
                        <router-link
                          to="/iqac"
                          :class="[
                            active
                              ? 'bg-gray-100 text-gray-900'
                              : 'text-gray-700',
                            'block px-1 py-2 text-sm',
                          ]"
                          >IQAC</router-link
                        >
                      </MenuItem>
                      <!-- <MenuItem v-slot="{ active }">
                                              <router-link to="/Teacher's-Council":class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block px-1 py-2 text-sm']">Teacher's Council</router-link>
                                          </MenuItem> -->
                      <MenuItem v-slot="{ active }">
                        <router-link
                          to="/students-union"
                          :class="[
                            active
                              ? 'bg-gray-100 text-gray-900'
                              : 'text-gray-700',
                            'block px-1 py-2 text-sm',
                          ]"
                          >Student's Union</router-link
                        >
                      </MenuItem>
                      <MenuItem v-slot="{ active }">
                        <router-link
                          to="/alumni-association"
                          :class="[
                            active
                              ? 'bg-gray-100 text-gray-900'
                              : 'text-gray-700',
                            'block px-1 py-2 text-sm',
                          ]"
                          >Alumni Association</router-link
                        >
                      </MenuItem>
                      <MenuItem v-slot="{ active }">
                        <router-link
                          to="/activity-gallery"
                          :class="[
                            active
                              ? 'bg-gray-100 text-gray-900'
                              : 'text-gray-700',
                            'block px-1 py-2 text-sm',
                          ]"
                          >Activity Gallery</router-link
                        >
                      </MenuItem>
                      <MenuItem v-slot="{ active }">
                        <router-link
                          to="/gallery"
                          :class="[
                            active
                              ? 'bg-gray-100 text-gray-900'
                              : 'text-gray-700',
                            'block px-1 py-2 text-sm',
                          ]"
                          >Image Gallery</router-link
                        >
                      </MenuItem>
                    </div>
                  </MenuItems>
                </div>
              </Menu>
              <div class="text-center">
                <button class="text-sm font-medium py-2 px-4 rounded">
                  <router-Link to="/facilities">Facilities</router-Link>
                </button>
              </div>
  
              <Menu as="div" class="text-center">
                <div>
                  <MenuButton
                    class="
                      inline-flex
                      justify-center
                      w-full
                      px-4
                      py-2
                      bg-white
                      text-sm
                      font-medium
                      text-gray-700
                      focus:outline-none
                    "
                  >
                    Students
                    <ChevronDownIcon
                      class="-mr-1 ml-2 h-5 w-5"
                      aria-hidden="true"
                    />
                  </MenuButton>
                </div>
  
                <div
                  enter-active-class="transition ease-out duration-100"
                  enter-from-class="transform opacity-0 scale-95"
                  enter-to-class="transform opacity-100 scale-100"
                  leave-active-class="transition ease-in duration-75"
                  leave-from-class="transform opacity-100 scale-100"
                  leave-to-class="transform opacity-0 scale-95"
                >
                  <MenuItems class="w-full rounded-md shadow-lg bg-cyan-200">
                    <div class="py-1">
                      <MenuItem v-slot="{ active }">
                        <router-link
                          to="/admission"
                          :class="[
                            active
                              ? 'bg-gray-100 text-gray-900'
                              : 'text-gray-700',
                            'block px-1 py-2 text-sm',
                          ]"
                          >Admission</router-link
                        >
                      </MenuItem>
                      <MenuItem v-slot="{ active }">
                        <router-link
                          to="/activities"
                          :class="[
                            active
                              ? 'bg-gray-100 text-gray-900'
                              : 'text-gray-700',
                            'block px-1 py-2 text-sm',
                          ]"
                          >Activities</router-link
                        >
                      </MenuItem>
                      <MenuItem v-slot="{ active }">
                        <router-link
                          to="/students-union"
                          :class="[
                            active
                              ? 'bg-gray-100 text-gray-900'
                              : 'text-gray-700',
                            'block px-1 py-2 text-sm',
                          ]"
                          >Student's Union</router-link
                        >
                      </MenuItem>
                      <MenuItem v-slot="{ active }">
                        <router-link
                          to="/student-grievance"
                          :class="[
                            active
                              ? 'bg-gray-100 text-gray-900'
                              : 'text-gray-700',
                            'block px-1 py-2 text-sm',
                          ]"
                        >
                          Student Suggestions/Grievance</router-link
                        >
                      </MenuItem>
                      <MenuItem v-slot="{ active }">
                        <router-link
                          to="/students-feedback"
                          :class="[
                            active
                              ? 'bg-gray-100 text-gray-900'
                              : 'text-gray-700',
                            'block px-1 py-2 text-sm',
                          ]"
                          >Student's feedback</router-link
                        >
                      </MenuItem>
                      <MenuItem v-slot="{ active }">
                        <router-link
                          to="/students-health-home"
                          :class="[
                            active
                              ? 'bg-gray-100 text-gray-900'
                              : 'text-gray-700',
                            'block px-1 py-2 text-sm',
                          ]"
                          >Student's Health Home</router-link
                        >
                      </MenuItem>
                      <MenuItem v-slot="{ active }">
                        <router-link
                          to="/code-of-conduct"
                          :class="[
                            active
                              ? 'bg-gray-100 text-gray-900'
                              : 'text-gray-700',
                            'block px-1 py-2 text-sm',
                          ]"
                        >
                          Code of Conduct</router-link
                        >
                      </MenuItem>
                      <MenuItem v-slot="{ active }">
                        <router-link
                          to="/holidays-list"
                          :class="[
                            active
                              ? 'bg-gray-100 text-gray-900'
                              : 'text-gray-700',
                            'block px-1 py-2 text-sm',
                          ]"
                          >Holiday List</router-link
                        >
                      </MenuItem>
                      <MenuItem v-slot="{ active }">
                        <router-link
                          to="/gallery"
                          :class="[
                            active
                              ? 'bg-gray-100 text-gray-900'
                              : 'text-gray-700',
                            'block px-1 py-2 text-sm',
                          ]"
                          >Photo Gallery
                        </router-link>
                      </MenuItem>
                    </div>
                  </MenuItems>
                </div>
              </Menu>
              <div class="text-center">
                <button class="text-sm font-medium py-2 px-4 rounded">
                  <router-Link to="/library">Library</router-Link>
                </button>
              </div>
  
              <div class="text-center">
                <button class="text-sm font-medium py-2 px-4 rounded">
                  <router-Link to="/contact">Contact</router-Link>
                </button>
              </div>
            </div>
            <div
              class="
                w-full
                bg-blue-700
                text-white text-2xl
                font-semibold
                text-center
              "
            >
              <label
                class="block cursor-pointer right-0 dark:text-white"
                for="mobile_mnu"
                >close</label
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  <style scoped>
  @media only screen and (max-width: 600px) {
    #hidden_mnu {
      display: none;
    }
  }
  @media only screen and (min-width: 600px) {
    #hidden_large {
      display: none;
    }
  }
  
  .mobile_mnu {
    color: red;
  }
  .mobile_menu {
    display: none;
    position: absolute;
    width: 0;
    bottom: -1000px;
    transition-duration: 3s ease-in;
    transition: width 2s;
  }
  #mobile_mnu:checked ~ .mobile_menu {
    display: block;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
  }
  </style>
  
  <script setup>
  import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
  import { ChevronDownIcon } from '@heroicons/vue/solid'
  </script>