Hotel-Booking/docs/LAYOUT_IMPLEMENTATION.md

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

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

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 ✅

• Create src/components/layout/ directory
• Header.tsx with logo and navigation
• Footer.tsx with complete information
• Navbar.tsx with dynamic login/logout logic
• SidebarAdmin.tsx only displays with admin role
• LayoutMain.tsx uses <Outlet />
• Navbar changes based on login state
• Responsive interface, compatible with desktop/mobile
• TailwindCSS integration for styling
• 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

# 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)