scc-astro/src/components/temp.vue

1349 lines
46 KiB
Vue

<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>