added bottom navigation bar (WIP)

marwan · Mar 27, 2024 · 88e36eb · 88e36eb
1 parent 56ec15b
commit 88e36eb
Showing 10 changed files with 126 additions and 12 deletions.
diff --git a/src/App.svelte b/src/App.svelte
@@ -1,18 +1,17 @@
 <script>
-  import { Router, Route } from "svelte-routing";
-
   // Flowbite JS
   import "$lib/flowbite.min.js";
 
   // default user settings
   import "$utils/userSettings";
-  import { currentPageStore } from "$utils/stores";
-
-  import { checkOldBookmarks } from "$utils/checkOldBookmarks";
 
   // check and set user settings from URL parameters
   import "$utils/checkURLParameters";
 
+  import { Router, Route } from "svelte-routing";
+  import { currentPageStore } from "$utils/stores";
+  import { checkOldBookmarks } from "$utils/checkOldBookmarks";
+
   // views
   import Home from "$views/Home.svelte";
   import Chapter from "$views/Chapter.svelte";
@@ -28,7 +27,8 @@
   // ui
   import Navbar from "$ui/Navbar.svelte";
   import Drawer from "$ui/Drawer.svelte";
-  import BottomPlayer from "$ui/BottomPlayer.svelte";
+  // import BottomPlayer from "$ui/BottomPlayer.svelte";
+  import BottomNavbar from "$ui/BottomNavbar.svelte";
   import InitialSetupModal from "$modals/InitialSetupModal.svelte";
   import AudioModal from "$modals/AudioModal.svelte";
 
@@ -43,7 +43,8 @@
     <Drawer />
     <InitialSetupModal />
     <AudioModal />
-    <BottomPlayer />
+    <BottomNavbar />
+    <!-- <BottomPlayer /> -->
 
     <!-- components will be rendered in this div -->
     <div>

