From 42bf9720c9b94a7d95336b62fdb015ba3229ebe9 Mon Sep 17 00:00:00 2001
From: Niko <niko@nobigtech.es>
Date: Fri, 11 Feb 2022 16:43:56 +0100
Subject: [PATCH] Added supposed events on navmenu buttons (to be controlled
 later)

---
 web/src/_templates/app/header.php   | 32 ++++++++++++++++-------------
 web/src/_templates/buttons/menu.php |  4 ++++
 web/src/app/css/app.css             | 23 ++++++++++++++++++---
 3 files changed, 42 insertions(+), 17 deletions(-)
diff --git a/web/src/_templates/app/header.php b/web/src/_templates/app/header.php
index e18cb59..878c012 100644
--- a/web/src/_templates/app/header.php
+++ b/web/src/_templates/app/header.php
@@ -19,26 +19,30 @@
 	<?php tpl_scripts($scripts ?? null) ?>
 </head>
 <body class="app">
-<header>
-	<div class="flex">
-		<div class="flex icon button round">
-			<a class="center" href="<?php echo APP_DIR ?>">
+<header class="flex">
+	<div id="nav-container" class="flex center">
+		<div class="flex">
+			<div id="fedilove-icon" class="flex center icon button round">
+			<a class="center" href="javascript:app.page.home()">
 				<img class="fedilove-icon" src="/assets/images/icon-proto-1.png"/>
 			</a>
+			</div>
 		</div>
 		<div class="flex width-max">
 			<div id="nav" class="flex center">
 				<?php $position = 'right' ?>
-				<?php tpl('buttons.menu', "class: rounder| position: $position| id: nav-crushes |".
-					"text: crushes| icon: heart") ?>
-				<?php tpl('buttons.menu', "class: rounder| position: $position| id: nav-meet |".
-					"text: meet| icon: users") ?>
-				<?php tpl('buttons.menu', "class: rounder| position: $position| id: nav-notifications |".
-					"text: notifications| icon: bell") ?>
-				<?php tpl('buttons.menu', "class: rounder| position: $position| id: nav-chat |".
-					"text: chat| icon: comments") ?>
-				<?php tpl('buttons.menu', "class: round  | position: $position| id: nav-search |".
-					"icon: search") ?>
+				<?php tpl('buttons.menu', "class: rounder | position: $position | text: meet | icon: users |".
+					"id: nav-meet		| onclick: app.page.meet()") ?>
+				<?php tpl('buttons.menu', "class: rounder | position: $position | text: crushes | icon: heart |".
+					"id: nav-crushes	| onclick: app.page.crushes()") ?>
+				<?php tpl('buttons.menu', "class: rounder | position: $position | text: chat | icon: comments |".
+					"id: nav-chat		| onclick: app.page.chat()") ?>
+			</div>
+		</div>
+		<div class="flex">
+			<div class="flex center">
+			<?php tpl('buttons.menu', "class: round  | position: $position| id: nav-search |".
+				"icon: search") ?>
 			</div>
 		</div>
 		<?php if ($actor !== null): ?>
diff --git a/web/src/_templates/buttons/menu.php b/web/src/_templates/buttons/menu.php
index 7e1b7ea..54a44a2 100644
--- a/web/src/_templates/buttons/menu.php
+++ b/web/src/_templates/buttons/menu.php
@@ -13,6 +13,10 @@ if ($id !== false)
 	<?php if ($alt_s !== false): ?>
 	title="<?php echo s($alt_s) ?>"
 	<?php endif ?>
+	<?php if (isset($onclick)): ?>
+	href="javascript:<?php echo $onclick?>"
+	style="text-decoration: none; color: initial;"
+	<?php endif ?>
 	>
 
 	<div class="flex" style="min-width: 2em; min-height: 2em">
diff --git a/web/src/app/css/app.css b/web/src/app/css/app.css
index 8678553..c07fdd1 100644
--- a/web/src/app/css/app.css
+++ b/web/src/app/css/app.css
@@ -7,8 +7,12 @@ body.app {
 	padding: .7em;
 }
 
-.fedilove-icon {
-	width: 2.2em;
+#fedilove-icon {
+	width: 2.5em;
+	height: 2.5em;
+}
+#fedilove-icon img {
+	width: 100%;
 	position: relative;
 	top: 2px;
 }
@@ -28,8 +32,21 @@ main {
 	margin: .8em .4em;
 }
 
+#nav-container {
+	max-width: 60em;
+	width: 100%;
+}
+
+#nav-meet .fa {
+	font-size: 1.8em;
+	color: #fb79ff;
+}
+#nav-crushes .fa { color: #ff5f5f }
+#nav-chat .fa { color: #62c672 }
+
 #app-container {
-	max-width: 50em;
+	max-width: 60em;
+	width: 100%;
 }
 
 .panel {
