Mucho mucho update

static/main.css

@@ -2,9 +2,6 @@
     /* styles to apply if a user's device settings are set to reduced motion */
 }
 
-
-
-
 :root {
     --main-bg-color: white;
     --border-color: rgb(132, 136, 138);
@@ -25,9 +22,7 @@
     }
 }
 
-
 body {
-
     font-family: sans-serif;
     color: var(--main-fg-color);
     background-color: var(--main-bg-color);
@@ -73,7 +68,6 @@ hr {
     align-items: flex-start;
     min-height: 100vh;
     padding: 0px;
-    /* Add some padding around the flex container */
 }
 
 .content {
@@ -107,7 +101,6 @@ hr {
     text-wrap: nowrap;
     font-size: 10px;
     margin-bottom: 20px;
-    height: 150px;
     width: 100%;
 }
 
@@ -131,7 +124,7 @@ a {
     width: 32px;
     height: 32px;
     image-rendering: pixelated;
-    background-image: url('/static/favicon.ico');
+    background-image: url("/static/favicon.ico");
     background-repeat: no-repeat;
     background-size: cover;
 }
@@ -141,7 +134,7 @@ a {
         width: 32px;
         height: 32px;
         image-rendering: pixelated;
-        background-image: url('/static/favicon.ico');
+        background-image: url("/static/favicon.ico");
         background-repeat: no-repeat;
         background-size: cover;
     }
@@ -151,7 +144,7 @@ a {
     width: 32px;
     height: 32px;
     image-rendering: pixelated;
-    background-image: url('/static/favicon.ico');
+    background-image: url("/static/favicon.ico");
     background-repeat: no-repeat;
     background-size: cover;
 }
@@ -187,7 +180,7 @@ button,
 }
 
 video {
-    width: 100%
+    width: 100%;
 }
 
 iframe {
@@ -210,7 +203,7 @@ iframe {
 }
 
 #compose {
-    display: none
+    display: none;
 }
 
 .username {
@@ -220,4 +213,137 @@ iframe {
 
 .username:hover {
     text-decoration: underline;
-}
+}
+
+.nav-container {
+    position: sticky;
+    /* left: 0;  */
+    top: 0;
+    height: 100vh;
+    background-color: var(--main-bg-color);
+    border-right: 1px solid rgb(60, 60, 60);
+    /* transition: width 0.3s; */
+    overflow: hidden;
+    width: 150px;
+}
+
+.nav-container.collapsed {
+    width: 60px;
+}
+
+.nav-item {
+    display: flex;
+    align-items: center;
+    padding: 12px 16px;
+    color: var(--main-fg-color);
+    text-decoration: none;
+    cursor: pointer;
+    white-space: nowrap;
+}
+
+.nav-item.profile-pic {
+    padding: 8px 6px;
+}
+
+.nav-item:hover {
+    background-color: var(--edge-color);
+}
+
+.nav-emoji {
+    font-size: 28px;
+    min-width: 28px;
+}
+
+.nav-label {
+    margin-left: 12px;
+}
+
+.burger-menu {
+    display: none;
+    position: fixed;
+    left: 16px;
+    top: 16px;
+    font-size: 24px;
+    cursor: pointer;
+    z-index: 1000;
+    background: none;
+    border: none;
+    color: var(--main-fg-color);
+}
+
+.nav-overlay {
+    display: none;
+    position: fixed;
+    inset: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 900;
+}
+
+@media (max-width: 700px) {
+    .nav-container {
+        transform: translateX(-100%);
+        z-index: 1000;
+    }
+
+    .nav-container.active {
+        transform: translateX(0);
+        width: 200px;
+    }
+
+    .burger-menu {
+        display: block;
+    }
+
+    .nav-overlay.active {
+        display: block;
+    }
+}
+
+@media (min-width: 701px) and (max-width: 800px) {
+    .nav-container {
+        width: 60px;
+    }
+
+    .nav-label {
+        display: none;
+    }
+}
+
+.profile-pic-container {
+    width: 48px;
+    height: 48px;
+    position: relative;
+    overflow: hidden;
+    border-radius: 50%;
+}
+
+.profile-pic-container img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.emoji-fill {
+    color: transparent;
+    text-shadow: 0 0 0 var(--main-fg-color);
+}
+
+.compose-button {
+    font-size: 48px;
+    position: fixed;
+    bottom: 24px;
+    right: 24px;
+    width: 72px;
+    height: 72px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
+    background: rgba(87, 87, 255, 0.8);
+}
+
+.compose-button:hover {
+    background-color: rgb(87, 87, 255);
+}