diff --git a/src/components/svgs/ChevronLeft.svelte b/src/components/svgs/ChevronLeft.svelte
@@ -0,0 +1,7 @@
+<!-- <svg class="w-6 h-6 text-gray-400 dark::text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m15 19-7-7 7-7" />
+</svg> -->
+
+<svg class="w-6 h-6 text-gray-400 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
+  <path fill-rule="evenodd" d="M13.729 5.575c1.304-1.074 3.27-.146 3.27 1.544v9.762c0 1.69-1.966 2.618-3.27 1.544l-5.927-4.881a2 2 0 0 1 0-3.088l5.927-4.88Z" clip-rule="evenodd" />
+</svg>
diff --git a/src/components/svgs/ChevronRight.svelte b/src/components/svgs/ChevronRight.svelte
@@ -0,0 +1,7 @@
+<!-- <svg class="w-6 h-6 text-gray-400 dark::text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
+</svg> -->
+
+<svg class="w-6 h-6 text-gray-400 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
+  <path fill-rule="evenodd" d="M10.271 5.575C8.967 4.501 7 5.43 7 7.12v9.762c0 1.69 1.967 2.618 3.271 1.544l5.927-4.881a2 2 0 0 0 0-3.088l-5.927-4.88Z" clip-rule="evenodd" />
+</svg>
diff --git a/src/components/svgs/Eye.svelte b/src/components/svgs/Eye.svelte
@@ -0,0 +1,3 @@
+<svg class="w-6 h-6 text-gray-400 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
+  <path fill-rule="evenodd" d="M4.998 7.78C6.729 6.345 9.198 5 12 5c2.802 0 5.27 1.345 7.002 2.78a12.713 12.713 0 0 1 2.096 2.183c.253.344.465.682.618.997.14.286.284.658.284 1.04s-.145.754-.284 1.04a6.6 6.6 0 0 1-.618.997 12.712 12.712 0 0 1-2.096 2.183C17.271 17.655 14.802 19 12 19c-2.802 0-5.27-1.345-7.002-2.78a12.712 12.712 0 0 1-2.096-2.183 6.6 6.6 0 0 1-.618-.997C2.144 12.754 2 12.382 2 12s.145-.754.284-1.04c.153-.315.365-.653.618-.997A12.714 12.714 0 0 1 4.998 7.78ZM12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" clip-rule="evenodd" />
+</svg>
diff --git a/src/components/svgs/PlaySolid.svelte b/src/components/svgs/PlaySolid.svelte
@@ -0,0 +1,3 @@
+<svg class="w-6 h-6 text-gray-400 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
+  <path fill-rule="evenodd" d="M8.6 5.2A1 1 0 0 0 7 6v12a1 1 0 0 0 1.6.8l8-6a1 1 0 0 0 0-1.6l-8-6Z" clip-rule="evenodd" />
+</svg>
diff --git a/src/components/svgs/Settings.svelte b/src/components/svgs/Settings.svelte
@@ -0,0 +1,18 @@
+<svg class="w-6 h-6 text-gray-400 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
+  <path
+    fill-rule="evenodd"
+    d="M9.586 2.586A2 2 0 0 1 11 2h2a2 2 0 0 1 2 2v.089l.473.196.063-.063a2.002 2.002 0 0 1 2.828 0l1.414 1.414a2 2 0 0 1 0 2.827l-.063.064.196.473H20a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2h-.089l-.196.473.063.063a2.002 2.002 0 0 1 0 2.828l-1.414 1.414a2 2 0 0 1-2.828 0l-.063-.063-.473.196V20a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2v-.089l-.473-.196-.063.063a2.002 2.002 0 0 1-2.828 0l-1.414-1.414a2 2 0 0 1 0-2.827l.063-.064L4.089 15H4a2 2 0 0 1-2-2v-2a2 2 0 0 1 2-2h.09l.195-.473-.063-.063a2 2 0 0 1 0-2.828l1.414-1.414a2 2 0 0 1 2.827 0l.064.063L9 4.089V4a2 2 0 0 1 .586-1.414ZM8 12a4 4 0 1 1 8 0 4 4 0 0 1-8 0Z"
+    clip-rule="evenodd"
+  />
+</svg>
+
+<!-- <svg class="w-6 h-6 text-gray-400 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    d="M21 13v-2a1 1 0 0 0-1-1h-.757l-.707-1.707.535-.536a1 1 0 0 0 0-1.414l-1.414-1.414a1 1 0 0 0-1.414 0l-.536.535L14 4.757V4a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v.757l-1.707.707-.536-.535a1 1 0 0 0-1.414 0L4.929 6.343a1 1 0 0 0 0 1.414l.536.536L4.757 10H4a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h.757l.707 1.707-.535.536a1 1 0 0 0 0 1.414l1.414 1.414a1 1 0 0 0 1.414 0l.536-.535 1.707.707V20a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-.757l1.707-.708.536.536a1 1 0 0 0 1.414 0l1.414-1.414a1 1 0 0 0 0-1.414l-.535-.536.707-1.707H20a1 1 0 0 0 1-1Z"
+  />
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" />
+</svg> -->
diff --git a/src/components/ui/BottomNavbar.svelte b/src/components/ui/BottomNavbar.svelte
@@ -0,0 +1,73 @@
+<script>
+  import { Link } from "svelte-routing";
+  import { audioSettingsStore } from "$utils/stores";
+  import { chapterNumberStore, displayTypeStore, currentPageStore, bottomNavbarVisibleStore } from "$utils/stores";
+  import { resetAudioSettings, showAudioModal, playAudio } from "$utils/audioController";
+  import { quranMetaData } from "$data/quranMeta";
+  import { disabledElement } from "$utils/commonStyles";
+  import { updateSettings } from "$utils/updateSettings";
+
+  // icons
+  // import Play from "$svgs/Play.svelte";
+  import PlaySolid from "$svgs/PlaySolid.svelte";
+  import Pause from "$svgs/Pause.svelte";
+  import ChevronLeft from "$svgs/ChevronLeft.svelte";
+  import ChevronRight from "$svgs/ChevronRight.svelte";
+  import Settings from "$svgs/Settings.svelte";
+  import Eye from "$svgs/Eye.svelte";
+
+  function audioController() {
+    if ($audioSettingsStore.isPlaying === true) {
+      resetAudioSettings();
+    } else {
+      playAudio({
+        type: "verse",
+        chapter: $chapterNumberStore,
+        verse: 1,
+        firstToPlay: 1,
+        lastToPlay: quranMetaData[$chapterNumberStore].verses,
+        timesToRepeat: 1,
+        delay: 0,
+      });
+    }
+  }
+</script>
+
+<div class={$currentPageStore === "chapter" ? "block" : "hidden"}>
+  <div class="{$bottomNavbarVisibleStore === true ? 'block' : 'hidden'} fixed z-20 w-full h-16 max-w-xs md:max-w-lg shadow-md -translate-x-1/2 bg-white backdrop-filter backdrop-blur-lg bg-opacity-50 border border-gray-200 rounded-full bottom-4 left-1/2 grayscale">
+    <div class="grid h-full max-w-lg grid-cols-5 mx-auto">
+      <!-- Previous Chapter -->
+      <Link to="/{$chapterNumberStore - 1}" class="{$chapterNumberStore === 1 && disabledElement} inline-flex flex-col items-center justify-center px-5 rounded-s-full hover:bg-gray-50 dark:hover:bg-gray-800 group">
+        <ChevronLeft />
+        <span class="sr-only">Previous Chapter</span>
+      </Link>
+
+      <!-- 2nd icon -->
+      <button type="button" on:click={() => updateSettings({ type: "displayType", value: $displayTypeStore === 5 ? 1 : $displayTypeStore + 1 })} class="opacity-70 inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group">
+        <Eye />
+        <span class="sr-only">Display Type</span>
+      </button>
+
+      <!-- 3rd icon -->
+      <!-- play/pause button -->
+      <div class="flex items-center justify-center">
+        <button type="button" on:click={() => audioController()} class="inline-flex items-center justify-center w-10 h-10 font-medium bg-[#ebebeb] hover:bg-gray-200 rounded-full group focus:ring-2 focus:ring-blue-300 focus:outline-none dark:focus:ring-blue-800">
+          <svelte:component this={$audioSettingsStore.isPlaying === true ? Pause : PlaySolid} />
+          <span class="sr-only">Play/Pause</span>
+        </button>
+      </div>
+
+      <!-- 4th icon -->
+      <button type="button" data-drawer-target="settings-drawer" data-drawer-show="settings-drawer" data-drawer-placement="right" aria-controls="settings-drawer" class="opacity-70 inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group">
+        <Settings />
+        <span class="sr-only">Settings</span>
+      </button>
+
+      <!-- Next Chapter -->
+      <Link to="/{$chapterNumberStore + 1}" class="{$chapterNumberStore === 114 && disabledElement} inline-flex flex-col items-center justify-center px-5 rounded-e-full hover:bg-gray-50 dark:hover:bg-gray-800 group">
+        <ChevronRight />
+        <span class="sr-only">Next Chapter</span>
+      </Link>
+    </div>
+  </div>
+</div>
diff --git a/src/components/ui/Drawer.svelte b/src/components/ui/Drawer.svelte
@@ -8,12 +8,12 @@
 </script>
 
 <!-- drawer component -->
