Create Logo component + click redirect

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
² MDN window.open Documentation
³ React useEffect Documentation
⁴ Web.dev External Link Security Guide

ProgramEarth Website:
ProgramEarth Official Website

Reference Figma Design:
https://www.figma.com/proto/e9z8edludVssFYABGEWsoI/OpenNature-Map--Hackathons-?node-id=1-1465&viewport=787%2C545%2C0.11&t=Xwc2asfn9Qksi99P-8&scaling=scale-down&content-scaling=fixed&starting-point-node-id=1%3A896&page-id=0%3A1&hide-ui=1

Start by locating the side navigation and compare it with the referenced Figma design; the suggested entry points are components/sidenav/SideNav.tsx and ProgramEarthLogo.tsx. Implement the reusable logo and expanded label with safe external navigation, then verify hover expansion, mouse-leave collapse, both click targets, new-tab behavior, and preserved application state.