UserMenu: Added profile menu

Added profile menu
Added avatars for profiles

.gitignore

@@ -1,2 +1,3 @@
 # Ignoring all uploads on the website
-uploads/*
+uploads/avatars/*.png
+!uploads/avatars/no_avatar.png

_styles/_css/index.css

@@ -30,7 +30,6 @@ div.description-block h2 {
 
 .offer-block div h2{
     margin-right: 50px;
-
 }
 
 @media (max-width: 600px) {

_styles/_css/styles.css

@@ -43,6 +43,7 @@
 
 section {
     display: flex;
+    justify-content: center;
     align-items: center;
 
     height: 100vh;
@@ -221,6 +222,59 @@ div.profile-block {
     display: flex;
     flex-direction: row;
     align-items: center;
+
+    position: relative;
+}
+
+div.user-menu { 
+    display: none;
+    top: 40px;
+
+    border-radius: 0px 0px 10px 10px;
+    padding: 10px;
+    -webkit-box-shadow: 0px 11px 26px 0px rgba(0,0,0,0.28);
+    -moz-box-shadow: 0px 11px 26px 0px rgba(0,0,0,0.28);
+    box-shadow: 0px 11px 26px 0px rgba(0,0,0,0.28);
+}
+
+div.profile-block:hover div.user-menu {
+    display: flex;
+
+    position: absolute;
+}
+
+div.user-menu ul {
+    padding: 0;
+}
+
+div.user-menu ul li {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+} 
+
+div.user-menu svg {
+    width: 24px;
+    height: 24px;
+
+    margin-right: 5px;
+}
+
+div.user-menu a {
+    text-align: center;
+}
+
+div.user-menu .logout:hover svg path,
+div.user-menu .logout:hover a {
+    fill: var(--primary-color-02);
+    color: var(--primary-color-02);
+}
+
+div.user-menu .logout svg path,
+div.user-menu .logout a {
+    fill: var(--primary-color-01);
+    color: var(--primary-color-01);
 }
 
 @media (width <= 1024px) {

data/locales/en-US.json

@@ -29,6 +29,9 @@
         "secondaryDescription": "Let's create your success together and take your business to new heights. Trust us your advertising.",
 
         "aboutusBlockName": "What we offer",
-        "formBlockName": "Still not sure? Contact us"
+        "formBlockName": "Still not sure? <br> Contact us"
+    },
+    "userMenu": {
+        "logout": "Log out"
     }
 }

data/locales/ru-RU.json

@@ -29,6 +29,9 @@
         "secondaryDescription": "Давайте вместе создадим катализатор для вашего успеха и приведем ваш бизнес к новым высотам. Доверьте нам свою рекламу.",
 
         "aboutusBlockName": "Что мы предлагаем",
-        "formBlockName": "Всё ещё не уверены? Свяжитесь с нами"
+        "formBlockName": "Всё ещё не уверены? <br> Свяжитесь с нами"
+    },
+    "userMenu": {
+        "logout": "Выйти"
     }
 }

frontend/components/elems/header.php

@@ -18,6 +18,15 @@
                 <div class="profile-block">
                     <img src="/api/avatar?id=<?= unserialize($_SESSION["userData"])->getId(); ?>">
                     <a href="/user"><?= unserialize($_SESSION["userData"])->getUsername(); ?></a>
+
+                    <div class="user-menu">
+                        <ul>
+                            <li class="logout">
+                                <svg width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none"><path fill="#000000" fill-rule="evenodd" d="M10.138 1.815A3 3 0 0 1 14 4.688v14.624a3 3 0 0 1-3.862 2.873l-6-1.8A3 3 0 0 1 2 17.512V6.488a3 3 0 0 1 2.138-2.873l6-1.8zM15 4a1 1 0 0 1 1-1h3a3 3 0 0 1 3 3v1a1 1 0 1 1-2 0V6a1 1 0 0 0-1-1h-3a1 1 0 0 1-1-1zm6 12a1 1 0 0 1 1 1v1a3 3 0 0 1-3 3h-3a1 1 0 1 1 0-2h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1zM9 11a1 1 0 1 0 0 2h.001a1 1 0 1 0 0-2H9z" clip-rule="evenodd"/></svg>
+                                <a href="/user/logout"><?= $GLOBALS["locale"]["userMenu"]["logout"] ?></a>
+                            </li>
+                        </ul>
+                    </div>
                 </div>
             <?php } ?>
         </div>

index.php

@@ -20,4 +20,9 @@
 /*
 *   User routes
 */
-$router->add("/user", "routes/user/user.ctrl.php");
+$router->add("/user", "routes/user/user.ctrl.php");
+
+/*
+*   API routes
+*/
+$router->add("/api/{category}", "routes/api/api.ctrl.php");

routes/api/api.ctrl.php

@@ -1,2 +1,10 @@
 <?php
 
+$avatarFilePath = $_SERVER["DOCUMENT_ROOT"] . '/uploads/avatars/no_avatar.png';
+$fp = fopen($avatarFilePath, 'rb');
+// send the right headers
+header("Content-Type: image/png");
+header("Content-Length: " . filesize($name));
+// dump the picture and stop the script
+fpassthru($fp);
+exit;