From e2198ab5a2691d5815d41a0ccd6adcc71da42170 Mon Sep 17 00:00:00 2001
From: Judit Pacsai <judit.pacsai@gmail.com>
Date: Fri, 27 Oct 2023 15:07:59 +0200
Subject: [PATCH 1/2] feat: add shown state to Navbar #2

---
 src/components/Navbar.js | 21 +++++++++++++--------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/components/Navbar.js b/src/components/Navbar.js
index cd53712..5fc554f 100644
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 import "../includes/css/navbar.css"
 import logo from "../includes/images/aks.png"
@@ -6,6 +6,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faLaptop,faCircleInfo, faContactBook, faHome, faLaptopCode, faTimeline } from '@fortawesome/free-solid-svg-icons';
 const Navbar = () => {
 
+  const [isShown, setIsShown] = useState(false);
+
   const location = useLocation();
 
  
@@ -35,7 +37,10 @@ const Navbar = () => {
   return (
     
       <div className='fixed z-40 md:w-[200px] w-full'>
-        <div className="sticky navbar bg-slate-800 flex items-center md:justify-content-start md:items-start justify-between px-2 md:px-0 md:justify-center h-[80px] md:h-[100vh] shadow-sm md:shadow-lg shadow-gray-800">
+        <div 
+          onMouseEnter={() => setIsShown(true)}
+          onMouseLeave={() => setIsShown(false)}
+          className={"sticky navbar bg-slate-800 flex items-center md:justify-content-start md:items-start justify-between px-2 md:px-0 md:justify-center h-[80px] md:h-[100vh] shadow-sm md:shadow-lg shadow-gray-800" + (isShown ? ' shown-side' : 'hidden-side')}>
           <Link className="md:hidden"to="/"><img className='h-[50px]' src={logo} alt="" /></Link>
             <div className="flex flex-col py-4 px-2 md:hidden" id="menu-btn" onClick={toggleMenu}>
                 <div className='bg-red-800 rounded-xl h-[5px] w-[40px] bar1 m-0.5'></div>
@@ -45,12 +50,12 @@ const Navbar = () => {
           <div className="navbar-list w-full h-full hidden md:flex text-center shadow-xl">
             <ul className='flex w-full flex-col h-full justify-evenly'>
               <div className={`navbar-list-item border-b h-full flex items-center justify-center border-slate-500 text-lg p-3`}><Link to="/"><img src={logo} className='w-[100px]' alt="" /></Link></div>
-              <Link className={`flex justify-between w-full items-center navbar-list-item ${location.pathname==='/'? "bg-slate-600" : ""} text-white hover:bg-slate-700 border-b h-full  border-slate-500 text-xl`} to="/"><li className='px-5'> <FontAwesomeIcon icon={faHome}/> Home</li></Link>
-              <Link className={`flex justify-between w-full items-center navbar-list-item ${location.pathname==='/about'? "bg-slate-600" : ""} text-white hover:bg-slate-700 border-b h-full  border-slate-500 text-xl`} to="/about"><li className='px-5'> <FontAwesomeIcon icon={faCircleInfo}/> About</li></Link>
-              <Link className={`flex justify-between w-full items-center navbar-list-item ${location.pathname==='/timeline'? "bg-slate-600" : ""} text-white hover:bg-slate-700 border-b h-full  border-slate-500 text-xl`} to="/timeline"><li className='px-5'><FontAwesomeIcon icon={faTimeline}/> Timeline</li></Link>
-              <Link className={`flex justify-between w-full items-center navbar-list-item ${location.pathname==='/skills'? "bg-slate-600" : ""} text-white hover:bg-slate-700 border-b h-full  border-slate-500 text-xl`} to="/skills"><li className='px-5'><FontAwesomeIcon icon={faLaptop} /> Skills</li></Link>
-              <Link className={`flex justify-between w-full items-center navbar-list-item ${location.pathname==='/projects'? "bg-slate-600" : ""} text-white hover:bg-slate-700 border-b h-full  border-slate-500 text-xl`} to="/projects"><li className='px-5'><FontAwesomeIcon icon={faLaptopCode} /> Projects</li></Link>
-              <Link className={`flex justify-between w-full items-center navbar-list-item ${location.pathname==='/contact'? "bg-slate-600" : ""} text-white hover:bg-slate-700 border-b h-full  border-slate-500 text-xl`} to="/contact"><li className='px-5'><FontAwesomeIcon icon={faContactBook} /> Contact</li></Link>
+              <Link className={`flex justify-between w-full items-center navbar-list-item ${location.pathname==='/'? "bg-slate-600" : ""} text-white hover:bg-slate-700 border-b h-full  border-slate-500 text-xl`} to="/"><li className='px-5'> <FontAwesomeIcon icon={faHome}/>{isShown ?  ' Home' : ''}</li></Link>
+              <Link className={`flex justify-between w-full items-center navbar-list-item ${location.pathname==='/about'? "bg-slate-600" : ""} text-white hover:bg-slate-700 border-b h-full  border-slate-500 text-xl`} to="/about"><li className='px-5'> <FontAwesomeIcon icon={faCircleInfo}/> {isShown ?  ' About' : ''}</li></Link>
+              <Link className={`flex justify-between w-full items-center navbar-list-item ${location.pathname==='/timeline'? "bg-slate-600" : ""} text-white hover:bg-slate-700 border-b h-full  border-slate-500 text-xl`} to="/timeline"><li className='px-5'><FontAwesomeIcon icon={faTimeline}/> {isShown ?  ' Timeline' : ''}</li></Link>
+              <Link className={`flex justify-between w-full items-center navbar-list-item ${location.pathname==='/skills'? "bg-slate-600" : ""} text-white hover:bg-slate-700 border-b h-full  border-slate-500 text-xl`} to="/skills"><li className='px-5'><FontAwesomeIcon icon={faLaptop} /> {isShown ?  ' Skills' : ''}</li></Link>
+              <Link className={`flex justify-between w-full items-center navbar-list-item ${location.pathname==='/projects'? "bg-slate-600" : ""} text-white hover:bg-slate-700 border-b h-full  border-slate-500 text-xl`} to="/projects"><li className='px-5'><FontAwesomeIcon icon={faLaptopCode} /> {isShown ?  ' Projects' : ''}</li></Link>
+              <Link className={`flex justify-between w-full items-center navbar-list-item ${location.pathname==='/contact'? "bg-slate-600" : ""} text-white hover:bg-slate-700 border-b h-full  border-slate-500 text-xl`} to="/contact"><li className='px-5'><FontAwesomeIcon icon={faContactBook} /> {isShown ?  ' Contact' : ''}</li></Link>
             </ul>
           </div>
         </div>

From 9291cd9372e903cf5b46438fb2fc31e7bb2a44ed Mon Sep 17 00:00:00 2001
From: Judit Pacsai <judit.pacsai@gmail.com>
Date: Fri, 27 Oct 2023 17:57:54 +0200
Subject: [PATCH 2/2] style: changing component width #2

---
 src/components/Navbar.js | 4 ++--
 src/pages/Home.js        | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Navbar.js b/src/components/Navbar.js
index 5fc554f..fb0a2a5 100644
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@@ -36,11 +36,11 @@ const Navbar = () => {
 
   return (
     
-      <div className='fixed z-40 md:w-[200px] w-full'>
+      <div className={`fixed z-40 md:w-[${isShown ? 200 : 70}px] w-full`}>
         <div 
           onMouseEnter={() => setIsShown(true)}
           onMouseLeave={() => setIsShown(false)}
-          className={"sticky navbar bg-slate-800 flex items-center md:justify-content-start md:items-start justify-between px-2 md:px-0 md:justify-center h-[80px] md:h-[100vh] shadow-sm md:shadow-lg shadow-gray-800" + (isShown ? ' shown-side' : 'hidden-side')}>
+          className="sticky navbar bg-slate-800 flex items-center md:justify-content-start md:items-start justify-between px-2 md:px-0 md:justify-center h-[80px] md:h-[100vh] shadow-sm md:shadow-lg shadow-gray-800">
           <Link className="md:hidden"to="/"><img className='h-[50px]' src={logo} alt="" /></Link>
             <div className="flex flex-col py-4 px-2 md:hidden" id="menu-btn" onClick={toggleMenu}>
                 <div className='bg-red-800 rounded-xl h-[5px] w-[40px] bar1 m-0.5'></div>
diff --git a/src/pages/Home.js b/src/pages/Home.js
index 0ee6817..ac3d73f 100644
--- a/src/pages/Home.js
+++ b/src/pages/Home.js
@@ -11,7 +11,7 @@ const Home = () => {
 
   return (
 
-    <div className="w-full mt-[80px] ml-0 md:ml-[200px] md:mt-0">
+    <div className="w-full mt-[80px] ml-0 md:ml-[80px] md:mt-0">
       <TsParticles />
       <div className={`z-10 flex flex-col justify-end md:bg-[url('${blackBg1}')] bg-[url('${blackBg2}')] backdrop-blur-xl h-[200px] lg:bg-cover bg-left text-white`}>