Merge pull request HimanshuNarware#736 from sailaja-adapa/icons

Added Icons to Navbar
krishnas2004 · Jun 11, 2024 · 2b92cc9 · 2b92cc9
2 parents 3cc99f5 + 78a0be5
commit 2b92cc9
Show file tree

Hide file tree

Showing 6 changed files with 158 additions and 65 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -3,6 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/free-solid-svg-icons": "^6.5.2",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "@reduxjs/toolkit": "^1.9.5",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",

diff --git a/frontend/src/Component/Navbar/NavbarCenter.js b/frontend/src/Component/Navbar/NavbarCenter.js
@@ -1,10 +1,11 @@
-// NavbarCenter.jsx
 import React, { useState } from "react";
 import { useSelector } from "react-redux";
 import "../../style/Navbar.css";
 import NavbarItem from "./NavbarItem";
 import Modal from "../../Component/Modal";
 import RateUsComponent from "../../Component/Rateus"; // Import the RateUsComponent
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faHome, faBookmark, faCode, faInfoCircle, faQuestionCircle, faStar, faEnvelope } from '@fortawesome/free-solid-svg-icons';
 
 function NavbarCenter() {
   const totalBookmarks = useSelector((state) => state.SourceReducer.totalBookmarks) || 0;
@@ -18,25 +19,25 @@ function NavbarCenter() {
     <nav className="navbar-center">
       <ul className="navbar-content mb-2">
         <li className="nav-item">
-          <NavbarItem description="Home" to="/" />
+          <NavbarItem description={<><FontAwesomeIcon icon={faHome} /> Home</>} to="/" />
         </li>
         <li className="nav-item">
-          <NavbarItem description={`Bookmark (${totalBookmarks})`} to="/bookmark" />
+          <NavbarItem description={<><FontAwesomeIcon icon={faBookmark} /> Bookmark ({totalBookmarks})</>} to="/bookmark" />
         </li>
         <li className="nav-item">
-          <NavbarItem description="Open Source" to="/open-source" />
+          <NavbarItem description={<><FontAwesomeIcon icon={faCode} /> Open Source</>} to="/open-source" />
         </li>
         <li className="nav-item">
-          <NavbarItem description="About Us" to="/about" />
+          <NavbarItem description={<><FontAwesomeIcon icon={faInfoCircle} /> About Us</>} to="/about" />
         </li>
         <li className="nav-item">
-          <NavbarItem description="FAQ's" to="/faq" />
+          <NavbarItem description={<><FontAwesomeIcon icon={faQuestionCircle} /> FAQ's</>} to="/faq" />
         </li>
         <li className="nav-item" onClick={handleRateUsClick}>
-          <NavbarItem description="Rate Us" to="#" />
+          <NavbarItem description={<><FontAwesomeIcon icon={faStar} /> Rate Us</>} to="#" />
         </li>
         <li className="nav-item">
-          <NavbarItem description="Contact" to="https://www.linkedin.com/in/himanshunarware/" />
+          <NavbarItem description={<><FontAwesomeIcon icon={faEnvelope} /> Contact</>} to="https://www.linkedin.com/in/himanshunarware/" />
         </li>
       </ul>
       <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>

diff --git a/frontend/src/Component/Navbar/NavbarLeft.js b/frontend/src/Component/Navbar/NavbarLeft.js
@@ -5,7 +5,6 @@ import logo from "../../image/logo.png";
 
 function NavbarLeft(props) {
   useEffect(() => {
-    // Added event listener to handle clicks outside the navbar
     const handleDocumentClick = (e) => {
       if (!e.target.closest('.navbar-left')) {
         props.setShowSideNav(false);
@@ -50,4 +49,4 @@ function NavbarLeft(props) {
   );
 }
 
-export default NavbarLeft;
+export default NavbarLeft;
diff --git a/frontend/src/Component/Rateus.js b/frontend/src/Component/Rateus.js
@@ -4,7 +4,6 @@ import "./../style/Rateus.css";
 function RateUsComponent({ previousContent }) {
   const [rating, setRating] = useState(0);
   const [feedback, setFeedback] = useState("");
-  const [showModal, setShowModal] = useState(false);
 
   const handleStarClick = (star) => {
     setRating(star);
@@ -15,41 +14,40 @@ function RateUsComponent({ previousContent }) {
   };
 
   const handleSubmit = () => {
-    // Reset the state after submitting
-    setRating(0);
-    setFeedback("");
-    setShowModal(false); // Hide the modal after submitting
+    // Check if both rating and feedback are provided
+    if (rating !== 0 && feedback.trim() !== "") {
+      // Reset the state after submitting
+      setRating(0);
+      setFeedback("");
+    } 
   };
 
   return (
-    <>
-      <div className="rate-us-page">
-        <div className="rate-us-container">
-          <h2 className="rate-us-heading">Rate Our Website</h2>
-          <div className="star-rating">
-            {[1, 2, 3, 4, 5].map((star) => (
-              <span
-                key={star}
-                className={star <= rating ? "star filled" : "star"}
-                onClick={() => handleStarClick(star)}
-              >
-                ★
-              </span>
-            ))}
-          </div>
-          <textarea
-            className="feedback-textarea"
-            placeholder="Write your feedback here..."
-            value={feedback}
-            onChange={handleFeedbackChange}
-          ></textarea>
-          <button className="submit-button" onClick={() => setShowModal(true)}>
-            Submit
-          </button>
+    <div className="rate-us-page">
+      <div className="rate-us-container">
+        <h2 className="rate-us-heading">Rate Our Website</h2>
+        <div className="star-rating">
+          {[1, 2, 3, 4, 5].map((star) => (
+            <span
+              key={star}
+              className={star <= rating ? "star filled" : "star"}
+              onClick={() => handleStarClick(star)}
+            >
+              ★
+            </span>
+          ))}
         </div>
+        <textarea
+          className="feedback-textarea"
+          placeholder="Write your feedback here..."
+          value={feedback}
+          onChange={handleFeedbackChange}
+        ></textarea>
+        <button className="submit-button" onClick={handleSubmit}>
+          Submit
+        </button>
       </div>
-    </>
+    </div>
   );
 }
-
 export default RateUsComponent;
diff --git a/frontend/src/style/Navbar.css b/frontend/src/style/Navbar.css
@@ -1,7 +1,6 @@
-/* https://codepen.io/himalayasingh/pen/dqjLgO */
 .navbar {
   background-color: #8b5cf6;
-  padding: 8px 10px;
+  padding: 5px 10px; /* Decreased padding to reduce height */
   position: fixed;
   width: 100%;
   top: 0px;
@@ -10,18 +9,42 @@
   justify-content: space-between;
   font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
     Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif !important;
-  /* border-bottom: 3px solid rgb(28, 174, 184); */
   z-index: 4;
   isolation: isolate;
   mix-blend-mode: normal;
   padding-left: 30px;
 }
 
+
 .navbar-content {
   display: flex;
-  align-items: center;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  justify-content: space-between; /* Add space between items */
+  width: 109%; /* Make the navbar items stretch along the width */
 }
 
+.navbar-content .nav-item {
+  flex-grow: 1; /* Allow items to stretch */
+  text-align: center;
+  margin: 0 15px; /* Add space between items */
+}
+
+
+.navbar-content li {
+  flex-grow: 1; /* Make the navbar items stretch to fill the width */
+  margin: 0 15px; /* Add margin to create space between nav items */
+  font-size: 1.3rem;
+  animation: slideTop 1s ease forwards;
+}
+
+.logo-img {
+  width: 150px;
+  margin-right: auto; /* Move the logo to the left */
+}
+
+
 .card-body img {
   background: transparent;
 }
@@ -127,7 +150,7 @@
   display: block;
   position: absolute;
   height: 5px;
-  width: 100%;
+  width: 90%;
   background: #000;
   border-radius: 9px;
   opacity: 1;
@@ -183,7 +206,14 @@
 }
 
 .logo-img {
-  width: 200px;
+  width: 150px;
+  margin-right: 140px; /* Move the logo to the right */
+}
+.nav-item a {
+  color: #0e0303;
+  text-decoration: none;
+  font-size: 1.2rem; /* Adjust font size as needed */
+  transition: color 0.3s;
 }
 
 .navbar-content ul li a.active {
@@ -261,10 +291,6 @@
   font-weight: 500;
 }
 
-.nav-item {
-  font-size: 1rem;
-}
-
 .Link:hover {
   color: rgb(72, 5, 5);
   text-decoration: none;
@@ -301,14 +327,13 @@
 
 @media (max-width: 580px) {
   .navbar-right {
-    /* display: none; */
     width: 100%;
     justify-content: center;
   }
 
   .logo-img {
     width: 150px;
-    margin-left: -20px;
+    margin-left: -0px;
   }
 
   .sdbar-logo {
@@ -328,14 +353,8 @@
   font-weight: 500;
 }
 
-.nav-item {
-  font-size: 1.6rem;
-}
 
-/* .Link:hover {
-  color: rgb(38, 3, 3);
-  text-decoration: underline;
-} */
+
 .sidebar-btns {
   display: flex;
   justify-content: space-evenly;
@@ -369,14 +388,13 @@
 }
 
 .search {
-  /* border-top: 1px solid #ccc; */
-  /* margin-top: 130px; */
+   margin-top: 0px; 
   position: relative;
 }
 
 .box {
-  margin-top: 5px;
-  /* margin-left: 65px; */
+  margin-top: 15px;
+  margin-left: 65px; 
   outline: none !important;
   border-radius: 20px;
   width: 80% !important;
@@ -402,6 +420,7 @@
   background-clip: padding-box;
   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
   position: relative;
+  padding-right: 40px; /* Adjust as needed */
   flex: 1 1 auto;
   width: 1%;
   margin-bottom: 0;
@@ -443,7 +462,6 @@
 .false:hover {
   background-color: #ffffff;
   color: #000;
-
   background: transparent !important;
   border: none !important;
   display: flex;
@@ -462,3 +480,30 @@
   font-weight: bold !important;
   cursor: pointer;
 }
+
+.navbar-right {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+.search {
+  position: relative;
+}
+
+.search-bar {
+  display: flex;
+  align-items: center;
+}
+
+.box {
+  position: relative;
+}
+
+
+
+.invisible {
+  display: none;
+}
+
+