changed reloading to ajax content replace

assets/css/styles.css

@@ -913,6 +913,10 @@ select {
   --tw-backdrop-sepia: ;
 }
 
+.visible {
+  visibility: visible;
+}
+
 .fixed {
   position: fixed;
 }
@@ -1602,6 +1606,14 @@ select {
   --tw-ring-color: rgb(55 65 81 / var(--tw-ring-opacity));
 }
 
+.transition {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 /* Hide scrollbar for Chrome, Safari and Opera */
 .no-scrollbar::-webkit-scrollbar {
   display: none;
@@ -2006,7 +2018,16 @@ body.login {
 }
 
 #content-container {
-  transition: opacity 0.5s ease-in-out;
+  transition: opacity 0.3s ease-in-out; /* Adjust the duration and timing function as needed */
+}
+
+.active #content-container {
+  opacity: 0; /* Initial opacity when collapsing */
+  transition: opacity 0.3s ease-in-out; /* Adjust the duration and timing function as needed */
+}
+
+.active #content-container.visible {
+  opacity: 1; /* Opacity when expanding */
 }
 
 #footer-nav.out-of-view {

assets/js/index.js

@@ -15,9 +15,22 @@ __webpack_require__.r(__webpack_exports__);
 class CollapsePanel {
   constructor() {
     this.toggles = document.querySelectorAll('.accordion-toggle');
-    this.toggleCollapse();
+    this.init();
   }
-  toggleCollapse() {
+  init() {
+    document.addEventListener('DOMContentLoaded', () => {
+      this.addToggleCollapseListener();
+    });
+  }
+  addToggleCollapseListener() {
+    this.toggles.forEach(toggle => {
+      toggle.addEventListener('click', () => {
+        toggle.parentNode.parentNode.classList.toggle('active');
+      });
+    });
+  }
+  addNewToggleCollapseListener() {
+    this.toggles = document.querySelectorAll('#content-container .accordion-toggle');
     this.toggles.forEach(toggle => {
       toggle.addEventListener('click', () => {
         toggle.parentNode.parentNode.classList.toggle('active');
@@ -79,38 +92,66 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
+/* harmony import */ var _CollapsePanel__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./CollapsePanel */ "./src/modules/CollapsePanel.js");
+ // Import the CollapsePanel class
+
 class PageTransitions {
   constructor() {
     this.init();
-    this.links = document.querySelectorAll('a');
-    console.log(this.links);
   }
   init() {
     document.addEventListener('DOMContentLoaded', () => {
-      this.addClickListener();
-      console.log('The DOM has loaded');
+      this.addLinkClickListener();
     });
   }
-  addClickListener() {
+  addLinkClickListener() {
+    this.links = document.querySelectorAll('a');
     this.links.forEach(link => {
       link.addEventListener('click', e => {
+        e.preventDefault();
         if (this.isExternalLink(link)) {
           link.setAttribute('target', '_blank');
         }
-        e.preventDefault();
+        this.loadContent(link.getAttribute('href'), 'content-container');
       });
     });
   }
-  loadContent(targetUrl) {
+  addNewLinkClickListener() {
+    this.newlinks = document.querySelectorAll('#content-container a');
+    console.log(this.newlinks);
+    this.newlinks.forEach(link => {
+      link.addEventListener('click', e => {
+        e.preventDefault();
+        if (this.isExternalLink(link)) {
+          link.setAttribute('target', '_blank');
+        }
+        this.loadContent(link.getAttribute('href'), 'content-container');
+      });
+    });
+  }
+  loadContent(targetUrl, elementId) {
     fetch(targetUrl).then(response => response.text()).then(data => {
-      this.updateContent(data);
+      this.updateContent(data, elementId);
       history.pushState(null, null, targetUrl);
     }).catch(error => console.error('Error fetching content:', error));
   }
-  updateContent(data) {
+  updateContent(data, elementId) {
     const contentContainer = document.getElementById('content-container');
     const parsedData = new DOMParser().parseFromString(data, 'text/html');
-    contentContainer.innerHTML = parsedData.getElementById('content').innerHTML;
+    const targetElement = parsedData.getElementById(elementId);
+    if (targetElement) {
+      const newContent = targetElement.innerHTML;
+
+      // If you want to replace the content instead of appending:
+      contentContainer.innerHTML = newContent;
+
+      // Create an instance of CollapsePanel and call toggleCollapse
+      this.collapsePanel = new _CollapsePanel__WEBPACK_IMPORTED_MODULE_0__["default"]();
+      this.collapsePanel.addNewToggleCollapseListener();
+      this.addNewLinkClickListener();
+    } else {
+      console.error(`Element with ID '${elementId}' not found in the fetched data`);
+    }
   }
 
   // Function to check if a link is external

header.php

@@ -9,158 +9,13 @@
     // Start or resume the session
     session_start();
     wp_head();
-    include(get_theme_file_path('/includes/front-end/menu_data.php'));
-    require_once(get_theme_file_path('/includes/back-end/helper_functions.php'));
 
     ?>
 </head>
 
-<body id="content-container" class="h-screen overflow-hidden bg-blue-500" <?php body_class(); ?>>
+<body class="h-screen overflow-hidden bg-blue-500" <?php body_class(); ?>>
     <?php wp_body_open(); ?>
 
-    <main class="h-screen overflow-hidden">
+    <?php get_template_part('/templates/partials/navigation'); ?>
 
-
-        <!-- Header -->
-        <section id="header-nav" class="w-full absolute bg-blue-500 top-0 z-50 <?php if (!isset($_SESSION['splash_shown'])) {
-                                                                                    echo 'out-of-view';
-                                                                                } else echo 'in-view' ?>">
-            <header class="flex items-center justify-between text-center px-4 py-2 space-x-2 lg:space-x-8 bg-blue-800">
-
-                <!-- Header Logo -->
-                <a class="relative z-50 flex items-center space-x-4" href="<?php echo get_site_url(); ?>">
-                    <img width="40px" src="<?php echo get_template_directory_uri(); ?>/assets/images/logos/header__logo.png" alt="NAN Logo">
-                    <h1 class="font-bold hidden lg:flex text-white text-2xl">NAN Student Handbook</h1>
-                </a>
-
-                <!-- Header Search  -->
-                <?php get_search_form(); ?>
-
-                <!-- Header Buttons -->
-                <div class="text-white">
-                    <button id="toggle-nav" class="toggle-menu"> <i></i> <i></i><i></i> </button>
-                </div>
-
-            </header>
-        </section>
-
-        <!-- Bottom Menu -->
-        <section id="footer-nav" class="w-full text-white absolute bottom-0 z-50 text-center pt-4 pb-8 bg-blue-800 <?php if (!isset($_SESSION['splash_shown'])) {
-                                                                                                                        echo 'out-of-view';
-                                                                                                                    } else echo 'in-view' ?>">
-            <ul class="lg:max-w-3xl mx-auto text-3xl grid grid-cols-6">
-
-                <!-- Menu Icons Loop -->
-                <?php foreach ($menuData as $page) { ?>
-
-                    <li>
-                        <a href="<?php echo get_site_url('/') . '/' . $page['slug'];  ?>">
-                            <i class="<?php echo $page['bootstrap_icon'] ?> text-2xl" aria-hidden="true"></i>
-                        </a>
-                    </li>
-
-                <?php } ?>
-
-            </ul>
-        </section>
-
-        <!-- Slide Out Section -->
-        <section id="slide-out-menu" class="fixed z-30 bg-blue-900 w-11/12 sm:w-3/5 lg:w-2/5 xl:w-4/12 2xl:w-3/12 h-full px-2">
-
-            <div class="h-full space-y-8 overflow-x-hidden overflow-y-scroll no-scrollbar pt-24 pb-28">
-
-                <!-- Option/Settings Icon -->
-                <div class="w-full px-4 flex justify-end text-white">
-                    <button><i class="text-2xl bi bi-gear-fill"></i></button>
-                </div>
-
-                <!-- Menu Section -->
-                <nav>
-
-                    <!-- Primary Menu -->
-
-                    <ul role="list" class="text-white space-y-2">
-
-                        <!-- Menu Loop -->
-                        <?php
-                        $pages = get_pages_as_array();
-
-                        foreach ($pages as $page) {
-
-                            $pageID = $page['page']->ID;
-                            $pageTitle = $page['page']->post_title;
-                            $pageSlug = $page['page']->post_name;
-                            $pageBG = $page['page']->post_name . '.png';
-                            $pageBootstrapIcon = get_field('bootstrap_icon', $page['page']->ID);
-
-                        ?>
-
-                            <li class="accordion">
-                                <div class="flex px-2 hover:bg-gray-800 rounded-md justify-between">
-                                    <a href="<?php echo get_site_url() . '/' . $pageSlug;  ?>" class="gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold flex items-center align-middle">
-                                        <i class="<?php echo $pageBootstrapIcon ?> text-2xl" aria-hidden="true"></i>
-                                        <p><?php echo $pageTitle ?></p>
-                                    </a>
-
-                                    <?php if ($page['subpages']) { ?>
-                                        <button class="accordion-toggle">
-                                            <i class="fas fa-chevron-down items-center ml-auto rounded-md bg-gray-900 px-2.5 py-2 text-white ring-1 ring-inset ring-gray-700" aria-hidden="true"></i>
-                                            <i class="fas fa-times items-center ml-auto rounded-md bg-gray-900 px-3 py-2 text-white ring-1 ring-inset ring-gray-700" aria-hidden="true"></i>
-                                        </button>
-                                    <?php } ?>
-
-                                </div>
-                                <ul class="accordion-content space-y-2">
-                                    <?php foreach ($page['subpages'] as $subpage) {
-
-                                        $subpageID = $subpage->ID;
-                                        $subpageTitle = $subpage->post_title;
-                                        $subpageSlug = $subpage->post_name;
-                                        $subpageBG = $subpage->post_name . '.png';
-                                        $subpageBootstrapIcon = get_field('bootstrap_icon', $subpage->ID);
-
-                                    ?>
-                                        <li class="p-2">
-                                            <a href="<?php echo get_site_url() . '/' . $pageSlug . '/' . $subpageSlug ?>" class="flex space-x-2 items-center"><i class="bi-caret-right-fill"></i>
-                                                <p><?php echo $subpageTitle ?></p>
-                                            </a>
-                                        </li>
-
-                                    <?php } ?>
-                                </ul>
-                            </li>
-
-                            <!-- Horizontal Rule -->
-                            <div class="horizontal-rule w-4/5 mt-4 mx-auto bg-gray-800"></div>
-
-                        <?php } ?>
-
-                    </ul>
-
-
-                </nav>
-
-            </div>
-
-        </section>
-
-        <?php
-
-        // Check if a flag is set in the session to indicate that the code has already run
-        if (!isset($_SESSION['splash_shown'])) {
-
-            $_SESSION['splash_shown'] = true; ?>
-
-
-            <!-- Splash Screen Content-->
-            <section id="splash-screen" class="absolute w-full bottom-0 flex flex-col h-screen items-center justify-center">
-
-                <div class="space-y-8 px-4 text-white flex flex-col justify-center items-center">
-                    <img class="w-56" src="<?php echo get_template_directory_uri(); ?>/assets/images/logos/logo-white.png" alt="Splash Logo">
-                    <h1 class="uppercase text-center font-bold text-xl">A student handbook for post secondary transitions</h1>
-                    <button id="app-enter" class="bg-blue-800 shadow-sm shadow-gray-50 px-12 py-4 rounded-md"><i class="bi bi-box-arrow-in-right pr-4"></i>Enter</button>
-                </div>
-
-            </section>
-
-        <?php } ?>
+    <main id="content-container" class="h-screen overflow-hidden">

templates/partials/navigation.php

@@ -0,0 +1,152 @@
+ <?php
+
+  include(get_theme_file_path('/includes/front-end/menu_data.php'));
+  require_once(get_theme_file_path('/includes/back-end/helper_functions.php'));
+
+  ?>
+
+ <!-- Header -->
+ <section id="header-nav" class="w-full absolute bg-blue-500 top-0 z-50 <?php if (!isset($_SESSION['splash_shown'])) {
+                                                                          echo 'out-of-view';
+                                                                        } else echo 'in-view' ?>">
+   <header class="flex items-center justify-between text-center px-4 py-2 space-x-2 lg:space-x-8 bg-blue-800">
+
+     <!-- Header Logo -->
+     <a class="relative z-50 flex items-center space-x-4" href="<?php echo get_site_url(); ?>">
+       <img width="40px" src="<?php echo get_template_directory_uri(); ?>/assets/images/logos/header__logo.png" alt="NAN Logo">
+       <h1 class="font-bold hidden lg:flex text-white text-2xl">NAN Student Handbook</h1>
+     </a>
+
+     <!-- Header Search  -->
+     <?php get_search_form(); ?>
+
+     <!-- Header Buttons -->
+     <div class="text-white">
+       <button id="toggle-nav" class="toggle-menu"> <i></i> <i></i><i></i> </button>
+     </div>
+
+   </header>
+ </section>
+
+ <!-- Bottom Menu -->
+ <section id="footer-nav" class="w-full text-white absolute bottom-0 z-50 text-center pt-4 pb-8 bg-blue-800 <?php if (!isset($_SESSION['splash_shown'])) {
+                                                                                                              echo 'out-of-view';
+                                                                                                            } else echo 'in-view' ?>">
+   <ul class="lg:max-w-3xl mx-auto text-3xl grid grid-cols-6">
+
+     <!-- Menu Icons Loop -->
+     <?php foreach ($menuData as $page) { ?>
+
+       <li>
+         <a href="<?php echo get_site_url('/') . '/' . $page['slug'];  ?>">
+           <i class="<?php echo $page['bootstrap_icon'] ?> text-2xl" aria-hidden="true"></i>
+         </a>
+       </li>
+
+     <?php } ?>
+
+   </ul>
+ </section>
+
+ <!-- Slide Out Section -->
+ <section id="slide-out-menu" class="fixed z-30 bg-blue-900 w-11/12 sm:w-3/5 lg:w-2/5 xl:w-4/12 2xl:w-3/12 h-full px-2">
+
+   <div class="h-full space-y-8 overflow-x-hidden overflow-y-scroll no-scrollbar pt-24 pb-28">
+
+     <!-- Option/Settings Icon -->
+     <div class="w-full px-4 flex justify-end text-white">
+       <button><i class="text-2xl bi bi-gear-fill"></i></button>
+     </div>
+
+     <!-- Menu Section -->
+     <nav>
+
+       <!-- Primary Menu -->
+
+       <ul role="list" class="text-white space-y-2">
+
+         <!-- Menu Loop -->
+         <?php
+          $pages = get_pages_as_array();
+
+          foreach ($pages as $page) {
+
+            $pageID = $page['page']->ID;
+            $pageTitle = $page['page']->post_title;
+            $pageSlug = $page['page']->post_name;
+            $pageBG = $page['page']->post_name . '.png';
+            $pageBootstrapIcon = get_field('bootstrap_icon', $page['page']->ID);
+
+          ?>
+
+           <li class="accordion">
+             <div class="flex px-2 hover:bg-gray-800 rounded-md justify-between">
+               <a href="<?php echo get_site_url() . '/' . $pageSlug;  ?>" class="gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold flex items-center align-middle">
+                 <i class="<?php echo $pageBootstrapIcon ?> text-2xl" aria-hidden="true"></i>
+                 <p><?php echo $pageTitle ?></p>
+               </a>
+
+               <?php if ($page['subpages']) { ?>
+                 <button class="accordion-toggle">
+                   <i class="fas fa-chevron-down items-center ml-auto rounded-md bg-gray-900 px-2.5 py-2 text-white ring-1 ring-inset ring-gray-700" aria-hidden="true"></i>
+                   <i class="fas fa-times items-center ml-auto rounded-md bg-gray-900 px-3 py-2 text-white ring-1 ring-inset ring-gray-700" aria-hidden="true"></i>
+                 </button>
+               <?php } ?>
+
+             </div>
+             <ul class="accordion-content space-y-2">
+               <?php foreach ($page['subpages'] as $subpage) {
+
+                  $subpageID = $subpage->ID;
+                  $subpageTitle = $subpage->post_title;
+                  $subpageSlug = $subpage->post_name;
+                  $subpageBG = $subpage->post_name . '.png';
+                  $subpageBootstrapIcon = get_field('bootstrap_icon', $subpage->ID);
+
+                ?>
+                 <li class="p-2">
+                   <a href="<?php echo get_site_url() . '/' . $pageSlug . '/' . $subpageSlug ?>" class="flex space-x-2 items-center"><i class="bi-caret-right-fill"></i>
+                     <p><?php echo $subpageTitle ?></p>
+                   </a>
+                 </li>
+
+               <?php } ?>
+             </ul>
+           </li>
+
+           <!-- Horizontal Rule -->
+           <div class="horizontal-rule w-4/5 mt-4 mx-auto bg-gray-800"></div>
+
+         <?php } ?>
+
+       </ul>
+
+
+     </nav>
+
+   </div>
+
+ </section>
+
+ <?php
+  /**
+  // Check if a flag is set in the session to indicate that the code has already run
+  if (!isset($_SESSION['splash_shown'])) {
+
+    $_SESSION['splash_shown'] = true; ?>
+
+
+   <!-- Splash Screen Content-->
+   <section id="splash-screen" class="absolute w-full bottom-0 flex flex-col h-screen items-center justify-center">
+
+     <div class="space-y-8 px-4 text-white flex flex-col justify-center items-center">
+       <img class="w-56" src="<?php echo get_template_directory_uri(); ?>/assets/images/logos/logo-white.png" alt="Splash Logo">
+       <h1 class="uppercase text-center font-bold text-xl">A student handbook for post secondary transitions</h1>
+       <button id="app-enter" class="bg-blue-800 shadow-sm shadow-gray-50 px-12 py-4 rounded-md"><i class="bi bi-box-arrow-in-right pr-4"></i>Enter</button>
+     </div>
+
+   </section>
+
+ <?php } ?>
+  
+   */