Merge pull request #16 from SujalSamai/main

Added Hamburger Menu

Author: Ovenoboyo

assets/css/index.css

@@ -20,6 +20,8 @@ body {
   background-color: #212121 !important;
 }
 
+nav> * a,
+nav> * a:hover,
 footer > * a,
 footer > * a:hover {
   color: white !important;
@@ -37,6 +39,7 @@ a:hover {
 .main {
   min-height: 100vh;
   display: block;
+  color:white !important;
 }
 
 .nav__bar {
@@ -213,7 +216,7 @@ a:hover {
 }
 
 .moosync__navbar-mobileScreen-links li:hover {
-  color: var(--color-text-green);
+  color: #5bb67a;
 }
 
 #hamburger-close {
@@ -267,13 +270,13 @@ a:hover {
 .moosync__navbar-mobileScreen-links li {
   margin-top: 2rem;
   font-size: 2rem;
-  color: white;
+  color: var(--color-white);
   text-align: center;
   cursor: pointer;
 }
 
 .moosync__navbar-mobileScreen-links li:hover {
-  color: var(--green-primary);
+  color: var(--color-text-green);
 }
 
 #hamburger-close {

index.html

@@ -98,6 +98,49 @@
       </button>
       <button id="download__btn" class="navigation__buttons">Download</button>
     </div>
+    <div class="moosync__navbar-mobileScreen">
+        <img
+          loading="lazy"
+          src="/assets/img/hamburgerIcon.svg"
+          alt="Menu"
+          id="hamburger-open"
+        />
+        <div
+          class="moosync__navbar-mobileScreen-overlayClose flex__center slide__bottom"
+          id="menu-overlay"
+        >
+          <img
+            loading="lazy"
+            src="/assets/img/hamburgerCloseIcon.svg"
+            alt="Close"
+            id="hamburger-close"
+          />
+          <ul class="moosync__navbar-mobileScreen-links">
+            <li class="p__normal" id="home"><a href="#">Home</a></li>
+            <li class="p__normal" id="privacy">
+              <a
+                href="https://www.iubenda.com/privacy-policy/70189564/full-legal"
+                >Privacy Policy</a
+              >
+            </li>
+            <li class="p__normal" id="documentation">
+              <a href="/wiki/">Documentation</a>
+            </li>
+            <li class="p__normal" id="github">
+              <a href="https://github.com/Moosync/Moosync">Github</a>
+            </li>
+            <li id="download">
+              <button
+                type="button"
+                name="button"
+                class="navigation__buttons"
+                id="download__btn"
+              >
+                Download
+              </button>
+            </li>
+          </ul>
+        </div>
     </div>
   </nav>
   <header class="heading__page">