From f4e40cf4afddccb41a62f0929926c474da53832c Mon Sep 17 00:00:00 2001
From: Miguel Ribeiro <k.d.mintnick@gmail.com>
Date: Sun, 29 Sep 2024 15:48:03 +0200
Subject: [PATCH] test mobile menu on the bottom

---
 includes/footer.php   |  50 ++++-----
 includes/header.php   | 239 ++++++++++++++++++++++++++----------------
 index.php             |  11 +-
 styles/dark-theme.css |  16 ++-
 styles/styles.css     |  75 +++++++++++--
 5 files changed, 267 insertions(+), 124 deletions(-)

diff --git a/includes/footer.php b/includes/footer.php
index 0ef9f170a..0684cf747 100644
--- a/includes/footer.php
+++ b/includes/footer.php
@@ -1,35 +1,35 @@
-  </main>
+</main>
 
-  <div class="toast" id="errorToast">
-    <div class="toast-content">
-      <i class="fas fa-solid fa-x toast-icon error"></i>
-      <div class="message">
-        <span class="text text-1"><?= translate("error", $i18n) ?></span>
-        <span class="text text-2 errorMessage"></span>
-      </div>
+<div class="toast" id="errorToast">
+  <div class="toast-content">
+    <i class="fas fa-solid fa-x toast-icon error"></i>
+    <div class="message">
+      <span class="text text-1"><?= translate("error", $i18n) ?></span>
+      <span class="text text-2 errorMessage"></span>
     </div>
-    <i class="fa-solid fa-xmark close close-error"></i>
-    <div class="progress error"></div>
   </div>
+  <i class="fa-solid fa-xmark close close-error"></i>
+  <div class="progress error"></div>
+</div>
 
-  <div class="toast" id="successToast">
-    <div class="toast-content">
-      <i class="fas fa-solid fa-check toast-icon success"></i>
-      <div class="message">
-        <span class="text text-1"><?= translate("success", $i18n) ?></span>
-        <span class="text text-2 successMessage"></span>
-      </div>
+<div class="toast" id="successToast">
+  <div class="toast-content">
+    <i class="fas fa-solid fa-check toast-icon success"></i>
+    <div class="message">
+      <span class="text text-1"><?= translate("success", $i18n) ?></span>
+      <span class="text text-2 successMessage"></span>
     </div>
-    <i class="fa-solid fa-xmark close close-success"></i>
-    <div class="progress success"></div>
   </div>
+  <i class="fa-solid fa-xmark close close-success"></i>
+  <div class="progress success"></div>
+</div>
 
-  <?php
-  if (isset($db)) {
-    $db->close();
-  }
-  ?>
+<?php
+if (isset($db)) {
+  $db->close();
+}
+?>
 
-  </body>
+</body>
 
 </html>
\ No newline at end of file
diff --git a/includes/header.php b/includes/header.php
index 0b4a0bf02..dd5592e10 100644
--- a/includes/header.php
+++ b/includes/header.php
@@ -1,78 +1,80 @@
 <?php
-  require_once 'connect.php';
-  require_once 'checkuser.php';
-  require_once 'checksession.php';
-  require_once 'currency_formatter.php';
+require_once 'connect.php';
+require_once 'checkuser.php';
+require_once 'checksession.php';
+require_once 'currency_formatter.php';
 
-  require_once 'i18n/languages.php';
-  require_once 'i18n/getlang.php';
-  require_once 'i18n/' . $lang . '.php';
+require_once 'i18n/languages.php';
+require_once 'i18n/getlang.php';
+require_once 'i18n/' . $lang . '.php';
 
-  require_once 'getsettings.php';
+require_once 'getsettings.php';
 
-  require_once 'version.php';
+require_once 'version.php';
 
-  if ($userCount == 0) {
-    $db->close();
-    header("Location: registration.php");
-    exit();
-  }
+if ($userCount == 0) {
+  $db->close();
+  header("Location: registration.php");
+  exit();
+}
 
-  $demoMode = getenv('DEMO_MODE');
+$demoMode = getenv('DEMO_MODE');
 
