diff --git a/index.html b/index.html
index 7bf17cd..531319c 100644
--- a/index.html
+++ b/index.html
@@ -4,6 +4,13 @@
+Home
+
+
+
diff --git a/main.js b/main.js
index e332d65..bf04926 100644
--- a/main.js
+++ b/main.js
@@ -54,7 +54,13 @@ class Post {
// add a header to the post
const headerElem = document.createElement("h1");
headerElem.innerHTML = this.username;
- postElem.appendChild(headerElem);
+
+ const profileLinkElem = document.createElement("a");
+ profileLinkElem.setAttribute("href", "#");
+ profileLinkElem.addEventListener("click", () => updateUserProfile(this.username));
+ profileLinkElem.appendChild(headerElem);
+
+ postElem.appendChild(profileLinkElem);
// TODO: add content to the post
const contentElem = document.createElement("p");
@@ -66,6 +72,50 @@ class Post {
}
+var userProfile = null;
+class UserProfile {
+ constructor(username) {
+ this.username = username;
+ this.bio = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";
+
+ this.elem = document.getElementById("profile");
+ this.nameElem = document.getElementById("profile-name");
+ this.descElem = document.getElementById("profile-description");
+ }
+
+ show() {
+ this.nameElem.innerHTML = this.username;
+ this.descElem.innerHTML = this.bio;
+ this.elem.style.visibility = "visible";
+ }
+
+ hide() {
+ this.descElem.innerHTML = "";
+ this.nameElem.innerHTML = "";
+ this.elem.style.visibility = "hidden";
+ }
+}
+
+
+function goToHome() {
+ updateUserProfile(null);
+}
+
+
+function updateUserProfile(username) {
+ if (userProfile != null) {
+ userProfile.hide();
+ userProfile = null;
+ }
+
+ if (!username)
+ return;
+
+ userProfile = new UserProfile(username);
+ userProfile.show();
+}
+
+
function createPost() {
const post = new Post();
postContainer.appendChild(post.getElement());
diff --git a/styles.css b/styles.css
index c7bed2e..546edd2 100644
--- a/styles.css
+++ b/styles.css
@@ -1,13 +1,31 @@
-#post-container {
- display: flex;
- flex-wrap: wrap;
- justify-content: center;
- margin-inline: auto;
+#home {
+ position: fixed;
+ top: 0;
+ left: 0;
+}
+
+/* TODO: deal with visibility when screen cuts off left side */
+/* TODO: how do we show the profile on mobile */
+#profile {
+ /* profile starts hidden */
+ visibility: hidden;
+ position: fixed;
+ right: calc(50% + 300px + 8px);
+ left: auto;
+ top: 16px;
+ height: 600px;
width: 100%;
+ max-width: 300px;
+
+ background-color: red;
}
@media only screen and (min-width: 768px) {
/* For bigger than phones */
+ #profile {
+ visibility: visible;
+ }
+
#post-container {
max-width: 600px;
}
@@ -17,6 +35,15 @@
}
}
+
+#post-container {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ margin-inline: auto;
+ width: 100%;
+}
+
.post {
height: 55vh;
width: calc(100% - 16px);