From 4852a3ce894363f87d9dc9ed6182e39ecc249cfc Mon Sep 17 00:00:00 2001
From: Genvictus <johannstarkmk42@gmail.com>
Date: Sat, 4 Nov 2023 00:09:24 +0700
Subject: [PATCH] fix: navbar implementation
---
src/app/view/home.php | 4 ++-
src/app/view/templates/navbar.php | 13 ++++---
src/public/css/home.css | 20 -----------
src/public/css/shared.css | 57 +++++++++++++++++++++++++++++--
4 files changed, 65 insertions(+), 29 deletions(-)
diff --git a/src/app/view/home.php b/src/app/view/home.php
index 9f9d494..b1652ec 100644
--- 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
diff --git a/src/app/view/templates/navbar.php b/src/app/view/templates/navbar.php
index 54f81ed..ce9173c 100644
--- 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;
diff --git a/src/public/css/home.css b/src/public/css/home.css
index eedc8e9..6bc067b 100644
--- a/src/public/css/home.css
+++ b/src/public/css/home.css
@@ -1,23 +1,3 @@
-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;
diff --git a/src/public/css/shared.css b/src/public/css/shared.css
index e9e1c93..00d611a 100644
--- a/src/public/css/shared.css
+++ b/src/public/css/shared.css
@@ -1,6 +1,43 @@
-.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
--
GitLab