-  $theme = "automatic";
-  if (isset($settings['theme'])) {
-    $theme = $settings['theme'];
-  }
+$theme = "automatic";
+if (isset($settings['theme'])) {
+  $theme = $settings['theme'];
+}
 
-  $updateThemeSettings = false;
-  if (isset($settings['update_theme_setttings'])) {
-    $updateThemeSettings = $settings['update_theme_setttings'];
-  }
+$updateThemeSettings = false;
+if (isset($settings['update_theme_setttings'])) {
+  $updateThemeSettings = $settings['update_theme_setttings'];
+}
 
-  $colorTheme = "blue";
-  if (isset($settings['color_theme'])) {
-    $colorTheme = $settings['color_theme'];
-  }
+$colorTheme = "blue";
+if (isset($settings['color_theme'])) {
+  $colorTheme = $settings['color_theme'];
+}
 
-  $customCss = "";
-  if (isset($settings['customCss'])) {
-    $customCss = $settings['customCss'];
-  }
+$customCss = "";
+if (isset($settings['customCss'])) {
+  $customCss = $settings['customCss'];
+}
 
-  if (isset($themeValue)) {
-    $cookieExpire = time() + (30 * 24 * 60 * 60);
-    setcookie('theme', $themeValue, [
-      'expires' => $cookieExpire,
-      'samesite' => 'Strict'
-    ]);
-  }
+if (isset($themeValue)) {
+  $cookieExpire = time() + (30 * 24 * 60 * 60);
+  setcookie('theme', $themeValue, [
+    'expires' => $cookieExpire,
+    'samesite' => 'Strict'
+  ]);
+}
 
-  $isAdmin = $_SESSION['userId'] == 1;
+$isAdmin = $_SESSION['userId'] == 1;
 
