Web Applications Portfolio

import { useState, useEffect } from "react";
import Link from "next/link";
import { FaLinkedin, FaEnvelope, FaFilePdf } from "react-icons/fa";
import { useRouter } from "next/router";

export default function Sidebar() {
  const router = useRouter();
  
  // Helper function to determine if a link is active
  const isActive = (href) => {
    // Exact match for homepage
    if (href === "/" && router.pathname === "/") {
      return true;
    }
    // For other pages, check if the pathname starts with the href
    return href !== "/" && router.pathname.startsWith(href);
  };

  const handleLinkClick = (e) => {
    const currentPath = window.location.pathname;
    const clickedPath = e.currentTarget.getAttribute('href');
    
    if (currentPath === clickedPath) {
      e.preventDefault();
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      });
    }
  };

  return (
    <aside className="fixed left-16 top-16 w-[20%] h-screen flex flex-col items-center px-8 py-6 text-center">
      {/* Header: Name */}
      <header className="w-full">
        <Link href="/" className="block mb-12">
          <div className="sidebar-header">
            <span className="text-3xl font-extrabold tracking-wide block">
              MILTIADIS
            </span>
            <span className="text-3xl font-extrabold tracking-wide block">
              STEFANIDIS
            </span>
          </div>
        </Link>
      </header>

      {/* Main Navigation */}
      <main className="w-full flex flex-col gap-14">
        {/* Navigation sections... */}
      </main>

      {/* Footer: Social Icons */}
      <footer className="w-full mt-16">
        <div className="flex justify-center space-x-4">
          <a href="https://linkedin.com" target="_blank">
            <FaLinkedin />
          </a>
          {/* More social icons... */}
        </div>
      </footer>
    </aside>
  );
}