menu

components.d.ts

@@ -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']
   }

src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col h-screen justify-between">
-   <Header />
+   <Menu />
     <main>
       <router-view />
     </main>

src/components/Header.vue

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

src/components/MainMenu.vue

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

src/components/Menu.vue

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

src/components/Nav.vue

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