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