# TenderRadar Navigation System - Quick Reference
## 📋 File Locations
```
/auth.js - Shared auth utilities
/app.css - Shared app styles (27 KB)
/components/nav.js - Navigation component
/components/footer.js - Footer component
```
## 🚀 Minimal Setup (Copy & Paste)
### Step 1: Add to HTML Head
```html
```
### Step 2: Add to HTML Body (before closing tag)
```html
```
### Step 3: Protect Page (in your page script)
```javascript
requireAuth(); // Redirects to login if not authenticated
```
### Step 4: Make API Calls
```javascript
// Instead of fetch():
const response = await fetchWithAuth('/api/tenders');
const data = await response.json();
```
---
## 🔐 Auth Functions (Quick Lookup)
| Function | Purpose | Example |
|----------|---------|---------|
| `getToken()` | Get JWT | `const t = getToken();` |
| `setToken(t)` | Store JWT | `setToken(response.token);` |
| `clearToken()` | Remove JWT | `clearToken();` |
| `isAuthenticated()` | Check auth | `if (isAuthenticated()) {...}` |
| `getUserInfo()` | Get user data | `const u = getUserInfo(); u.email` |
| `requireAuth()` | Protect page | `requireAuth();` |
| `logout()` | Sign out | `logout();` |
| `fetchWithAuth(url)` | API with auth | `await fetchWithAuth('/api/...')` |
---
## 🎨 Most Used Component Classes
### Buttons
```html
```
### Cards
```html
```
### Badges & Tags
```html
Success
Label
```
### Alerts
```html
Success message
Error message
```
### Forms
```html
```
### Tables
```html
```
### Grids
```html
...
...
```
### Loading
```html
```
### Empty State
```html
```
---
## 🎨 Colors
| Name | Value | Use |
|------|-------|-----|
| Primary | #1e40af (blue) | Main actions, highlights |
| Accent | #f59e0b (orange) | Secondary actions |
| Success | #10b981 (green) | Positive feedback |
| Danger | #ef4444 (red) | Errors, destructive |
| Warning | #f59e0b (orange) | Warnings |
---
## 📱 Responsive Breakpoints
- **Desktop**: 1200px+ (full layout)
- **Tablet**: 768px-1199px (optimized spacing)
- **Mobile**: Below 768px (hamburger menu, single column)
---
## ✅ Implementation Checklist
For each new page (dashboard, profile, alerts, etc.):
- [ ] Load `/auth.js` in ``
- [ ] Load `/app.css` in ``
- [ ] Load `/components/nav.js` before ``
- [ ] Load `/components/footer.js` before ``
- [ ] Call `requireAuth()` in page script
- [ ] Use `fetchWithAuth()` for API calls
- [ ] Wrap content in ``
---
## 🔗 Navigation Structure
**Authenticated Users:**
- Dashboard → `/dashboard.html`
- Tenders → `/tenders.html`
- Alerts → `/alerts.html`
- Profile → `/profile.html`
- [User Email] + Logout
**Unauthenticated Users:**
- Login → `/login.html`
- Sign Up → `/signup.html`
---
## 📚 Full Documentation
For complete details, see: `/var/www/tenderradar/IMPLEMENTATION_GUIDE.md`