underbbs/frontend/ts/profile.js

/* 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;}
}
/* the div block has an id and class so that its targeted by the styles
and the component underneath */
</style> 



<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.querySelector("#mySidenav");
        this.openBtn = this.querySelector("#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)