
<template>
    <div class="container-fluid bg-blue-900">
      <div
        id="hidden_mnu"
        class="container mx-auto 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
          ">
            <a
              href="/"
              :class="[
                active ? 'bg-gray-100 text-gray-100' : 'text-gray-50','block px-1 py-2 text-sm text-white',]">Home </a>
          </MenuItem>
        </Menu>
        <Menu>
          <MenuItem v-slot="{ active }"
          class="
            text-gray-100
            ring-1 ring-black ring-opacity-5
            hover:text-blue-800
          ">
            <a
              href="/about-us"
              :class="[
                active ? 'bg-gray-100 text-gray-100' : 'text-gray-50',
                'block px-1 py-2 text-sm',
              ]"
            >
              About </a
            >
          </MenuItem>
        </Menu>
        <Menu>
          <MenuItem v-slot="{ active }"
          class="
            text-gray-100
            ring-1 ring-black ring-opacity-5
            hover:text-blue-800
          ">
            <a
              href="/notice"
              :class="[
                active ? 'bg-gray-100 text-gray-100' : 'text-gray-50',
                'block px-1 py-2 text-sm',
              ]"
            >
              Notice </a
            >
          </MenuItem>
        </Menu>
        <Menu>
          <MenuItem v-slot="{ active }"
          class="
            text-gray-100
            ring-1 ring-black ring-opacity-5
            hover:text-blue-800
          ">
            <a
              href="/library"
              :class="[
                active ? 'bg-gray-100 text-gray-100' : 'text-gray-50',
                'block px-1 py-2 text-sm',
              ]"
            >
              Library </a
            >
          </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 }">
                  <a
                    href="/governing-body"
                    :class="[
                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                      'block px-1 py-2 text-sm',
                    ]"
                  >
                    Governing Body</a
                  >
                </MenuItem>
                <MenuItem v-slot="{ active }">
                  <a
                    href="/composition-of-gb"
                    :class="[
                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                      'block px-1 py-2 text-sm',
                    ]"
                    >Composition of GB</a
                  >
                </MenuItem>
                <MenuItem v-slot="{ active }">
                  <a
                    href="/staff"
                    :class="[
                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                      'block px-1 py-2 text-sm',
                    ]"
                    >Staff</a
                  >
                </MenuItem>
                <MenuItem v-slot="{ active }">
                  <a
                    href="/working-hour"
                    :class="[
                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                      'block px-1 py-2 text-sm',
                    ]"
                    >Working Hour</a
                  >
                </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 }">
                  <a
                    href="/departments"
                    :class="[
                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                      'block px-1 py-2 text-sm',
                    ]"
                    >Departments and Faculty</a
                  >
                </MenuItem>
                <MenuItem v-slot="{ active }">
                        <a
                          href="admission"
                          :class="[
                            active
                              ? 'bg-gray-100 text-gray-900'
                              : 'text-gray-700',
                            'block px-1 py-2 text-sm',
                          ]"
                          >Admission</a
                        >
                      </MenuItem>
                <MenuItem v-slot="{ active }">
                  <a
                    href="/librarians"
                    :class="[
                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                      'block px-1 py-2 text-sm',
                    ]"
                    >Librarians</a
                  >
                </MenuItem>
                <MenuItem v-slot="{ active }">
                  <a
                    href="/course-offered"
                    :class="[
                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                      'block px-1 py-2 text-sm',
                    ]"
                    >Course Offered
                  </a>
                </MenuItem>
                <MenuItem v-slot="{ active }">
                  <a
                    href="/subject-combinantionhons"
                    :class="[
                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                      'block px-1 py-2 text-sm',
                    ]"
                    >Subject Combinantion(Hons)</a
                  >
                </MenuItem>
                <MenuItem v-slot="{ active }">
                  <a
                    href="/subject-combinantiongen"
                    :class="[
                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                      'block px-1 py-2 text-sm',
                    ]"
                    >Subject Combinantion(Gen)
                  </a>
                </MenuItem>
                <MenuItem v-slot="{ active }">
                  <a
                    href="/intake-capacity"
                    :class="[
                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                      'block px-1 py-2 text-sm',
                    ]"
                    >Intake Capacity</a
                  >
                </MenuItem>
                <MenuItem v-slot="{ active }">
                  <a
                    href="/academic-calendar"
                    :class="[
                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                      'block px-1 py-2 text-sm',
                    ]"
                  >
                    Academic Calendar
                  </a>
                </MenuItem>
                <MenuItem v-slot="{ active }">
                  <a
                    href="/prospectus"
                    :class="[
                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                      'block px-1 py-2 text-sm',
                    ]"
                    >Prospectus</a
                  >
                </MenuItem>
                <MenuItem v-slot="{ active }">
                  <a
                    href="Marks-Distribution"
                    :class="[
                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                      'block px-1 py-2 text-sm',
                    ]"
                  >
                    Marks Distribution</a
                  >
                </MenuItem>
                <MenuItem v-slot="{ active }">
                  <a
                    href="/result"
                    :class="[
                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                      'block px-1 py-2 text-sm',
                    ]"
                    >Result</a
                  >
                </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 }">
                  <a
                    href="/iqac"
                    :class="[
                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                      'block px-1 py-2 text-sm',
                    ]"
                    >IQAC</a
                  >
                </MenuItem>
                <MenuItem v-slot="{ active }">
                  <a
                    href="/naac"
                    :class="[
                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                      'block px-1 py-2 text-sm',
                    ]"
                    >NAAC</a
                  >
                </MenuItem>
                <MenuItem v-slot="{ active }">
                  <a
                    href="/nirf-data"
                    :class="[
                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                      'block px-1 py-2 text-sm',
                    ]"
                    >NIRF </a
                  >
                </MenuItem>
                <MenuItem v-slot="{ active }">
                  <a
                    href="/aqar"
                    :class="[
                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                      'block px-1 py-2 text-sm',
                    ]"
                    >AQAR</a
                  >
                </MenuItem>

                <MenuItem v-slot="{ active }">
                  <a
                    href="/students-union"
                    :class="[
                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                      'block px-1 py-2 text-sm',
                    ]"
                    >Student's Union</a
                  >
                </MenuItem>
                <MenuItem v-slot="{ active }">
                  <a
                    href="/teachers-council"
                    :class="[
                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                      'block px-1 py-2 text-sm',
                    ]"
                    >Teacher's Council</a
                  >
                </MenuItem>
                <MenuItem v-slot="{ active }">
                  <a
                    href="/alumni-association"
                    :class="[
                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                      'block px-1 py-2 text-sm',
                    ]"
                    >Alumni Association</a
                  >
                </MenuItem>
                <MenuItem v-slot="{ active }">
                  <a
                    href=""
                    :class="[
                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                      'block px-1 py-2 text-sm',
                    ]"
                    ></a
                  >
                </MenuItem>
                <MenuItem v-slot="{ active }">
                  <a
                    href="/gallery"
                    :class="[
                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                      'block px-1 py-2 text-sm',
                    ]"
                    >Image Gallery</a
                  >
                </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 }">
                  <a
                    href="/facilities"
                    :class="[
                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                      'block px-1 py-2 text-sm',
                    ]"
                    >Facilities</a
                  >
                </MenuItem>
  
                <MenuItem v-slot="{ active }">
                  <a
                    href="/rti"
                    :class="[
                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                      'block px-1 py-2 text-sm',
                    ]"
                    >RTI</a
                  >
                </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 }">
                  <a
                    href="/admission"
                    :class="[
                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                      'block px-1 py-2 text-sm',
                    ]"
                    >Admission</a
                  >
                </MenuItem>
                <MenuItem v-slot="{ active }">
                  <a
                    href="/activities"
                    :class="[
                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                      'block px-1 py-2 text-sm',
                    ]"
                    >Activities</a
                  >
                </MenuItem>
                <MenuItem v-slot="{ active }">
                  <a
                    href="/students-union"
                    :class="[
                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                      'block px-1 py-2 text-sm',
                    ]"
                    >Student's Union</a
                  >
                </MenuItem>
                <MenuItem v-slot="{ active }">
                  <a
                    href="/student-grievance"
                    :class="[
                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                      'block px-1 py-2 text-sm',
                    ]"
                  >
                    Student Suggestions/Grievance</a
                  >
                </MenuItem>
                <MenuItem v-slot="{ active }">
                  <a
                    href="/students-feedback"
                    :class="[
                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                      'block px-1 py-2 text-sm',
                    ]"
                    >Student's feedback</a
                  >
                </MenuItem>
                <MenuItem v-slot="{ active }">
                  <a
                    href="/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</a
                  >
                </MenuItem>
                <MenuItem v-slot="{ active }">
                  <a
                    href="/code-of-conduct"
                    :class="[
                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                      'block px-1 py-2 text-sm',
                    ]"
                  >
                    Code of Conduct</a
                  >
                </MenuItem>
                <MenuItem v-slot="{ active }">
                  <a
                    href="/holidays-list"
                    :class="[
                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                      'block px-1 py-2 text-sm',
                    ]"
                    >Holiday List</a
                  >
                </MenuItem>
                <MenuItem v-slot="{ active }">
                  <a
                    href="/gallery"
                    :class="[
                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                      'block px-1 py-2 text-sm',
                    ]"
                    >Photo Gallery
                  </a>
                </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
          ">
            <a
              href="/contact-us"
              :class="[
                active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                'block px-1 py-2 text-sm',
              ]"
            >
              Contact </a
            >
          </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">
            
            
            
            





            <div class="bg-white">
              <div class="text-center">
                <button class="text-sm font-medium py-2 px-4 rounded">
                  <a href="/">Home</a>
                </button>
              </div>
              <div class="text-center">
                <button class="text-sm font-medium py-2 px-4 rounded">
                  <a href="/about-us">About Us</a>
                </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 }">
                        <a
                          href="/governing-body"
                          :class="[
                            active
                              ? 'bg-gray-100 text-gray-900'
                              : 'text-gray-700',
                            'block px-1 py-2 text-sm',
                          ]"
                        >
                          Governing Body</a
                        >
                      </MenuItem>
                      <MenuItem v-slot="{ active }">
                        <a
                          href="/composition-of-gb"
                          :class="[
                            active
                              ? 'bg-gray-100 text-gray-900'
                              : 'text-gray-700',
                            'block px-1 py-2 text-sm',
                          ]"
                          >Composition of GB</a
                        >
                      </MenuItem>
                      <MenuItem v-slot="{ active }">
                        <a
                          href="/staff"
                          :class="[
                            active
                              ? 'bg-gray-100 text-gray-900'
                              : 'text-gray-700',
                            'block px-1 py-2 text-sm',
                          ]"
                          >Staff</a
                        >
                      </MenuItem>
                      <MenuItem v-slot="{ active }">
                        <a
                          href="/working-hour"
                          :class="[
                            active
                              ? 'bg-gray-100 text-gray-900'
                              : 'text-gray-700',
                            'block px-1 py-2 text-sm',
                          ]"
                          >Working Hour</a
                        >
                      </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 }">
                        <a
                          href="#"
                          :class="[
                            active
                              ? 'bg-gray-100 text-gray-900'
                              : 'text-gray-700',
                            'block px-1 py-2 text-sm',
                          ]"
                          >Departments and Faculty</a
                        >
                      </MenuItem>
                      <MenuItem v-slot="{ active }">
                        <a
                          href="ug-admission"
                          :class="[
                            active
                              ? 'bg-gray-100 text-gray-900'
                              : 'text-gray-700',
                            'block px-1 py-2 text-sm',
                          ]"
                          >UG Admission</a
                        >
                      </MenuItem>
                      <MenuItem v-slot="{ active }">
                        <a
                          href="/librarians"
                          :class="[
                            active
                              ? 'bg-gray-100 text-gray-900'
                              : 'text-gray-700',
                            'block px-1 py-2 text-sm',
                          ]"
                          >Librarians</a
                        >
                      </MenuItem>
                      <MenuItem v-slot="{ active }">
                        <a
                          href="/course-offered"
                          :class="[
                            active
                              ? 'bg-gray-100 text-gray-900'
                              : 'text-gray-700',
                            'block px-1 py-2 text-sm',
                          ]"
                          >Course Offered
                        </a>
                      </MenuItem>
                      <MenuItem v-slot="{ active }">
                        <a
                          href="/subject-combinantionhons"
                          :class="[
                            active
                              ? 'bg-gray-100 text-gray-900'
                              : 'text-gray-700',
                            'block px-1 py-2 text-sm',
                          ]"
                          >Subject Combinantion(Hons)</a
                        >
                      </MenuItem>
                      <MenuItem v-slot="{ active }">
                        <a
                          href="/Subject-combinantiongen"
                          :class="[
                            active
                              ? 'bg-gray-100 text-gray-900'
                              : 'text-gray-700',
                            'block px-1 py-2 text-sm',
                          ]"
                          >Subject Combinantion(Gen)
                        </a>
                      </MenuItem>
                      <MenuItem v-slot="{ active }">
                        <a
                          href="/intake-capacity"
                          :class="[
                            active
                              ? 'bg-gray-100 text-gray-900'
                              : 'text-gray-700',
                            'block px-1 py-2 text-sm',
                          ]"
                          >Intake Capacity</a
                        >
                      </MenuItem>
                      <MenuItem v-slot="{ active }">
                        <a
                          href="/academic-calendar"
                          :class="[
                            active
                              ? 'bg-gray-100 text-gray-900'
                              : 'text-gray-700',
                            'block px-1 py-2 text-sm',
                          ]"
                        >
                          Academic Calendar
                        </a>
                      </MenuItem>
                      <MenuItem v-slot="{ active }">
                        <a
                          href="/prospectus"
                          :class="[
                            active
                              ? 'bg-gray-100 text-gray-900'
                              : 'text-gray-700',
                            'block px-1 py-2 text-sm',
                          ]"
                          >Prospectus</a
                        >
                      </MenuItem>
                      <MenuItem v-slot="{ active }">
                        <a
                          href="Marks-Distributionyarn"
                          :class="[
                            active
                              ? 'bg-gray-100 text-gray-900'
                              : 'text-gray-700',
                            'block px-1 py-2 text-sm',
                          ]"
                        >
                          Marks Distribution</a
                        >
                      </MenuItem>
                      <MenuItem v-slot="{ active }">
                        <a
                          href="/result"
                          :class="[
                            active
                              ? 'bg-gray-100 text-gray-900'
                              : 'text-gray-700',
                            'block px-1 py-2 text-sm',
                          ]"
                          >Result</a
                        >
                      </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 }">
                        <a
                          href="/iqac"
                          :class="[
                            active
                              ? 'bg-gray-100 text-gray-900'
                              : 'text-gray-700',
                            'block px-1 py-2 text-sm',
                          ]"
                          >IQAC</a
                        >
                      </MenuItem>
                      <MenuItem v-slot="{ active }">
                  <a
                    href="/naac"
                    :class="[
                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                      'block px-1 py-2 text-sm',
                    ]"
                    >NAAC</a
                  >
                </MenuItem>
                <MenuItem v-slot="{ active }">
                  <a
                    href="/nirf-data"
                    :class="[
                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                      'block px-1 py-2 text-sm',
                    ]"
                    >NIRF</a
                  >
                </MenuItem>
                <MenuItem v-slot="{ active }">
                  <a
                    href="/aqar"
                    :class="[
                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                      'block px-1 py-2 text-sm',
                    ]"
                    >AQAR</a
                  >
                </MenuItem>
                      <MenuItem v-slot="{ active }">
                        <a
                          href="/students-union"
                          :class="[
                            active
                              ? 'bg-gray-100 text-gray-900'
                              : 'text-gray-700',
                            'block px-1 py-2 text-sm',
                          ]"
                          >Student's Union</a
                        >
                      </MenuItem>
                      <MenuItem v-slot="{ active }">
                        <a
                          href="/alumni-association"
                          :class="[
                            active
                              ? 'bg-gray-100 text-gray-900'
                              : 'text-gray-700',
                            'block px-1 py-2 text-sm',
                          ]"
                          >Alumni Association</a
                        >
                      </MenuItem>
                      <MenuItem v-slot="{ active }">
                        <a
                          href="/activity-gallery"
                          :class="[
                            active
                              ? 'bg-gray-100 text-gray-900'
                              : 'text-gray-700',
                            'block px-1 py-2 text-sm',
                          ]"
                          >Activity Gallery</a
                        >
                      </MenuItem>
                      <MenuItem v-slot="{ active }">
                        <a
                          href="/gallery"
                          :class="[
                            active
                              ? 'bg-gray-100 text-gray-900'
                              : 'text-gray-700',
                            'block px-1 py-2 text-sm',
                          ]"
                          >Image Gallery</a
                        >
                      </MenuItem>
                    </div>
                  </MenuItems>
                </div>
              </Menu>
              <div class="text-center">
                <button class="text-sm font-medium py-2 px-4 rounded">
                  <a href="/facilities">Facilities</a>
                </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 }">
                        <a
                          href="/admission"
                          :class="[
                            active
                              ? 'bg-gray-100 text-gray-900'
                              : 'text-gray-700',
                            'block px-1 py-2 text-sm',
                          ]"
                          >Admission</a
                        >
                      </MenuItem>
                      <MenuItem v-slot="{ active }">
                        <a
                          href="/activities"
                          :class="[
                            active
                              ? 'bg-gray-100 text-gray-900'
                              : 'text-gray-700',
                            'block px-1 py-2 text-sm',
                          ]"
                          >Activities</a
                        >
                      </MenuItem>
                      <MenuItem v-slot="{ active }">
                        <a
                          href="/students-union"
                          :class="[
                            active
                              ? 'bg-gray-100 text-gray-900'
                              : 'text-gray-700',
                            'block px-1 py-2 text-sm',
                          ]"
                          >Student's Union</a
                        >
                      </MenuItem>
                      <MenuItem v-slot="{ active }">
                        <a
                          href="/student-grievance"
                          :class="[
                            active
                              ? 'bg-gray-100 text-gray-900'
                              : 'text-gray-700',
                            'block px-1 py-2 text-sm',
                          ]"
                        >
                          Student Suggestions/Grievance</a
                        >
                      </MenuItem>
                      <MenuItem v-slot="{ active }">
                        <a
                          href="/students-feedback"
                          :class="[
                            active
                              ? 'bg-gray-100 text-gray-900'
                              : 'text-gray-700',
                            'block px-1 py-2 text-sm',
                          ]"
                          >Student's feedback</a
                        >
                      </MenuItem>
                      <MenuItem v-slot="{ active }">
                        <a
                          href="/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</a
                        >
                      </MenuItem>
                      <MenuItem v-slot="{ active }">
                        <a
                          href="/code-of-conduct"
                          :class="[
                            active
                              ? 'bg-gray-100 text-gray-900'
                              : 'text-gray-700',
                            'block px-1 py-2 text-sm',
                          ]"
                        >
                          Code of Conduct</a
                        >
                      </MenuItem>
                      <MenuItem v-slot="{ active }">
                        <a
                          href="/holidays-list"
                          :class="[
                            active
                              ? 'bg-gray-100 text-gray-900'
                              : 'text-gray-700',
                            'block px-1 py-2 text-sm',
                          ]"
                          >Holiday List</a
                        >
                      </MenuItem>
                      <MenuItem v-slot="{ active }">
                        <a
                          href="/gallery"
                          :class="[
                            active
                              ? 'bg-gray-100 text-gray-900'
                              : 'text-gray-700',
                            'block px-1 py-2 text-sm',
                          ]"
                          >Photo Gallery
                        </a>
                      </MenuItem>
                    </div>
                  </MenuItems>
                </div>
              </Menu>
              <div class="text-center">
                <button class="text-sm font-medium py-2 px-4 rounded">
                  <a href="/library">Library</a>
                </button>
              </div>
  
              <div class="text-center">
                <button class="text-sm font-medium py-2 px-4 rounded">
                  <a href="/contact">Contact</a>
                </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>