React Dashboard Layout Challenge

This challenge asks you to build a basic, responsive dashboard layout using React and TypeScript. Dashboards are common interfaces for displaying key data and providing navigation, and a well-structured layout is crucial for usability. This exercise will test your understanding of React components, state management (basic), and CSS-in-JS (styled-components).

Problem Description

You need to create a React component that renders a dashboard layout with the following structure:

Header: A fixed header at the top of the screen containing a title ("Dashboard").
Sidebar: A fixed sidebar on the left side of the screen. The sidebar should contain three navigation links: "Overview", "Reports", and "Settings". These links are purely visual for this challenge and do not need to navigate anywhere.
Main Content: The main content area occupies the remaining space on the right side of the screen. This area should display a simple message: "Welcome to the Dashboard!".

The layout should be responsive, meaning it should adapt to different screen sizes. On smaller screens (less than 768px width), the sidebar should collapse into a menu that appears when a hamburger icon is clicked. The hamburger icon should toggle the visibility of the sidebar.

Key Requirements:

Use React and TypeScript.
Implement a responsive layout using CSS-in-JS (styled-components).
The sidebar should be initially visible.
The hamburger icon should toggle the sidebar's visibility on smaller screens.
The header, sidebar, and main content areas should have distinct styling.
Use functional components and hooks.

Expected Behavior:

On larger screens (768px or greater), the sidebar should be visible and fixed on the left.
On smaller screens, the sidebar should be hidden by default.
Clicking the hamburger icon should toggle the sidebar's visibility.
The header should remain fixed at the top.
The main content area should fill the remaining space.

Edge Cases to Consider:

Handling different screen sizes gracefully.
Ensuring the layout remains consistent across various browsers.
Sidebar visibility toggle functionality.

Examples

Example 1:

Input: Screen width: 1200px
Output: A dashboard layout with a fixed header, a visible sidebar containing "Overview", "Reports", and "Settings" links, and a main content area displaying "Welcome to the Dashboard!".
Explanation: The layout renders in its standard, expanded form.

Example 2:

Input: Screen width: 600px
Output: A dashboard layout with a fixed header and a hidden sidebar. A hamburger icon is visible in the header. Clicking the hamburger icon toggles the sidebar's visibility. The main content area displays "Welcome to the Dashboard!".
Explanation: The layout adapts to smaller screens by collapsing the sidebar and displaying a hamburger icon.

Example 3:

Input: Screen width: 400px, Hamburger icon clicked
Output: A dashboard layout with a fixed header, a visible sidebar containing "Overview", "Reports", and "Settings" links, and a main content area displaying "Welcome to the Dashboard!".
Explanation: The sidebar is now visible after the hamburger icon was clicked.

Constraints

Screen Size Threshold: The breakpoint for the sidebar collapse is 768px.
Styling: Use styled-components for styling. No external CSS files are allowed.
Dependencies: You are allowed to use react, react-dom, and styled-components. No other external libraries are permitted.
Performance: The component should render efficiently. Avoid unnecessary re-renders.
Component Structure: The main component should be named DashboardLayout.

Notes

Consider using CSS media queries within your styled-components to handle responsiveness.
You can use React's useState hook to manage the sidebar's visibility.
Focus on creating a clean and well-structured component.
The navigation links in the sidebar do not need to be functional; they are purely visual elements.
The "Welcome to the Dashboard!" message in the main content area is just a placeholder; you don't need to implement any complex content.