we now have a blank sliding side menu to hold the profile info
This commit is contained in:
parent
396b47a6f7
commit
1f37fda94f
1 changed files with 141 additions and 0 deletions
141
frontend/ts/profile.js
Normal file
141
frontend/ts/profile.js
Normal file
|
|
@ -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">×</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)
|
||||||
Loading…
Reference in a new issue