-  function hex2rgb($hex) {
-    $hex = str_replace("#", "", $hex);
-    if(strlen($hex) == 3) {
-      $r = hexdec(substr($hex,0,1).substr($hex,0,1));
-      $g = hexdec(substr($hex,1,1).substr($hex,1,1));
-      $b = hexdec(substr($hex,2,1).substr($hex,2,1));
-    } else {
-      $r = hexdec(substr($hex,0,2));
-      $g = hexdec(substr($hex,2,2));
-      $b = hexdec(substr($hex,4,2));
-    }
-    return "$r, $g, $b";
+function hex2rgb($hex)
+{
+  $hex = str_replace("#", "", $hex);
+  if (strlen($hex) == 3) {
+    $r = hexdec(substr($hex, 0, 1) . substr($hex, 0, 1));
+    $g = hexdec(substr($hex, 1, 1) . substr($hex, 1, 1));
+    $b = hexdec(substr($hex, 2, 1) . substr($hex, 2, 1));
+  } else {
+    $r = hexdec(substr($hex, 0, 2));
+    $g = hexdec(substr($hex, 2, 2));
+    $b = hexdec(substr($hex, 4, 2));
   }
+  return "$r, $g, $b";
+}
 
 ?>
 <!DOCTYPE html>
 <html dir="<?= $languages[$lang]['dir'] ?>">
+
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
   <title>Wallos - Subscription Tracker</title>
   <meta name="apple-mobile-web-app-title" content="Wallos">
-  <meta name="theme-color" content="<?= $theme == "light" ? "#FFFFFF" : "#222222" ?>" id="theme-color"/>
+  <meta name="theme-color" content="<?= $theme == "light" ? "#FFFFFF" : "#222222" ?>" id="theme-color" />
   <link rel="icon" type="image/png" href="images/icon/favicon.ico" sizes="16x16">
   <link rel="apple-touch-icon" href="images/icon/apple-touch-icon.png">
   <link rel="apple-touch-icon" sizes="152x152" href="images/icon/apple-touch-icon-152.png">
@@ -93,73 +95,130 @@ function hex2rgb($hex) {
   <script type="text/javascript">
     window.theme = "<?= $theme ?>";
     window.update_theme_settings = "<?= $updateThemeSettings ?>";
-    window.lang = "<?=$lang ?>";
+    window.lang = "<?= $lang ?>";
     window.colorTheme = "<?= $colorTheme ?>";
   </script>
   <style>
     <?= htmlspecialchars($customCss, ENT_QUOTES, 'UTF-8') ?>
   </style>
   <?php
-    if (isset($settings['customColors'])) {
-      ?>
-        <style id="custom_theme_colors">
-          :root {
-            <?php if (isset($settings['customColors']['main_color']) && !empty($settings['customColors']['main_color'])): ?>
-              --main-color: <?= $settings['customColors']['main_color'] ?>;
-              --main-color-rgb: <?= hex2rgb($settings['customColors']['main_color']) ?>;
-            <?php endif; ?>
-            <?php if (isset($settings['customColors']['accent_color']) && !empty($settings['customColors']['accent_color'])): ?>
-              --accent-color: <?= $settings['customColors']['accent_color'] ?>;
-              --accent-color-rgb: <?= hex2rgb($settings['customColors']['accent_color']) ?>;
-            <?php endif; ?>
-            <?php if (isset($settings['customColors']['hover_color']) && !empty($settings['customColors']['hover_color'])): ?>
-              --hover-color: <?= $settings['customColors']['hover_color'] ?>;
-              --hover-color-rgb: <?= hex2rgb($settings['customColors']['hover_color']) ?>;
-            <?php endif; ?>
-          }
-        </style>
-      <?php
-    }
+  if (isset($settings['customColors'])) {
+    ?>
+    <style id="custom_theme_colors">
+      :root {
+        <?php if (isset($settings['customColors']['main_color']) && !empty($settings['customColors']['main_color'])): ?>
+          --main-color:
+            <?= $settings['customColors']['main_color'] ?>
+          ;
+          --main-color-rgb:
+            <?= hex2rgb($settings['customColors']['main_color']) ?>
+          ;
+        <?php endif; ?>
+        <?php if (isset($settings['customColors']['accent_color']) && !empty($settings['customColors']['accent_color'])): ?>
+          --accent-color:
+            <?= $settings['customColors']['accent_color'] ?>
+          ;
+          --accent-color-rgb:
+            <?= hex2rgb($settings['customColors']['accent_color']) ?>
+          ;
+        <?php endif; ?>
+        <?php if (isset($settings['customColors']['hover_color']) && !empty($settings['customColors']['hover_color'])): ?>
+          --hover-color:
+            <?= $settings['customColors']['hover_color'] ?>
+          ;
+          --hover-color-rgb:
+            <?= hex2rgb($settings['customColors']['hover_color']) ?>
+          ;
+        <?php endif; ?>
+      }
+    </style>
+    <?php
+  }
   ?>
   <script type="text/javascript" src="scripts/i18n/<?= $lang ?>.js?<?= $version ?>"></script>
   <script type="text/javascript" src="scripts/i18n/getlang.js?<?= $version ?>"></script>
 </head>
+
 <body class="<?= $theme ?> <?= $languages[$lang]['dir'] ?>">
   <header>
     <div class="contain">
       <div class="logo">
-          <a href=".">
-              <div class="logo-image" title="Wallos - Subscription Tracker">
-              <?php include "images/siteicons/svg/logo.php"; ?>
-              </div>
-          </a>
+        <a href=".">
+          <div class="logo-image" title="Wallos - Subscription Tracker">
+            <?php include "images/siteicons/svg/logo.php"; ?>
+          </div>
+        </a>
       </div>
       <nav>
         <div class="dropdown">
           <button class="dropbtn" onClick="toggleDropdown()">
             <img src="<?= $userData['avatar'] ?>" alt="me" id="avatar">
-            <span id="user"><?= $username ?></span>
+            <span id="user" class="hideOnMobile"><?= $username ?></span>
           </button>
           <div class="dropdown-content">
-            <a href="."><i class="fa-solid fa-list"></i><?= translate('subscriptions', $i18n) ?></a>
-            <a href="calendar.php"><i class="fa-solid fa-calendar"></i><?= translate('calendar', $i18n) ?></a>
-            <a href="stats.php"><i class="fa-solid fa-chart-simple"></i><?= translate('stats', $i18n) ?></a>
-            <a href="settings.php"><i class="fa-solid fa-gear"></i><?= translate('settings', $i18n) ?></a>
+            <a href="." class="hideOnMobile"><i
+                class="fa-solid fa-list"></i><?= translate('subscriptions', $i18n) ?></a>
+            <a href="calendar.php" class="hideOnMobile"><i
+                class="fa-solid fa-calendar"></i><?= translate('calendar', $i18n) ?></a>
+            <a href="stats.php" class="hideOnMobile"><i
+                class="fa-solid fa-chart-simple"></i><?= translate('stats', $i18n) ?></a>
+            <a href="settings.php" class="hideOnMobile"><i
+                class="fa-solid fa-gear"></i><?= translate('settings', $i18n) ?></a>
             <?php if ($isAdmin): ?>
               <a href="admin.php"><i class="fa-solid fa-user-tie"></i><?= translate('admin', $i18n) ?></a>
             <?php endif; ?>
             <a href="about.php"><i class="fa-solid fa-info-circle"></i><?= translate('about', $i18n) ?></a>
             <?php
-              if ($settings['disableLogin'] == 0) {
-                ?>
-                  <a href="logout.php"><i class="fa-solid fa-arrow-right-from-bracket"></i><?= translate('logout', $i18n) ?></a>
-                <?php
-              }
+            if ($settings['disableLogin'] == 0) {
+              ?>
+              <a href="logout.php"><i
+                  class="fa-solid fa-arrow-right-from-bracket"></i><?= translate('logout', $i18n) ?></a>
+              <?php
+            }
             ?>
           </div>
         </div>
       </nav>
     </div>
   </header>
-  <main>
-    
\ No newline at end of file
+
+  <?php
+  // find out which page is being viewed
+  $page = basename($_SERVER['PHP_SELF']);
+  $subscriptionsClass = $page === 'index.php' ? 'active' : '';
+  $calendarClass = $page === 'calendar.php' ? 'active' : '';
+  $statsClass = $page === 'stats.php' ? 'active' : '';
+  $settingsClass = $page === 'settings.php' ? 'active' : '';
+  ?>
+
+  <nav class="mobile-nav">
+    <a href="." class="nav-link <?= $subscriptionsClass ?>" title="<?= translate('subscriptions', $i18n) ?>">
+      <i class="fas fa-solid fa-list"></i>
+    </a>
+    <a href="calendar.php" class="nav-link <?= $calendarClass ?>" title="<?= translate('calendar', $i18n) ?>">
+      <i class="fas fa-solid fa-calendar"></i>
+    </a>
+    <?php
+    if ($page === 'index.php') {
+      ?>
+      <button class="nav-link" title="<?= translate('add_subscription', $i18n) ?>" onClick="addSubscription()">
+        <i class="fas fa-solid fa-plus"></i>
+      </button>
+      <?php
+    } else {
+      ?>
+      <a href=".?add" class="nav-link secondary" title="<?= translate('add_subscription', $i18n) ?>">
+        <i class="fas fa-solid fa-plus"></i>
+      </a>
+      <?php
+    }
+    ?>
+    <a href="stats.php" class="nav-link <?= $statsClass ?>" title="<?= translate('stats', $i18n) ?>">
+      <i class="fas fa-solid fa-chart-simple"></i>
+    </a>
+    <a href="settings.php" class="nav-link <?= $settingsClass ?>" title="<?= translate('settings', $i18n) ?>">
+      <i class="fas fa-solid fa-cog"></i>
+    </a>
+  </nav>
+
+  <main>
\ No newline at end of file
diff --git a/index.php b/index.php
index 3306025cc..5f35129a9 100644
--- a/index.php
+++ b/index.php
@@ -155,7 +155,7 @@
   ?>
 
   <header class="<?= $headerClass ?>" id="main-actions">
-    <button class="button" onClick="addSubscription()">
+    <button class="button hideOnMobile" onClick="addSubscription()">
       <i class="fa-solid fa-circle-plus"></i>
       <?= translate('new_subscription', $i18n) ?>
     </button>
@@ -568,7 +568,14 @@
   </form>
 </section>
 <script src="scripts/dashboard.js?<?= $version ?>"></script>
-
 <?php
+if (isset($_GET['add'])) {
+  ?>
+  <script>
+    addSubscription();
+  </script>
+  <?php
+}
+
 require_once 'includes/footer.php';
 ?>
\ No newline at end of file
diff --git a/styles/dark-theme.css b/styles/dark-theme.css
index 1e7972cd9..ad8fc6d9c 100644
--- a/styles/dark-theme.css
+++ b/styles/dark-theme.css
@@ -248,4 +248,18 @@ input {
 .totp-backup-codes {
     background-color: #111;
     border: 2px dashed #444;
-}
\ No newline at end of file
+}
+
+.mobile-nav {
+    background-color: #222;
+    border-top: #111;
+    box-shadow: 0 -2px 5px rgba(120, 120, 120, 0.1);;
+}
+
+.mobile-nav>a {
+    padding: 0px 10px;
+}
+
+.mobile-nav>a.active>i {
+    color: #BBB;
+  }
\ No newline at end of file
diff --git a/styles/styles.css b/styles/styles.css
index e9032a930..541555949 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -10,6 +10,12 @@ body.no-scroll {
   overflow-y: hidden;
 }
 
+@media (max-width: 768px) {
+  main {
+    margin-bottom: 60px;
+  }
+}
+
 input,
 button,
 select,
@@ -117,8 +123,10 @@ header .logo .logo-image svg {
   display: inline-block;
 }
 
-.dropbtn:after {
-  content: " ▼";
+@media (min-width: 768px) {
+  .dropbtn:after {
+    content: " ▼";
+  }
 }
 
 .dropbtn {
@@ -277,12 +285,12 @@ button:hover svg .main-color {
   flex-grow: 1;
 }
 
-.top-actions .search > input[type="text"] {
+.top-actions .search>input[type="text"] {
   padding-right: 40px;
 }
 
 .top-actions>.search>.search-icon,
-.top-actions>.search>.clear-search  {
+.top-actions>.search>.clear-search {
   float: right;
   right: 15px;
   margin-top: -35px;
@@ -1664,7 +1672,7 @@ button.dark-theme-button i {
 
 @media (max-width: 768px) {
   .toast {
-    bottom: 0px;
+    bottom: 60px;
     right: 0px;
     left: 0px;
     width: 100%;
@@ -2471,7 +2479,7 @@ input[type="radio"]:checked+label::after {
   color: #222;
 }
 
-.update-banner > span {
+.update-banner>span {
   font-weight: 500;
 }
 
@@ -2553,4 +2561,59 @@ input[type="radio"]:checked+label::after {
   list-style: none;
   padding: 5px 10px;
   font-weight: 500;
+}
+
+.mobile-nav {
+  display: none;
+}
+
+@media (max-width: 768px) {
+  .mobile-nav {
+    position: fixed;
+    bottom: 0px;
+    width: 100%;
+    background-color: #FFFFFF;
+    border-top: 1px solid #EEEEEE;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    z-index: 2;
+    padding: 10px 0px;
+    font-size: 28px;
+    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
+    box-sizing: border-box;
+    align-items: baseline;
+  }
+  
+  .mobile-nav>a>i {
+    color: #AAA;
+  }
+  
+  .mobile-nav>a.active>i {
+    color: #202020;
+  }
+  
+  .mobile-nav>a.secondary,
+  .mobile-nav>button {
+    background-color: var(--main-color);
+    border: none;
+    border-radius: 35px;
+    padding: 3px 8px;
+  }
+
+  .mobile-nav>button {
+    border: none;
+    font-size: 28px;
+  }
+  
+  .mobile-nav>a.secondary>i,
+  .mobile-nav>button>i {
+    color: #fff;
+  }
+}
+
+@media (max-width: 768px) {
+  .hideOnMobile {
+    display: none !important;
+  }
 }
\ No newline at end of file