fix: navbar implementation

4852a3ce · Genvictus · cc40f2ca · 4852a3ce · 4852a3ce · 4852a3ce
Commit 4852a3ce authored 1 year ago by Genvictus
--- a/src/app/view/home.php
+++ b/src/app/view/home.php
@@ -14,9 +14,11 @@ require_once PAGE_PATH . "/templates/navbar.php";
 </head>

 <body>
+  <div class="layout">
    <?php
-    echo Navbar();
+      echo Navbar();
    ?>
+  </div>
    <script src="/public/js/home.js"></script>
 </body>
 </html>
\ No newline at end of file
--- a/src/app/view/templates/navbar.php
+++ b/src/app/view/templates/navbar.php
@@ -7,33 +7,36 @@ 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="/">
+            <a 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="#">
+            <a 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="#">
+            <a href="#">
                <div class="sidebar-menu__item">
                    <img src="/public/assets/profile.svg" class="sidebar-menu__item-icon" />
                    Profile
                </div>
            </a>
+            <a href="/compose/kicau">
+                <div class="sidebar-menu__compose">
+                    Post
+                </div>
+            </a>
        </div>
    </div>
    <div id="list-post">
    </div>
-  </div>
  EOT;

  return $html;

--- a/src/public/css/home.css
+++ b/src/public/css/home.css
-html {
-    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
-}
-
-.brand {
-    height: 70px;
-    padding: 10px;
-}
-body{
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-.layout {
-    display: grid;
-    grid-template-columns: 275px auto 150px;
-    /* margin: 0 auto; */
-    /* max-width: 2200px; */
-}
-
 .post {
    display: flex;
    border-bottom: 1px solid #e6ecf0;

--- a/src/public/css/shared.css
+++ b/src/public/css/shared.css
-.layout__right-sidebar {
-    position: fixed;
-    width: 350px;
+html {
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
+}
+
+a {
+    text-decoration: none;
+    color: inherit;
+  }
+  
+  a:hover {
+    color: inherit;
+    text-decoration: none;
+  }
+  
+  a:hover {
+    text-decoration: none;
+    cursor: pointer;
+  }
+
+body{
+    display: flex;
+}
+
+.layout {
+    display: grid;
+    grid-template-columns: 275px auto 150px;
+    /* margin: auto; */
+    /* max-width: 2200px; */
+}
+
+.layout__left-sidebar {
+    display: flex;
+    padding-top: 30px;
+    padding-left: 40px;
+    background-color: #ffffff;
+}
+
+.brand {
+    height: 70px;
+    padding: 10px;
 }

 .sidebar-menu {
@@ -38,4 +75,18 @@

 .sidebar-menu__item--active .sidebar-menu__item-icon {
    filter: invert(67%) sepia(60%) saturate(4956%) hue-rotate(176deg) brightness(95%) contrast(99%);
+}
+
+.sidebar-menu__compose {
+    display: flex;
+    padding: 15px;
+    border-radius: 30px;
+    background: #1da0f2;
+
+    font-size: 19px;
+    font-weight: 700;
+    color: #ffffff;
+    
+    justify-content: center;
+    align-items: center;
 }
\ No newline at end of file