saschabach
/
portfolio-page
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Menü in Array verschoben

This commit is contained in:
Sascha 2025-08-13 14:55:47 +02:00
parent 27ac2dff23
commit 917772780a
1 changed files with 21 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
src/components/layout/navigation.tsx
View File

@ -8,41 +8,29 @@ type Props = {
export default function Navbar({ theme, setTheme }: Props) { export default function Navbar({ theme, setTheme }: Props) {
const [menuOpen, setMenuOpen] = useState(false); const [menuOpen, setMenuOpen] = useState(false);
const menuItems = [
'About',
'Services',
'Skills',
'Certifications',
'Projects',
'Contact',
];
return ( return (
// TODO Centralize strings, create buttons via loops // TODO Centralize strings, create buttons via loops
<div className="navbar"> <div className="navbar">
<div className="navbar__name">Sascha Bach</div> <div className="navbar__name">Sascha Bach</div>
<div className="navbar__container"> <div className="navbar__container">
{menuItems.map((item) => (
<button <button
/*onClick={() => scrollToSection('about')}*/ className="navbar__container__button" key={item}
/* onClick={() => scrollToSection(item.toLowerCase())} */
className="navbar__container__button"
> >
About {item}
</button>
<button
/*onClick={() => scrollToSection('about')}*/ className="navbar__container__button"
>
Services
</button>
<button
/*onClick={() => scrollToSection('about')}*/ className="navbar__container__button"
>
Skills
</button>
<button
/*onClick={() => scrollToSection('about')}*/ className="navbar__container__button"
>
Certifications
</button>
<button
/*onClick={() => scrollToSection('about')}*/ className="navbar__container__button"
>
Projects
</button>
<button
/*onClick={() => scrollToSection('about')}*/ className="navbar__container__button"
>
Contact
</button> </button>
))}
<ThemeToggle theme={theme} setTheme={setTheme} /> <ThemeToggle theme={theme} setTheme={setTheme} />
{/* Burger Button für Mobile */} {/* Burger Button für Mobile */}
<div <div
@ -58,29 +46,12 @@ export default function Navbar({ theme, setTheme }: Props) {
{/* Optional: Mobile Menu Dropdown */} {/* Optional: Mobile Menu Dropdown */}
{menuOpen && ( {menuOpen && (
<div className="navbar__mobile-menu"> <div className="navbar__mobile-menu">
<button>About</button> {menuItems.map((item) => (
<button>Services</button> <button key={item}>{item}</button>
<button>Skills</button> ))}
<button>Certifications</button>
<button>Projects</button>
<button>Contact</button>
</div> </div>
)} )}
</div> </div>
</div> </div>
); );
} }
/*<span className="navbar__container__burger-button__item">About</span>
<span className="navbar__container__burger-button__item">
Services
</span>
<span className="navbar__container__burger-button__item">Skills</span>
<span className="navbar__container__burger-button__item">
Certifications
</span>
<span className="navbar__container__burger-button__item">
Projects
</span>
<span className="navbar__container__burger-button__item">
Contact
</span>*/