[EuiSideNav] Migrate from class to function component

[CollegeRideOut]

Summary

What: Convert EuiSideNav from a class component to a function component.

Why: Closes #9475

How:

• Replaced the class component with a function component using hooks

• Removed withEuiTheme HOC and replaced it with useEuiTheme

• Preserved existing behavior and structure

• Replaced defaultProps with default values in props destructuring

---

API Changes

component / parent | prop / child | change | description -- | -- | -- | -- N/A |   | None | No public API changes

---

Impact Assessment

• 🔴 Breaking changes

• 💅 Visual changes

• 🧪 Test impact

• 🔧 Hard to integrate

Impact level: 🟢 None

---

QA instructions for reviewer

• Verify EuiSideNav renders as expected

• Confirm navigation items expand/collapse correctly

• Ensure no visual or behavioral regressions

---

Checklist before marking Ready for Review

• Filled out all sections above

## Summary

What: Convert EuiSideNav from a class component to a function component.

Why: Closes [#9475](#9475)

How:

• Replaced the class component with a function component using hooks
• Removed withEuiTheme HOC and replaced it with useEuiTheme
• Preserved existing behavior and structure
• Replaced defaultProps with default values in props destructuring

---

API Changes

component / parent	prop / child	change	description
N/A		None	No public API changes

---

Impact level: 🟢 None

---

QA instructions for reviewer

• Verify EuiSideNav renders as expected
• Confirm navigation items expand/collapse correctly
• Ensure no visual or behavioral regressions

---

Checklist before marking Ready for Review

• Filled out all sections above

This Message was generated by AI. Also I used AI tools when working on this but I did all the changes myself (locally my yarn lint was not working, but I did run prettier before commiting)

[github-actions]

👋 Since this is a community submitted pull request, a Buildkite build has not been started automatically. Would an Elastic organization member please verify the contents of this pull request and kick off a build manually?

[weronikaolejniczak]

buildkite test this

[Copilot]

Pull request overview

Migrates EuiSideNav from a stateless class component using withEuiTheme to a function component using hooks, aligning it with modern EUI patterns and closing #9475.

Changes:

• Converted EuiSideNav from class to function component
• Replaced withEuiTheme with useEuiTheme
• Replaced defaultProps with default values in props destructuring

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[weronikaolejniczak]

buildkite test this

[elasticmachine]

💔 Build Failed

• Buildkite Build
• Commit: 7dc07a0

Failed CI Steps

• :docusaurus: Build and deploy documentation website

History

• 💚 Build #3084 succeeded 7e25949

[elasticmachine]

💔 Build Failed

• Buildkite Build
• Commit: 7dc07a0

Failed CI Steps

• 🔨 EUI pull request test

History

• 💚 Build #6132 succeeded 7e25949

[weronikaolejniczak]

The CI is failing at the Linting step. It's because there's a syntax issue in packages/eui/src/components/side_nav/side_nav.tsx. @CollegeRideOut could you update it? 🙏🏻