176 lines
4.2 KiB
Markdown
176 lines
4.2 KiB
Markdown
# Layout Components - Function 1
|
|
|
|
## Overview
|
|
Successfully implemented **Function 1: Basic Layout** including:
|
|
|
|
### Components Created
|
|
|
|
#### 1. **Header** (`src/components/layout/Header.tsx`)
|
|
- Logo and application name
|
|
- Sticky header with shadow
|
|
- Responsive design
|
|
- Basic links (Home, Rooms, Bookings)
|
|
|
|
#### 2. **Footer** (`src/components/layout/Footer.tsx`)
|
|
- Company information
|
|
- Quick links
|
|
- Support links
|
|
- Contact information
|
|
- Social media icons
|
|
- Copyright information
|
|
- Fully responsive (4 columns → 2 → 1)
|
|
|
|
#### 3. **Navbar** (`src/components/layout/Navbar.tsx`)
|
|
- **Not logged in state**:
|
|
- Display "Login" and "Register" buttons
|
|
- **Logged in state**:
|
|
- Display avatar/user name
|
|
- Dropdown menu with "Profile", "Admin" (admin), "Logout"
|
|
- Mobile menu with hamburger icon
|
|
- Responsive for desktop and mobile
|
|
|
|
#### 4. **SidebarAdmin** (`src/components/layout/SidebarAdmin.tsx`)
|
|
- Only displays for role = "admin"
|
|
- Collapsible sidebar (open/close)
|
|
- Menu items: Dashboard, Users, Rooms, Bookings, Payments, Services, Promotions, Banners, Reports, Settings
|
|
- Active state highlighting
|
|
- Responsive design
|
|
|
|
#### 5. **LayoutMain** (`src/components/layout/LayoutMain.tsx`)
|
|
- Integrates Header, Navbar, Footer
|
|
- Uses `<Outlet />` to render dynamic content
|
|
- Props: `isAuthenticated`, `userInfo`, `onLogout`
|
|
- Min-height 100vh with flex layout
|
|
|
|
### Directory Structure
|
|
```
|
|
src/
|
|
├── components/
|
|
│ └── layout/
|
|
│ ├── Header.tsx
|
|
│ ├── Footer.tsx
|
|
│ ├── Navbar.tsx
|
|
│ ├── SidebarAdmin.tsx
|
|
│ ├── LayoutMain.tsx
|
|
│ └── index.ts
|
|
├── pages/
|
|
│ ├── HomePage.tsx
|
|
│ └── AdminLayout.tsx
|
|
├── styles/
|
|
│ └── index.css
|
|
├── App.tsx
|
|
└── main.tsx
|
|
```
|
|
|
|
### Usage
|
|
|
|
#### 1. Import Layout into App
|
|
```tsx
|
|
import LayoutMain from './components/layout/LayoutMain';
|
|
|
|
// In Routes
|
|
<Route
|
|
path="/"
|
|
element={
|
|
<LayoutMain
|
|
isAuthenticated={isAuthenticated}
|
|
userInfo={userInfo}
|
|
onLogout={handleLogout}
|
|
/>
|
|
}
|
|
>
|
|
<Route index element={<HomePage />} />
|
|
{/* Other child routes */}
|
|
</Route>
|
|
```
|
|
|
|
#### 2. Use SidebarAdmin for Admin Pages
|
|
```tsx
|
|
import SidebarAdmin from '../components/layout/SidebarAdmin';
|
|
|
|
const AdminLayout = () => (
|
|
<div className="flex h-screen">
|
|
<SidebarAdmin />
|
|
<div className="flex-1 overflow-auto">
|
|
<Outlet />
|
|
</div>
|
|
</div>
|
|
);
|
|
```
|
|
|
|
### Completed Features ✅
|
|
|
|
- [x] Create `src/components/layout/` directory
|
|
- [x] Header.tsx with logo and navigation
|
|
- [x] Footer.tsx with complete information
|
|
- [x] Navbar.tsx with dynamic login/logout logic
|
|
- [x] SidebarAdmin.tsx only displays with admin role
|
|
- [x] LayoutMain.tsx uses `<Outlet />`
|
|
- [x] Navbar changes based on login state
|
|
- [x] Responsive interface, compatible with desktop/mobile
|
|
- [x] TailwindCSS integration for styling
|
|
- [x] Export all components via index.ts
|
|
|
|
### Demo Routes Created
|
|
|
|
**Public Routes** (with LayoutMain):
|
|
- `/` - Home
|
|
- `/rooms` - Room list
|
|
- `/bookings` - Bookings
|
|
- `/about` - About
|
|
|
|
**Auth Routes** (no layout):
|
|
- `/login` - Login
|
|
- `/register` - Register
|
|
- `/forgot-password` - Forgot password
|
|
|
|
**Admin Routes** (with SidebarAdmin):
|
|
- `/admin/dashboard` - Dashboard
|
|
- `/admin/users` - User Management
|
|
- `/admin/rooms` - Room Management
|
|
- `/admin/bookings` - Booking Management
|
|
- `/admin/payments` - Payment Management
|
|
- `/admin/services` - Service Management
|
|
- `/admin/promotions` - Promotion Management
|
|
- `/admin/banners` - Banner Management
|
|
|
|
### Run Application
|
|
|
|
```bash
|
|
# Navigate to client directory
|
|
cd client
|
|
|
|
# Install dependencies (if not installed)
|
|
npm install
|
|
|
|
# Run development server
|
|
npm run dev
|
|
|
|
# Open browser at: http://localhost:5173
|
|
```
|
|
|
|
### Next Steps
|
|
|
|
**Function 2**: Routing Configuration (react-router-dom)
|
|
- ProtectedRoute component
|
|
- AdminRoute component
|
|
- Redirect logic
|
|
|
|
**Function 3**: useAuthStore (Zustand Store)
|
|
- Manage authentication state
|
|
- Login/Logout functions
|
|
- Persist state in localStorage
|
|
|
|
**Function 4-8**: Auth Forms
|
|
- LoginPage
|
|
- RegisterPage
|
|
- ForgotPasswordPage
|
|
- ResetPasswordPage
|
|
|
|
### Notes
|
|
- Layout components designed for reusability
|
|
- Props-based design for flexibility
|
|
- Ready to integrate with Zustand store
|
|
- Tailwind classes follow 80 characters/line
|
|
- Icons use lucide-react (already in dependencies)
|