New sidebar, sura.html improvements

6 files changed, 99 insertions, 21 deletions

diff --git a/src/attribution.html b/src/attribution.html
index 7f7c45a..19493ea 100644
--- a/src/attribution.html
+++ b/src/attribution.html
@@ -27,15 +27,16 @@
             try {
                 process.versions['electron'];
                 var windowBtns = document.getElementsByClassName('window-button-container');
-                
+
                 for (var i = 0; i < windowBtns.length; i++) {
                     windowBtns[i].style.display = 'grid';
                 }
 
                 document.getElementById('openquran-link').href = 'index.html'
+                document.getElementById('openquran-home').href = 'index.html'
             } catch {
                 var windowBtns = document.getElementsByClassName('window-button-container');
-                
+
                 for (var i = 0; i < windowBtns.length; i++) {
                     windowBtns[i].style.display = 'none';
                 }
@@ -68,24 +69,36 @@
         </div>
     </div>
     <div id="main-container">
-        <div class="main height-no-scroll" style="margin-left: 0; border-radius: 0;">
+        <div class="main-sidebar">
+            <a href="./" class="sidebar-buttons" id="openquran-home"><i class="fa-solid fa-house"></i></a>
+            <a href="sura.html" class="sidebar-buttons"><i class="fa-solid fa-quran"></i></a>
+            <a href="attribution.html" class="sidebar-buttons"><i class="fa-solid fa-scroll"></i></a>
+        </div>
+        <div class="main height-no-scroll" style="margin-left: 60px;">
             <div class="scroll main-content-padding">
                 <div style="max-width: 1200px; margin-left: auto; margin-right: auto;">
                     <h1 id="header" class="title" style="text-align: center;">Credits & Attribution</h1>
                     <hr style="margin-top: 20px; height: 2px; background-color: black; border: none;">
                     <br>
-                    <a href="https://github.com/altaf-creator/OpenQuran" target=_blank class="link" style="text-align: center; width: 100%; display: inline-block;"><i class="fa-brands fa-github"></i> GitHub</a>
+                    <a href="https://github.com/altaf-creator/OpenQuran" target=_blank class="link"
+                        style="text-align: center; width: 100%; display: inline-block;"><i
+                            class="fa-brands fa-github"></i> GitHub</a>
                     <h2>Quran Text, Metadata, & Translations</h2>
                     <a href="https://tanzil.net/docs/resources" class="link" target=_blank>The Tanzil Project</a>
                     <h2>Developer</h2>
                     <a href="https://altaf-creator.github.io/" class="link" target=_blank>altaf-creator</a>
+                    <h2>Icons</h2>
+                    <a href="https://fontawesome.com/" class="link" target="_blank">Font Awesome - licensed under the CC
+                        BY 4.0 license</a>
                     <h2>More Information</h2>
                     <ul>
                         <li><b>Script Type:</b> Uthmani</li>
                         <li><b>English Translation Author:</b> Saheeh International</li>
                         <li><b>Indonesia Translation Author:</b> Kementerian Agama Indonesia</li>
                     </ul>
-                    <a href="https://altaf.mit-license.org/" target=_blank class="link" style="text-align: center; width: 100%; display: inline-block;"><i>Licensed under the MIT License</i></a>
+                    <a href="https://altaf.mit-license.org/" target=_blank class="link"
+                        style="text-align: center; width: 100%; display: inline-block;"><i>Licensed under the MIT
+                            License</i></a>
                 </div>
             </div>
         </div>
diff --git a/src/index.html b/src/index.html
index 813573f..89acd8c 100644
--- a/src/index.html
+++ b/src/index.html
@@ -51,13 +51,18 @@
         <a href="attribution.html" class="link">Attribution</a>
     </div>
     <div id="main-container">
-        <div class="main height-no-scroll" style="margin-left: 0; border-radius: 0;">
+        <div class="main-sidebar">
+            <a href="./" class="sidebar-buttons" id="openquran-home"><i class="fa-solid fa-house"></i></a>
+            <a href="sura.html" class="sidebar-buttons"><i class="fa-solid fa-quran"></i></a>
+            <a href="attribution.html" class="sidebar-buttons"><i class="fa-solid fa-scroll"></i></a>
+        </div>
+        <div class="main height-no-scroll" style="margin-left: 60px;">
             <div class="scroll main-content-padding">
-                <div style="max-width: 1200px; margin-left: auto; margin-right: auto;">
+                <div style="max-width: 1050px; margin-left: auto; margin-right: auto;">
                     <h1 id="header" class="title" style="text-align: center;">Sura List</h1>
                     <hr style="margin-top: 20px; height: 2px; background-color: black; border: none;">
                     <div id="main">
-                        <ul style="list-style-type: none; padding: 0; margin: 0; column-count: auto; column-width: 400px; column-gap: 0;" id="sura-ul">
+                        <ul style="list-style-type: none; padding: 0; margin: 0; column-count: auto; column-width: 350px; column-gap: 0;" id="sura-ul">
                         </ul>
                     </div>
                 </div>
diff --git a/src/scripts/quran.js b/src/scripts/quran.js
index 76c18bf..c50d9c0 100644
--- a/src/scripts/quran.js
+++ b/src/scripts/quran.js
@@ -23,22 +23,29 @@ function getUrlVars() {
 
 function quranOnLoad() {
     var a = getUrlVars()["sura"];
-    load(a, tIndex);
+
+    if (a) {
+        load(a, tIndex);
+    } else {
+        load(1, tIndex)
+    }
+
     loadSuraButtons();
 
     try {
         process.versions['electron'];
-        
+
         var windowBtns = document.getElementsByClassName('window-button-container');
-        
+
         for (var i = 0; i < windowBtns.length; i++) {
             windowBtns[i].style.display = 'grid';
         }
-        
+
         document.getElementById('openquran-link').href = 'index.html'
+        document.getElementById('openquran-home').href = 'index.html'
     } catch {
         var windowBtns = document.getElementsByClassName('window-button-container');
-        
+
         for (var i = 0; i < windowBtns.length; i++) {
             windowBtns[i].style.display = 'none';
         }
diff --git a/src/scripts/sura-list.js b/src/scripts/sura-list.js
index a799b02..abbae2e 100644
--- a/src/scripts/sura-list.js
+++ b/src/scripts/sura-list.js
@@ -20,6 +20,8 @@ function load() {
         for (var i = 0; i < windowBtns.length; i++) {
             windowBtns[i].style.display = 'grid';
         }
+
+        document.getElementById('openquran-home').href = 'index.html'
     } catch {
         var windowBtns = document.getElementsByClassName('window-button-container');
 
diff --git a/src/styles/style.css b/src/styles/style.css
index 1279478..435bc6a 100644
--- a/src/styles/style.css
+++ b/src/styles/style.css
@@ -203,16 +203,53 @@ hr {
     background-color: rgba(0, 0, 0, 0.2) !important;
 }
 
+.main-sidebar {
+    position: fixed;
+    padding-left: 12.5px;
+    padding-right: 12.5px;
+    height: 100%;
+    z-index: 3;
+}
+
+.sidebar-buttons {
+    width: 35px;
+    height: 35px;
+    background-color: rgba(0, 0, 0, 0);
+    border-radius: 17.5px;
+    display: block;
+    display: grid;
+    box-sizing: border-box;
+    padding: 8px;
+    color: #000;
+    text-decoration: none;
+    transition: all 150ms;
+    margin-top: 12.5px;
+    text-align: center;
+}
+
+.sidebar-buttons:hover {
+    background-color: rgba(0, 0, 0, 0.1);
+}
+
+.sidebar-buttons:active {
+    background-color: rgba(0, 0, 0, 0.2) !important;
+}
+
+.sidebar-buttons:focus {
+    background-color: rgba(0, 0, 0, 0.1) !important;
+}
+
 .sidebar {
     position: fixed;
     height: 100%;
-    width: 260px;
+    width: 230px;
     background-color: #F3F3F3;
     z-index: 1;
+    margin-left: 60px;
 }
 
 .main {
-    margin-left: 260px;
+    margin-left: 290px;
     background-color: #FFF;
     border-top-left-radius: 15px;
     z-index: 3;
@@ -298,6 +335,7 @@ hr {
     z-index: 2;
     border-top-right-radius: 10px;
     background-color: #F3F3F3;
+    display: none;
 }
 
 .dropdown-button {
@@ -393,7 +431,7 @@ hr {
 
     .main {
         border-top-left-radius: 0;
-        margin-left: 0;
+        margin-left: 0 !important;
     }
 
     #dropdown-alternate {
@@ -407,4 +445,12 @@ hr {
     .window-button-container {
         display: none;
     }
+
+    .sidebar-links {
+        display: block;
+    }
+
+    .main-sidebar {
+        display: none;
+    }
 }
\ No newline at end of file
diff --git a/src/sura.html b/src/sura.html
index e90d78a..b003f75 100644
--- a/src/sura.html
+++ b/src/sura.html
@@ -49,6 +49,11 @@
         </div>
     </div>
     <div id="main-container">
+        <div class="main-sidebar" style="border-right: solid 1.5px rgba(0, 0, 0, 0.1); ">
+            <a href="./" class="sidebar-buttons" id="openquran-home"><i class="fa-solid fa-house"></i></a>
+            <a href="sura.html" class="sidebar-buttons"><i class="fa-solid fa-quran"></i></a>
+            <a href="attribution.html" class="sidebar-buttons"><i class="fa-solid fa-scroll"></i></a>
+        </div>
         <div class="sidebar">
             <div class="scroll scroll-auto" id="scroll-sura">
                 <div class="dropdown" tabindex="0" id="dropdown">
@@ -58,9 +63,9 @@
                                 class="fa-solid fa-angle-down"></i></span>
                     </div>
                     <div class="dropdown-content">
-                        <a href="#" class="dropdown-item"
+                        <a href="javascript:void(0);" class="dropdown-item"
                             onclick="changeDropdownName(`dropdown-content`, `English`); changeLang(0);">English</a>
-                        <a href="#" class="dropdown-item"
+                        <a href="javascript:void(0);" class="dropdown-item"
                             onclick="changeDropdownName(`dropdown-content`, `Indonesia`); changeLang(1);">Indonesia</a>
                     </div>
                 </div>
@@ -82,13 +87,13 @@
                                 class="fa-solid fa-angle-down"></i></span>
                     </div>
                     <div class="dropdown-content" style="width: calc(100% - 85px);">
-                        <a href="#" class="dropdown-item"
+                        <a href="javascript:void(0);" class="dropdown-item"
                             onclick="changeDropdownName(`dropdown-content-alternate`, `English`); changeLang(0);">English</a>
-                        <a href="#" class="dropdown-item"
+                        <a href="javascript:void(0);" class="dropdown-item"
                             onclick="changeDropdownName(`dropdown-content-alternate`, `Indonesia`); changeLang(1);">Indonesia</a>
                     </div>
                 </div>
-                <h1 id="header" class="title">Choose a sura</h1>
+                <h1 id="header" class="title">Loading...</h1>
                 <h3 id="subheader" class="subtitle"></h3>
                 <div id="main">