scc22/src/components/MainMenu.vue

1356 lines
49 KiB
Vue

<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="/nirf-data"
:class="[
active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
'block px-1 py-2 text-sm',
]"
>NIRF Data</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="/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="/nirf-data"
:class="[
active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
'block px-1 py-2 text-sm',
]"
>NIRF Data</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="/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>