starting page transitions and gestures

assets/css/styles.css

@@ -1088,10 +1088,6 @@ select {
   max-width: 36rem;
 }
 
-.max-w-full {
-  max-width: 100%;
-}
-
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -1289,11 +1285,6 @@ select {
   background-color: rgb(29 77 58/var(--tw-bg-opacity));
 }
 
-.bg-gray-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(209 213 219/var(--tw-bg-opacity));
-}
-
 .bg-gray-800 {
   --tw-bg-opacity: 1;
   background-color: rgb(31 41 55/var(--tw-bg-opacity));
@@ -1464,10 +1455,6 @@ select {
   padding-top: 1rem;
 }
 
-.text-left {
-  text-align: left;
-}
-
 .text-center {
   text-align: center;
 }
@@ -2018,6 +2005,10 @@ body.login {
   translate: 0 0;
 }
 
+#content-container {
+  transition: opacity 0.5s ease-in-out;
+}
+
 #footer-nav.out-of-view {
   opacity: 0;
   translate: 0 100%;

assets/js/index.js

@@ -69,6 +69,61 @@ class Nav {
 
 /***/ }),
 
+/***/ "./src/modules/PageTransitions.js":
+/*!****************************************!*\
+  !*** ./src/modules/PageTransitions.js ***!
+  \****************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+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');
+    });
+  }
+  addClickListener() {
+    this.links.forEach(link => {
+      link.addEventListener('click', e => {
+        if (this.isExternalLink(link)) {
+          link.setAttribute('target', '_blank');
+        }
+        e.preventDefault();
+      });
+    });
+  }
+  loadContent(targetUrl) {
+    fetch(targetUrl).then(response => response.text()).then(data => {
+      this.updateContent(data);
+      history.pushState(null, null, targetUrl);
+    }).catch(error => console.error('Error fetching content:', error));
+  }
+  updateContent(data) {
+    const contentContainer = document.getElementById('content-container');
+    const parsedData = new DOMParser().parseFromString(data, 'text/html');
+    contentContainer.innerHTML = parsedData.getElementById('content').innerHTML;
+  }
+
+  // Function to check if a link is external
+  isExternalLink(link) {
+    const currentDomain = window.location.hostname;
+    const linkDomain = link.hostname;
+    return linkDomain !== currentDomain;
+  }
+}
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (PageTransitions);
+
+/***/ }),
+
 /***/ "./src/modules/SplashScreen.js":
 /*!*************************************!*\
   !*** ./src/modules/SplashScreen.js ***!
@@ -198,6 +253,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _modules_NavControl__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./modules/NavControl */ "./src/modules/NavControl.js");
 /* harmony import */ var _modules_CollapsePanel__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./modules/CollapsePanel */ "./src/modules/CollapsePanel.js");
 /* harmony import */ var _modules_SplashScreen__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./modules/SplashScreen */ "./src/modules/SplashScreen.js");
+/* harmony import */ var _modules_PageTransitions__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./modules/PageTransitions */ "./src/modules/PageTransitions.js");
 // Our modules / classes
 // Import modules e.g import MobileMenu from "./modules/MobileMenu"
 
@@ -205,13 +261,15 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
 // Instantiate a new object using our modules/classes
 // e.g var mobileMenu =  new MobileMenu()
 
-var testModule = new _modules_TestModule__WEBPACK_IMPORTED_MODULE_0__["default"]();
-var navControl = new _modules_NavControl__WEBPACK_IMPORTED_MODULE_1__["default"]();
-var collapsePanel = new _modules_CollapsePanel__WEBPACK_IMPORTED_MODULE_2__["default"]();
-var splashScreen = new _modules_SplashScreen__WEBPACK_IMPORTED_MODULE_3__["default"]();
+const testModule = new _modules_TestModule__WEBPACK_IMPORTED_MODULE_0__["default"]();
+const navControl = new _modules_NavControl__WEBPACK_IMPORTED_MODULE_1__["default"]();
+const collapsePanel = new _modules_CollapsePanel__WEBPACK_IMPORTED_MODULE_2__["default"]();
+const splashScreen = new _modules_SplashScreen__WEBPACK_IMPORTED_MODULE_3__["default"]();
+const pageTransitions = new _modules_PageTransitions__WEBPACK_IMPORTED_MODULE_4__["default"]();
 })();
 
 /******/ })()