menu
Suvodip Ghosh
parent
452f99b8e7
commit
80cbacaf6a
|
|
@ -9,7 +9,10 @@ declare module '@vue/runtime-core' {
|
|||
export interface GlobalComponents {
|
||||
Footer: typeof import('./src/components/Footer.vue')['default']
|
||||
Header: typeof import('./src/components/Header.vue')['default']
|
||||
Header2: typeof import('./src/components/Header2.vue')['default']
|
||||
MainMenu: typeof import('./src/components/MainMenu.vue')['default']
|
||||
Menu: typeof import('./src/components/Menu.vue')['default']
|
||||
Nav: typeof import('./src/components/Nav.vue')['default']
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
RouterView: typeof import('vue-router')['RouterView']
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="flex flex-col h-screen justify-between">
|
||||
<Header />
|
||||
<Menu />
|
||||
<main>
|
||||
<router-view />
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -14,11 +14,10 @@
|
|||
<br />(Arts and Science)
|
||||
<br />Prafullanagar, Habra, 24Pgs(N) Pin-743268, W.B
|
||||
</div>
|
||||
<MainMenu />
|
||||
<Menu />
|
||||
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
</script>
|
||||
lg:hidden
|
||||
|
|
@ -412,19 +412,7 @@
|
|||
>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"
|
||||
|
|
@ -709,6 +697,12 @@
|
|||
</Menu>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="w-full h-8 bg-blue-700 fixed bottom-0" id="hidden_large">
|
||||
<div>
|
||||
<p></p>
|
||||
|
|
@ -730,7 +724,15 @@
|
|||
>
|
||||
<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">
|
||||
|
|
@ -1077,9 +1079,6 @@
|
|||
>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"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,79 @@
|
|||
<template>
|
||||
<div>
|
||||
<header class="header">
|
||||
<div class="lg:hidden grid grid-cols-6 bg-blue-700 place-items-center text-white">
|
||||
<div class="grid col-span-1 "> <img class="w-16" src="/img/logo3.png" alt=""></div>
|
||||
<div class="grid col-span-4 ">SREE CHAITANYA COLLEGE</div>
|
||||
<div class="grid col-span-1 "><button class="hover:bg-white hover:text-blue-700 rounded-md p-1">Log In</button></div>
|
||||
</div>
|
||||
<div
|
||||
class="hidden lg:block flex flex-cols bg-blue-600 h-48 text-right justify-end text-white text-3xl pt-5 font-semibold pr-12">
|
||||
<img src="/img/logo3.png" alt="Sreechaitanya College " class="absolute left-0 top-0 h-44 w-44 mt-2 ml-14"
|
||||
/>
|
||||
Estd.-1956
|
||||
<br />Sree Chaitanya College,Habra
|
||||
<br />(Arts and Science)
|
||||
<br />Prafullanagar, Habra, 24Pgs(N) Pin-743268, W.B
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<Nav />
|
||||
</div>
|
||||
|
||||
<!-- <div id="navbar">
|
||||
<a class="active" href="#">Home</a>
|
||||
<a href="#">News</a>
|
||||
<a href="#">Contact</a>
|
||||
</div> -->
|
||||
<!--
|
||||
<div class="content">
|
||||
<h3>Sticky Navigation Example</h3>
|
||||
<p>The navbar will stick to the top when you reach its scroll position.</p>
|
||||
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
|
||||
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
|
||||
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
|
||||
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
|
||||
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
|
||||
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
|
||||
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
|
||||
</div> -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
mounted () {
|
||||
window.addEventListener('scroll', this.stickyMenu);
|
||||
},
|
||||
// created () {
|
||||
// window.addEventListener('scroll', this.stickyMenu);
|
||||
// },
|
||||
unmounted () {
|
||||
window.removeEventListener('scroll', this.stickyMenu);
|
||||
},
|
||||
methods: {
|
||||
stickyMenu (event) {
|
||||
|
||||
var navbar = document.getElementById("navbar");
|
||||
var sticky = navbar.offsetTop;
|
||||
if (window.pageYOffset >= sticky) {
|
||||
navbar.classList.add("sticky")
|
||||
console.log(window.pageYOffset)
|
||||
} else {
|
||||
navbar.classList.remove("sticky");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// window.onscroll = function() {myFunction()};
|
||||
|
||||
// var navbar = document.getElementById("navbar");
|
||||
// var sticky = navbar.offsetTop;
|
||||
|
||||
// function myFunction() {
|
||||
// if (window.pageYOffset >= sticky) {
|
||||
// navbar.classList.add("sticky")
|
||||
// } else {
|
||||
// navbar.classList.remove("sticky");
|
||||
// }
|
||||
// }
|
||||
</script>
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
<template>
|
||||
<div class="hidden md:flex container-fluid" id="navbar" >
|
||||
<div class="container mx-auto px-4" >
|
||||
<a class="active" href="/">Home</a>
|
||||
<a class="active" href="/about-us">About</a>
|
||||
<a class="active" href="/notice">Notice</a>
|
||||
<a class="active" href="/library">Library</a>
|
||||
<a class="active" href="/administration">Administration</a>
|
||||
<a class="active" href="/academics">Academics</a>
|
||||
<a class="active" href="/organizations">Organizations</a>
|
||||
<a class="active" href="/students">Students</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
// created () {
|
||||
// window.addEventListener('scroll', this.stickyMenu);
|
||||
// },
|
||||
// unmounted () {
|
||||
// window.removeEventListener('scroll', this.stickyMenu);
|
||||
// },
|
||||
// methods: {
|
||||
// stickyMenu (event) {
|
||||
// var navbar = document.getElementById("navbar");
|
||||
// var sticky = navbar.offsetTop;
|
||||
// if (window.pageYOffset >= sticky) {
|
||||
// navbar.classList.add("sticky")
|
||||
// } else {
|
||||
// navbar.classList.remove("sticky");
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
}
|
||||
// window.onscroll = function() {myFunction()};
|
||||
|
||||
// var navbar = document.getElementById("navbar");
|
||||
// var sticky = navbar.offsetTop;
|
||||
|
||||
// function myFunction() {
|
||||
// if (window.pageYOffset >= sticky) {
|
||||
// navbar.classList.add("sticky")
|
||||
// } else {
|
||||
// navbar.classList.remove("sticky");
|
||||
// }
|
||||
// }
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
|
||||
}
|
||||
|
||||
.header {
|
||||
background-color: #ffffff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#navbar {
|
||||
overflow: hidden;
|
||||
background-color: #1d4ed8;
|
||||
}
|
||||
|
||||
#navbar a {
|
||||
float: left;
|
||||
display: block;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
padding: 14px 16px;
|
||||
text-decoration: none;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#navbar a:hover {
|
||||
background-color: #1e40af;
|
||||
color: rgb(255, 255, 255);
|
||||
}
|
||||
|
||||
/* #navbar a.active {
|
||||
background-color: #1e40af;
|
||||
color: white;
|
||||
} */
|
||||
|
||||
.content {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.sticky {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sticky + .content {
|
||||
padding-top: 60px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue