Feat: Add Scrollup and Hamburgur & styling fixes

fayausa · May 4, 2023 · fbafb81 · fbafb81
1 parent 466af38
commit fbafb81
Show file tree

Hide file tree

Showing 15 changed files with 255 additions and 163 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^4.8.0",
     "react-router-dom": "^6.4.2",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"

diff --git a/src/App.js b/src/App.js
@@ -1,4 +1,5 @@
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import ScrollButton from "./Components/ScrollButton/ScrollButton";
 
 import DomainDetails from "./Pages/DomainDetails/DomainDetails";
 import Landing from "./Pages/Landing/Landing";
@@ -13,6 +14,7 @@ function App() {
           <Route path="/:id" element={<DomainDetails />} />
         </Routes>
       </Router>
+      <ScrollButton />
     </div>
   );
 }

diff --git a/src/Components/DomainDetails/Card/Card.css b/src/Components/DomainDetails/Card/Card.css
@@ -27,13 +27,15 @@
 
 .topic-card h2 {
   font-weight: 500;
+  color: rgb(48, 46, 46);
   font-size: 1.875rem;
   line-height: 1.3;
 }
 
 .topic-card p {
   font-weight: 300;
   font-size: 1rem;
+  color: rgb(66, 64, 64);
   line-height: 1.3;
   max-width: 100%;
   text-overflow: ellipsis;
@@ -44,6 +46,7 @@
 }
 
 .topic-card a {
+  color: rgb(66, 64, 64);
   display: flex;
   align-items: center;
   gap: 0.625rem;
@@ -52,7 +55,8 @@
 }
 
 .link-text {
-  font-weight: 500;
+  color: black;
+  font-weight: light;
   font-size: 1rem;
   line-height: 1.3;
 }

diff --git a/src/Components/DomainDetails/Card/Card.jsx b/src/Components/DomainDetails/Card/Card.jsx
@@ -23,7 +23,7 @@ const Card = ({
       {photo && (
         <div className="img-wrapper">
           <img
-            alt=""
+            alt="domain image"
             src={require(`../../../data/${id}/images/${photo}`)}
             onError={({ currentTarget }) => {
               currentTarget.onerror = null;

diff --git a/src/Components/Landing/Card/Card.jsx b/src/Components/Landing/Card/Card.jsx
@@ -6,35 +6,35 @@ import { Link } from "react-router-dom";
 const Card = ({ name, image, link, description }) => {
   return (
     <>
-    <Link to={link}>
-    <div className={styles.card}>
-      <div className={styles.card_image}>
-        <img src={image} alt="" className={styles.card_img} />
-      </div>
-      <p className={styles.card_heading}>{name}</p>
-      <p className={styles.card_description}>{description}</p>
-      {link !== "#" && (
-        <Link to={link}>
-          <span className={styles.explore_more}>Explore More </span>
-          <svg
-            width="12"
-            height="12"
-            viewBox="0 0 15 15"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M12.1711 3.983L2.12965 14.0245L0.47998 12.3748L10.5203 2.33333H1.67115V0H14.5045V12.8333H12.1711V3.983Z"
-              fill="#000738"
-            />
-          </svg>
-        </Link>
-      )}
-      {link === "#" && (
-        <span className={styles.explore_more}>Coming Soon!</span>
-      )}
-    </div>
-    </Link>
+      <Link to={link}>
+        <div className={styles.card}>
+          <div className={styles.card_image}>
+            <img src={image} alt="domain images" className={styles.card_img} />
+          </div>
+          <p className={styles.card_heading}>{name}</p>
+          <p className={styles.card_description}>{description}</p>
+          {link !== "#" && (
+            <Link to={link}>
+              <span className={styles.explore_more}>Explore More </span>
+              <svg
+                width="12"
+                height="12"
+                viewBox="0 0 15 15"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M12.1711 3.983L2.12965 14.0245L0.47998 12.3748L10.5203 2.33333H1.67115V0H14.5045V12.8333H12.1711V3.983Z"
+                  fill="#000738"
+                />
+              </svg>
+            </Link>
+          )}
+          {link === "#" && (
+            <span className={styles.explore_more}>Coming Soon!</span>
+          )}
+        </div>
+      </Link>
     </>
   );
 };

diff --git a/src/Components/Landing/Card/Card.module.css b/src/Components/Landing/Card/Card.module.css
@@ -20,7 +20,7 @@
 }
 .card:hover {
   transform: translateY(-7px);
-  
+
   box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.15);
 }
 
@@ -29,8 +29,8 @@
   transform: translateX(30px);
 } */
 
-
-.card:hover span, .card:hover svg path {
+.card:hover span,
+.card:hover svg path {
   color: royalblue;
   fill: royalblue;
 }
@@ -73,7 +73,6 @@
   line-height: 22px;
 }
 
-
 .readmore {
   display: flex;
 }

diff --git a/src/Components/Navbar/Navbar.css b/src/Components/Navbar/Navbar.css
@@ -1,42 +1,82 @@
-* {
-  padding: 0;
-  margin: 0;
-  box-sizing: border-box;
-}
-
 .Navbar_image {
-  width: 62px;
+  width: 120px;
   height: auto;
+  padding: 25px;
 }
 
-nav {
+.header {
+  height: 180px;
+  padding: 0 20px;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding-top: 40px;
-  padding-left: 50px;
-  padding-right: 50px;
-  padding-bottom: 70px;
 }
 
-nav ul li {
+.header nav {
+  position: absolute;
+  top: 55px;
+  right: 20px;
+}
+
+nav a {
+  margin: 0 20px;
   font-family: "Poppins";
-  font-style: normal;
   font-weight: 500;
   font-size: 20px;
-  line-height: 32px;
-  list-style-type: none;
-  display: inline-block;
-  padding: 10px 10px;
-}
-
-nav ul li a {
   color: black;
   text-decoration: none;
-  font-size: 1.1rem;
 }
 
-nav ul li a:hover {
+nav a:hover {
   transition: 0.1s;
   border-bottom: 2px solid black;
 }
+
+.header .nav-btn {
+  visibility: hidden;
+  opacity: 0;
+}
+
+@media only screen and (max-width: 768px) {
+  .header nav {
+    position: fixed;
+    top: 0;
+    right: 0;
+    height: 100%;
+    width: 45%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    background-color: rgb(228, 228, 228);
+    padding: 3rem 0.5rem;
+    gap: 1.5rem;
+    transition: 0.5s;
+    transform: translateX(100%);
+    /* this transform code automatically pushes the nav to the inside making it collapsed when the screen is small */
+  }
+
+  .header .nav_popout {
+    transform: none; /* reset any previous transformations applied to the nav, this making nav expanded again*/
+    /* pointer-events: none; */
+  }
+
+  .header .nav-btn {
+    -webkit-tap-highlight-color: transparent;
+    visibility: visible;
+    opacity: 1;
+    padding: 5px;
+    cursor: pointer;
+    font-size: 1.5rem;
+    background: transparent;
+    color: black;
+    border: none;
+    outline: none;
+  }
+
+  .header nav .nav-close-btn {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+  }
+}
diff --git a/src/Components/Navbar/Navbar.jsx b/src/Components/Navbar/Navbar.jsx
@@ -1,34 +1,50 @@
-import React from "react";
+import React, { useRef } from "react";
 import "./Navbar.css";
-import { Link, useParams } from "react-router-dom";
+import { Link, useParams, useLocation } from "react-router-dom";
+import { FaBars, FaTimes } from "react-icons/fa";
+
 function Navbar() {
   const { id } = useParams();
+  const location = useLocation();
+  const navRef = useRef();
+
+  const showNavBar = () => {
+    navRef.current.classList.toggle("nav_popout");
+  };
+
   return (
-    <nav>
+    <header className="header">
       <Link to="/">
         <img
           src="/assets/tm-logo.png"
           className="Navbar_image"
           alt="logo"
         ></img>
       </Link>
-      <ul>
-        <li>
-          <a href="#topics">Tools</a>
-        </li>
-        {id === "ai" ? (
-          <li>
-            <a href="#categories">Categories</a>
-          </li>
-        ) : null}
-        <li>
-          <a href="#blogs">Blogs</a>
-        </li>
-        <li>
-          <a href="#people">People</a>
-        </li>
-      </ul>
-    </nav>
+      <nav ref={navRef}>
+        {location.pathname === "/" ? (
+          <>
+            <a href="#cards">Domains</a>
+            <button className="nav-btn nav-close-btn">
+              <FaTimes onClick={showNavBar} />
+            </button>
+          </>
+        ) : (
+          <>
+            <a href="#topics">Tools</a>
+            {id === "ai" ? <a href="#categories">Categories</a> : null}
+            <a href="#blogs">Blogs</a>
+            <a href="#people">People</a>
+            <button className="nav-btn nav-close-btn">
+              <FaTimes onClick={showNavBar} />
+            </button>
+          </>
+        )}
+      </nav>
+      <button className="nav-btn">
+        <FaBars onClick={showNavBar} />
+      </button>
+    </header>
   );
 }
 

diff --git a/src/Components/ScrollButton/ScrollButton.css b/src/Components/ScrollButton/ScrollButton.css
@@ -0,0 +1,17 @@
+.scroll-button {
+  position: fixed;
+  left: 48%;
+  bottom: 20px;
+  font-size: 2.5rem;
+  z-index: 1;
+  cursor: pointer;
+  color: green;
+  -webkit-tap-highlight-color: transparent;
+}
+
+@media only screen and (max-width: 768px) {
+  .scroll-button {
+    position: fixed;
+    left: 80%;
+  }
+}