rfc: move navbar as separate template

src/app/view/templates/navbar.php

+<?php
+
+// require_once PROJECT_ROOT_PATH . "/public/templates/UserProfile.php";
+
+function Navbar()
+{
+//   $userProfile = UserProfile();
+
+  $html = <<<"EOT"
+  <div class="layout">
+    <div class="layout__left-sidebar">
+        <div class="sidebar-menu">
+            <img src="/public/assets/Logo.png" class="brand" />
+            <a style="text-decoration:none" href="/">
+                <div class="sidebar-menu__item sidebar-menu__item--active">
+                    <img src="/public/assets/home.svg" class="sidebar-menu__item-icon" />
+                    Home
+                </div>
+            </a>
+            <a style="text-decoration:none" href="#">
+                <div class="sidebar-menu__item">
+                    <img src="/public/assets/followed.jpg" class="sidebar-menu__item-icon" />
+                    Followed
+                </div>
+            </a>
+            <a style="text-decoration:none" href="#">
+                <div class="sidebar-menu__item">
+                    <img src="/public/assets/profile.svg" class="sidebar-menu__item-icon" />
+                    Profile
+                </div>
+            </a>
+        </div>
+    </div>
+    <div id="list-post">
+    </div>
+  </div>
+  EOT;
+
+  return $html;
+}

src/public/css/home.css

@@ -18,48 +18,6 @@ body{
     /* max-width: 2200px; */
 }
 
-.layout__right-sidebar {
-    position: fixed;
-    width: 350px;
-}
-
-.sidebar-menu {
-    position: fixed;
-}
-
-.sidebar-menu__item {
-    font-size: 19px;
-    color: #0F141A;
-    display: flex;
-    align-items: center;
-    font-weight: 700;
-    padding: 10px;
-}
-
-.sidebar-menu__item:hover {
-    background: rgba(29, 161, 242, 0.1);
-    color: #1da0f2;
-    border-radius: 20px;
-    cursor: pointer;
-}
-
-.sidebar-menu__item:active {
-    color: #1da0f2;
-}
-
-.sidebar-menu__item--active {
-    color: #1da0f2;
-}
-
-.sidebar-menu__item-icon {
-    height: 26px;
-    margin-right: 20px;
-}
-
-.sidebar-menu__item--active .sidebar-menu__item-icon {
-    filter: invert(67%) sepia(60%) saturate(4956%) hue-rotate(176deg) brightness(95%) contrast(99%);
-}
-
 .post {
     display: flex;
     border-bottom: 1px solid #e6ecf0;

src/public/css/lib.css

+.post-item {
+    width: 350px;
+}
\ No newline at end of file

src/public/css/shared.css

+.layout__right-sidebar {
+    position: fixed;
+    width: 350px;
+}
+
+.sidebar-menu {
+    position: fixed;
+}
+
+.sidebar-menu__item {
+    font-size: 19px;
+    color: #0F141A;
+    display: flex;
+    align-items: center;
+    font-weight: 700;
+    padding: 10px;
+}
+
+.sidebar-menu__item:hover {
+    background: rgba(29, 161, 242, 0.1);
+    color: #1da0f2;
+    border-radius: 20px;
+    cursor: pointer;
+}
+
+.sidebar-menu__item:active {
+    color: #1da0f2;
+}
+
+.sidebar-menu__item--active {
+    color: #1da0f2;
+}
+
+.sidebar-menu__item-icon {
+    height: 26px;
+    margin-right: 20px;
+}
+
+.sidebar-menu__item--active .sidebar-menu__item-icon {
+    filter: invert(67%) sepia(60%) saturate(4956%) hue-rotate(176deg) brightness(95%) contrast(99%);
+}
\ No newline at end of file