From 80cbacaf6a10d60efca8305cc158ec05bb0f0881 Mon Sep 17 00:00:00 2001
From: Suvodip Ghosh <suvo@ns9b.siliconpin.com>
Date: Mon, 13 Feb 2023 19:48:43 +0530
Subject: [PATCH] menu

---
 components.d.ts             |  3 ++
 src/App.vue                 |  2 +-
 src/components/Header.vue   |  3 +-
 src/components/MainMenu.vue | 33 ++++++-------
 src/components/Menu.vue     | 79 ++++++++++++++++++++++++++++++
 src/components/Nav.vue      | 98 +++++++++++++++++++++++++++++++++++++
 6 files changed, 198 insertions(+), 20 deletions(-)
 create mode 100644 src/components/Menu.vue
 create mode 100644 src/components/Nav.vue

diff --git a/components.d.ts b/components.d.ts
index 7e4a142..7b139a5 100644
--- a/components.d.ts
+++ b/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']
   }
diff --git a/src/App.vue b/src/App.vue
index 4491cd4..efd4abc 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col h-screen justify-between">
-   <Header />
+   <Menu />
     <main>
       <router-view />
     </main>
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 102255a..cebd78c 100644
--- a/src/components/Header.vue
+++ b/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
\ No newline at end of file
diff --git a/src/components/MainMenu.vue b/src/components/MainMenu.vue
index 3349415..fb1292b 100644
--- a/src/components/MainMenu.vue
+++ b/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"
diff --git a/src/components/Menu.vue b/src/components/Menu.vue
new file mode 100644
index 0000000..c50cc2f
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/Nav.vue b/src/components/Nav.vue
new file mode 100644
index 0000000..a68d41d
--- /dev/null
+++ b/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>