Create Logo component + click redirect

[SAUMILDHANKAR]

Issue created with ChatGPT models' help¹

---

Description

Create the ProgramEarth logo component used inside the side navigation and implement its click redirect/navigation behavior¹. When a user clicks the ProgramEarth logo or the expanded hover label text, the application should open the ProgramEarth website in a new browser tab while preserving the current application state².

This issue mainly focuses on creating the frontend logo component, external redirect behavior, hover-expanded label interaction, and safe external link handling³.

The ProgramEarth logo component should visually support both collapsed and expanded side navigation states from the Figma design⁴.

---

Goals

• Create reusable ProgramEarth logo component¹
• Implement redirect to ProgramEarth website²
• Open external link safely in new tab³
• Show ProgramEarth text label during hover-expanded state⁴
• Make both logo and label clickable¹
• Preserve side nav behavior while switching tabs²

---

Implementation Instructions

• Create reusable LogoComponent or ProgramEarthLogo component¹
• Use React + TypeScript + Material UI²
• Clicking logo should open ProgramEarth website³
• Clicking expanded ProgramEarth text label should also open website⁴
• External link should open in new tab using safe link handling¹
• Use target="_blank" with appropriate noopener and noreferrer protections²
• Preserve side navigation layout behavior³
• Text label should appear when side nav expands⁴
• On mouse leave, side nav should collapse back to original size¹
• Contributors may use useState, useEffect, CSS transitions, or MUI transitions²
• Keep implementation responsive for smaller screens³
• Logo image asset should be obtained from Figma design

---

Expected Functionalities

Hover Interaction

• User moves cursor over side nav¹
• Side nav expands horizontally²
• ProgramEarth label appears next to logo³
• Logo and label remain clickable⁴

Click Interaction

• User clicks ProgramEarth logo¹
• OR user clicks ProgramEarth label²
• ProgramEarth website opens in new browser tab³
• Existing application session/tab remains open⁴

Mouse Leave Interaction

• Cursor leaves navigation area¹
• Side nav returns to original collapsed width²
• Text labels disappear³

---

Figma Layout Specs

row top vertical spacer
Size="16px";¹
Show=false;²
width: 360;³
height: 16;⁴
angle: 0 deg;¹
opacity: 1;²

ProgramEarth logo

• width: 44;³
• height: 44;⁴
• angle: 0 deg;¹
• opacity: 1;²

---

after logo spacer
Size="24px";³
Show=false;⁴
width: 360;¹
height: 24;²
angle: 0 deg;³
opacity: 1;⁴

tab menu
width: 54;¹
height: 895;²
angle: 0 deg;³
opacity: 1;⁴

---

Suggested Technical Structure (Optional)

Possible component structure:¹

components/sidenav/
 ├── SideNav.tsx
 ├── ProgramEarthLogo.tsx
 ├── HoverLabel.tsx
 └── NavMenuItem.tsx

Possible utility structure:²

utils/
 ├── externalLinks.ts
 └── navigationHelpers.ts

---

Notes

• Hover label rendering may use useState, useEffect, CSS transitions, or Material UI transitions³
• Keep component structure reusable for future branding/navigation elements¹
• Avoid tightly coupling redirect logic directly into UI rendering where possible²
• External links should use safe browser security practices such as noopener and noreferrer³
• ProgramEarth label should remain accessible and clickable during expanded hover state⁴

---

Acceptance Criteria

• ProgramEarth logo component renders correctly¹
• Clicking logo opens ProgramEarth website²
• Clicking ProgramEarth text label opens website³
• External link opens in new tab⁴
• Safe external link protections (noopener, noreferrer) are implemented¹
• Text labels appear during hover-expanded state²
• Side nav collapses correctly on mouse leave³
• Component uses React + TypeScript + MUI⁴
• Code structure supports future navigation scalability¹

---

Resources

¹ [Material UI List Documentation](https://mui.com/material-ui/react-list/?utm_source=chatgpt.com)
² [MDN window.open Documentation](https://developer.mozilla.org/en-US/docs/Web/API/Window/open?utm_source=chatgpt.com)
³ [React useEffect Documentation](https://react.dev/reference/react/useEffect?utm_source=chatgpt.com)
⁴ [Web.dev External Link Security Guide](https://web.dev/external-anchors-use-rel-noopener/?utm_source=chatgpt.com)

ProgramEarth Website:
[ProgramEarth Official Website](https://programearth.org?utm_source=chatgpt.com)

Reference Figma Design:
[OpenNature Map Figma Design](https://www.figma.com/design/eRcnlUKzSsIJv3JcOMddwU/OpenNature-Map?node-id=5771-3944&t=PvHYPjlEBBF151A0-0It&utm_source=chatgpt.com)