# React Layout Template

React Layout Template is a comprehensive template package for React projects. It provides ready-to-use header, footer, sidebar, navbar components, Redux state management, and routing setup for efficient website layout creation.

## Features

- **Header Component**: Customizable header with logo and navigation bar.
- **Sidebar Component**: Collapsible sidebar menu for navigation.
- **Footer Component**: Configurable footer with dynamic text.
- **Redux State Management**: Integrated Redux Toolkit for state management.
- **Routing**: Set up with `react-router-dom` for seamless navigation.
- **Responsive Design**: Includes responsive layouts for mobile and desktop views.

## Project Structure

Upon cloning and setting up this template, your project structure will resemble the following:

```
my-react-app/                 # Root directory of your React project
├── public/                   # Public assets and index.html
│   ├── index.html            # HTML entry point
│   └── ...                   # Other public assets
├── src/                      # Source files
│   ├── components/           # Reusable UI components
│   │   ├── Header.tsx        # Header component
│   │   ├── Header.css        # Styling for Header component
│   │   ├── Footer.tsx        # Footer component
│   │   ├── Footer.css        # Styling for Footer component
│   │   ├── Sidebar.tsx       # Sidebar component
│   │   ├── Sidebar.css       # Styling for Sidebar component
│   │   ├── Navbar.tsx        # Navbar component
│   │   ├── Logo.tsx          # Logo component
│   │   ├── Counter.tsx       # Example Counter component
│   │   └── ...               # Other components
│   ├── pages/                # Page components
│   │   ├── About.tsx         # About page component
│   │   ├── About.css         # Styling for About page
│   │   ├── Contact.tsx       # Contact page component
│   │   ├── Contact.css       # Styling for Contact page
│   │   ├── Home.tsx          # Home page component
│   │   └── Home.css          # Styling for Home page
│   ├── store/                # Redux store setup
│   │   ├── store.ts          # Redux store configuration
│   │   ├── rootReducer.ts    # Root reducer combining slices
│   │   └── features/         # Redux slices directory
│   │       ├── counterSlice.ts  # Example Redux slice
│   │       └── ...           # Other Redux slices
│   ├── App.tsx               # Main application component
│   └── index.tsx             # Entry point for React application
├── node_modules/             # Node.js modules
├── package.json              # Node.js dependencies and scripts
├── README.md                 # Project documentation
└── ...                       # Other configuration files
```

## Getting Started

To use this template, you have two options:

### 1. Cloning the Repository

1. Clone the repository to your local machine:

   ```bash
   git clone https://github.com/your-username/react-layout-template.git
   cd react-layout-template
   ```

2. Generate a new React project with TypeScript template:

   ```bash
   npm run template
   ```

   The system will prompt you to provide the name of the project.

3. Start the development server:

   ```bash
   npm start
   ```

### 2. Global Installation

1. Install the package globally:

   ```bash
   npm install -g react-layout-template
   ```

2. Run the command to generate a new project:

   ```bash
   react-layout-starter
   ```

   The system will prompt you to provide the name of the project.

## Customizing Your Project

### Adding a Logo Image to the Header

To add a logo image to the header:

1. Prepare your logo image file and place it in a suitable directory within your project, such as `src/assets/logo.png`.

2. Modify the `Header.tsx` component to include the `Logo` component with your image:

   ```tsx
   import React from "react";
   import Logo from "./Logo"; // Import the Logo component
   import "./Header.css"; // Import your CSS file for header styles

   const Header: React.FC = () => {
     return (
       <header className="header">
         {/* Replace logoText with logoImageUrl */}
         <Logo logoImageUrl="path/to/your/logo.png" />
         <nav className="navbar">{/* Add your navigation links */}</nav>
       </header>
     );
   };

   export default Header;
   ```

   Ensure to update the `Logo.tsx` component and its corresponding CSS (`Logo.css`) to style the logo image appropriately.

### Customizing Components and Styles

- **Header, Footer, Sidebar, Navbar**: Navigate to `src/components` to find these components. You can customize their appearance, add or remove items from the navbar, and adjust styles in their respective CSS files (`Header.css`, `Footer.css`, `Sidebar.css`, `Navbar.css`).

- **Pages**: Explore `src/pages` to find pre-built pages such as `Home.tsx`, `About.tsx`, and `Contact.tsx`. Customize these pages by modifying their content and styles (`Home.css`, `About.css`, `Contact.css`).

- **Redux State Management**: Modify the Redux store setup in `src/store`. Add new features or slices (`src/features`) as needed.

## Contributing

Contributions and suggestions are welcome! If you encounter any issues or have ideas for enhancements, please open an issue on the [GitHub repository](https://github.com/mariusmonkam/react-layout-template).

## License

This template is open source and available under the [MIT License](https://opensource.org/licenses/MIT).

---

Replace `your-username` with your actual GitHub username before publishing the README file.