Merge branch 'feature-components' into dev

src/app/components/templates/card.php

@@ -55,7 +55,7 @@
                         else if($diff->h > 0)
                             echo $diff->h . " hours ago";
                         else 
-                            echo $diff->m . " minutes ago";
+                            echo $diff->i . " minutes ago";
                     ?>
                 </div>
             </div>

src/app/components/templates/navbar.php

 <?php
 require_once __DIR__ . "/logo.php";
+require_once __DIR__ . "/profilebar.php";
 
     function navbar() {
 ?>
@@ -11,11 +12,8 @@ require_once __DIR__ . "/logo.php";
                 <div>searchbar</div>
 
                 <!-- login/reg section -->
-                <div>logg</div>
+                <?php profilebar() ?>
             </nav>
-            <div id="background">
-                <!-- bgholder -->
-            </div>
         </navbar>
 <?php
     } 

src/app/components/templates/profilebar.php

+<?php
+    function profilebar($user_id = -1) {
+?>
+    <div id="profilebar">
+        <?php 
+            if($user_id == -1) {
+        ?>
+                <div id="profilename"><b>Selamat datang,</b> default</div>
+                <img id="profilepic" src="/src/public/static/icon/user_icon_default.png" alt="profilepic" />
+        <?php
+            } // else logged on
+        ?>
+    </div>
+<?php
+    }
+
+?>
\ No newline at end of file

src/public/styles/templates/navbar.css

@@ -4,6 +4,8 @@ navbar {
     top: 0;
     left: 0;
 
+    padding: .4rem;
+
     width: 100%;
     height: var(--navbar-height);
 
@@ -12,6 +14,7 @@ navbar {
     z-index: 10;
 
     border: 0.1px solid var(--color-border);
+    background-color: var(--color-theme-base);
 }
 
 navbar nav {
@@ -25,15 +28,22 @@ navbar nav {
    
 }
 
-navbar #background {
-    background-color: var(--color-theme-base);
+#profilebar {
+    width: max-content;
+    height: 100%;
 
-    position: relative;
-    top: -100%;
+    display: flex;
 
-    width: 100%;
-    height: 100%;
+    justify-content: space-between;
+    align-items: center;
+}
 
-    z-index: -10;
+#profilename {
+    margin-right: 1rem;
+}
+
+#profilepic {
+    /* width: 100%; */
+    height: 100%;
 }