-<div id="drawer-right" class="fixed top-0 right-0 z-40 h-screen p-4 pb-16 overflow-y-auto transition-transform rounded-tl-xl rounded-bl-xl translate-x-full bg-white grayscale w-72 md:w-96 dark:bg-gray-800" tabindex="-1" aria-labelledby="drawer-right-label">
-  <h5 id="drawer-right-label" class="inline-flex items-center mb-4 text-xl space-x-2 font-semibold text-gray-500 dark:text-gray-400">
+<div id="settings-drawer" class="fixed top-0 right-0 z-40 h-screen p-4 pb-16 overflow-y-auto transition-transform rounded-tl-xl rounded-bl-xl translate-x-full bg-white grayscale w-72 md:w-96 dark:bg-gray-800" tabindex="-1" aria-labelledby="settings-drawer-label">
+  <h5 id="settings-drawer-label" class="inline-flex items-center mb-4 text-xl space-x-2 font-semibold text-gray-500 dark:text-gray-400">
     <span>Settings</span>
   </h5>
 
-  <button type="button" data-drawer-hide="drawer-right" aria-controls="drawer-right" class="text-gray-400 bg-transparent hover:bg-[#ebebeb] hover:text-gray-900 rounded-lg text-sm w-8 h-8 absolute top-2.5 right-2.5 inline-flex items-center justify-center dark:hover:bg-gray-600 dark:hover:text-white">
+  <button type="button" data-drawer-hide="settings-drawer" aria-controls="settings-drawer" class="text-gray-400 bg-transparent hover:bg-[#ebebeb] hover:text-gray-900 rounded-lg text-sm w-8 h-8 absolute top-2.5 right-2.5 inline-flex items-center justify-center dark:hover:bg-gray-600 dark:hover:text-white">
     <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
       <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
     </svg>

diff --git a/src/components/ui/Navbar.svelte b/src/components/ui/Navbar.svelte
@@ -1,7 +1,7 @@
 <script>
   import { Link } from "svelte-routing";
   import { quranMetaData, pageNumberKeys } from "$data/quranMeta";
-  import { chapterNumberStore, currentPageStore, lastReadStore, pageURLStore, topNavbarVisibleStore, bottomNavbarVisibleStore } from "$utils/stores";
+  import { chapterNumberStore, currentPageStore, lastReadStore, pageURLStore, topNavbarVisibleStore } from "$utils/stores";
   import { toggleModal } from "$utils/toggleModal";
   import { disabledElement, buttonElement } from "$utils/commonStyles";
 
@@ -160,7 +160,7 @@
   <div id="rightMenuDropdown" class="navbar-dropdown z-30 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-slate-800 dark:border-slate-700">
     <ul class="py-2 text-sm text-gray-700 dark:text-slate-400" aria-labelledby="rightMenuDropdownButton">
       <li class={$currentPageStore === "changelogs" || $currentPageStore === "issues" || $currentPageStore === "about" || $currentPageStore === "search" ? disabledElement : ""}>
-        <button data-drawer-target="drawer-right" data-drawer-show="drawer-right" data-drawer-placement="right" aria-controls="drawer-right" class={rightMenuDropdownClasses}>Settings</button>
+        <button data-drawer-target="settings-drawer" data-drawer-show="settings-drawer" data-drawer-placement="right" aria-controls="settings-drawer" class={rightMenuDropdownClasses}>Settings</button>
       </li>
       <li>
         <Link to="/about">

diff --git a/src/utils/toggleNavbar.js b/src/utils/toggleNavbar.js
@@ -13,11 +13,13 @@ export function toggleNavbar() {
     // scrolling down
     if (scrollTop > lastScrollTop) {
       topNavbarVisibleStore.set(false);
+      // bottomNavbarVisibleStore.set(false);
     }
 
     // scrolling up
     else if (scrollTop < lastScrollTop) {
       topNavbarVisibleStore.set(true);
+      // bottomNavbarVisibleStore.set(true);
     }
 
     lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; // For Mobile or negative scrolling