From 1f37fda94fec8a9d33d76c0d76393c14529eaa0c Mon Sep 17 00:00:00 2001
From: Miguel <contact@miguelalmodo.com>
Date: Tue, 10 Sep 2024 23:45:40 -0400
Subject: [PATCH] we now have a blank sliding side menu to hold the profile
 info

---
 frontend/ts/profile.js | 141 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 141 insertions(+)
 create mode 100644 frontend/ts/profile.js

diff --git a/frontend/ts/profile.js b/frontend/ts/profile.js
new file mode 100644
index 0000000..1eae883
--- /dev/null
+++ b/frontend/ts/profile.js
@@ -0,0 +1,141 @@
+/* WEPA this is miggymofongo's contribution to underBBS! I'm practicing web components 
+in this bishhh
+
+this template contains the html code of the side bar
+*/
+const template = document.createElement("template")
+
+template.innerHTML = `
+<style> 
+
+/* side profile view menu */
+.sidenav {
+  height: 50%; 
+  width: 0; 
+  position: fixed; /* Stay in place */
+  z-index: 1; 
+  top: 0; 
+  left: 0;
+  background-color: #888; 
+  overflow-x: hidden; /* Disable horizontal scroll */
+  padding-top: 60px; /* Place content 60px from the top */
+  transition: width 0.5s ease; /* smooth transition */
+}
+
+/*nav menu links */
+.sidenav a {
+  padding: 8px 8px 8px 32px;
+  text-decoration: none;
+  font-size: 25px;
+  color: #818181;
+  display: block;
+  transition: 0.3s;
+}
+
+/* change their color when you hover the mouse */
+.sidenav a:hover {
+  color: #f1f1f1;
+}
+
+/* style the close button (puts in the top right corner) */
+.sidenav .closeBtn {
+  position: absolute;
+  top: 0;
+  right: 25px;
+  font-size: 36px;
+  margin-left: 50px;
+}
+
+/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
+#main {
+  transition: margin-left .5s ease;
+  padding: 20px;
+}
+
+/* change the style of the sidenav on smaller screens where height is less than 450px, 
+ (less padding and a smaller font size) */
+
+ @media screen and (max-height: 450px) {
+  .sidenav {padding-top: 15px;}
+  .sidenav a {font-size: 18px;}
+}
+
+</style> 
+
+/* the div block has an id and class so that its targeted by the styles
+and the component underneath*/
+
+<div id="mySidenav" class="sidenav">
+
+  <button href="" class="closeBtn">&times;</button>
+
+  <a href=""><button>Message</button></a>
+  
+
+</div>
+
+<button id="openBtn">open profile view</button>
+
+`
+
+/* setting up a web component will extend the set of available HTML elements for you to use in your
+project and keep your codebase organized and modular. Set up a web component in a separate file 
+and link it directly in your html document head. 
+
+creating a custom web component is just like creating a class. after setting up 
+the constructor function, you need to create some methods that tell the browser more about it. 
+you can add whatever methods you want, but they at least need some of the following:
+
+1) connectedCallback() => call this method when the element is added to the document, 
+2) disconnectedCallback() => call this method when the element is removed from the document
+3) static get observedAttributes() => this returns an array of attribute names to track for changes
+4) attributeChangedCallback(name, oldValue, newValue) => this one is called when one of the attributes 
+5) adoptedCallback() => called when the element is moved to a new document
+*/
+
+
+
+class ProfileSideBar extends HTMLElement {
+// 
+    constructor() { // the constructor function initiates the new side bar 
+        super()
+        this.appendChild(template.content.cloneNode(true))
+        this.sidenav = this.getElementById("#mySidenav");
+        this.openBtn = this.getElementById("#openBtn");
+        this.closeBtn = this.querySelector(".closeBtn");
+        this.mainContent = document.getElementById("main");
+     
+    }
+/* this method adds event listeners to the openBtn and closeBtn classes that 
+call the openNav closeNav function to open and close the sidebar*/
+    connectedCallback() {
+
+        this.openBtn.addEventListener("click", this.openNav.bind(this));
+        this.closeBtn.addEventListener("click", this.closeNav.bind(this));
+
+    }
+
+
+    disconnectedCallback() {
+        this.openBtn.removeEventListener("click", this.openNav.bind(this));
+        this.closeBtn.removeEventListener("click", this.closeNav.bind(this));
+
+    }
+
+/* these two methods will open and close the profile side menu*/
+    openNav() {
+        this.sidenav.style.width = "450px";
+        if (this.mainContent) {
+            this.mainContent.style.marginLeft = "250px";
+        } 
+      }
+    
+    closeNav() {
+      this.sidenav.style.width = "0";
+      if (this.mainContent) {
+        this.mainContent.style.marginLeft = "0"
+      } 
+    }
+}
+/*lastly, we need to define the element tag itself and attach it to the webcomponent */
+customElements.define("profile-side-bar", ProfileSideBar)
\ No newline at end of file