feat: added socials icons to about section in navbar

fullstackatbrown · Nov 24, 2024 · b5ea2bc · b5ea2bc
1 parent 8248cdf
commit b5ea2bc
Show file tree

Hide file tree

Showing 5 changed files with 796 additions and 125 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/Navbar.css b/src/components/Navbar.css
@@ -67,3 +67,25 @@
   padding: 0; /* Remove padding for tighter layout */
   text-align: right;
 }
+
+.about-section {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%; /* Adjust this value based on your needs */
+}
+
+.social-icons {
+  display: flex;
+  gap: 1rem;
+  margin-left: auto; /* This pushes the social icons to the right */
+}
+
+.social-icon {
+  color: inherit;
+  text-decoration: none;
+}
+
+.social-icon:hover {
+  opacity: 0.8;
+}
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -1,12 +1,11 @@
 import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
-import './Navbar.css'; // Import the CSS file for styling
+import { FaSpotify, FaInstagram, FaTwitter } from 'react-icons/fa';
+import './Navbar.css';
 
 const Navbar: React.FC = () => {
-  // State to track the active navbar item
   const [activeIndex, setActiveIndex] = useState<number | null>(null);
 
-  // Handle click to set the active item
   const handleItemClick = (index: number): void => {
     setActiveIndex(index);
   };
@@ -44,12 +43,38 @@ const Navbar: React.FC = () => {
         </li>
 
         <li
-          className={`home-link ${activeIndex === 3 ? 'active' : ''}`}
+          className={`home-link about-section ${activeIndex === 3 ? 'active' : ''}`}
           onClick={() => handleItemClick(3)}
         >
           <Link to="/about">
             <div className="left-text">ABOUT</div>
           </Link>
+          <div className="social-icons">
+            <a
+              href="https://twitter.com/bsrlive"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="social-icon"
+            >
+              <FaTwitter size={20} />
+            </a>
+            <a
+              href="https://www.instagram.com/bsrlive/"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="social-icon"
+            >
+              <FaInstagram size={20} />
+            </a>
+            <a
+              href="https://open.spotify.com/user/ndis7o6g0u1oq2xvgww7itbvt?si=h8RtzXcKRPeMLna5J2CewA"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="social-icon"
+            >
+              <FaSpotify size={20} />
+            </a>
+          </div>
         </li>
       </ul>
     </nav>

diff --git a/src/pages/About.css b/src/pages/About.css
@@ -52,3 +52,25 @@
     flex: 1 1 100%; /* One per row on smaller screens */
   }
 }
+
+.about-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.social-icons {
+  display: flex;
+  gap: 15px;
+}
+
+.social-icon {
+  color: #000;
+  transition: opacity 0.2s ease;
+  text-decoration: none;
+}
+
+.social-icon:hover {
+  opacity: 0.7;
+}