MyClub/DOCS/NAVIGATION_QUICK_START.md

# Navigation Management - Quick Start Guide

## 🚀 Get Started in 5 Minutes

### Step 1: Run the Migration (30 seconds)
```bash
# From project root directory
make migrate-up

# Or if you don't have make:
cd database/migrations
goose postgres "your-connection-string" up
```

**What this does:**
- Creates `navigation_items` table
- Creates `social_links` table  
- Seeds 12 default navigation items
- Adds settings columns for navigation

### Step 2: Restart Your Application (1 minute)
```bash
# Terminal 1 - Backend
go run main.go

# Terminal 2 - Frontend
cd frontend
npm start
```

### Step 3: Access Admin Panel (30 seconds)
1. Open browser to `http://localhost:3000`
2. Login as admin
3. Navigate to `/admin/navigace` or click "Správa navigace" in admin sidebar

### Step 4: Customize Your Navigation (3 minutes)

#### Quick Tasks:

**A. Reorder Items**
- Use ↑ ↓ buttons to move items up or down
- Changes save automatically

**B. Hide Unwanted Items**
- Click edit icon (✏️) on any item
- Toggle "Viditelné" switch off
- Click "Uložit"

**C. Add Social Media**
1. Switch to "Sociální sítě" tab
2. Click "Přidat sociální síť"
3. Select platform (e.g., Facebook)
4. Paste your profile URL
5. Click "Uložit"

**D. Create Custom Link**
1. Click "Přidat položku"
2. Enter label (e.g., "Fanshop")
3. Select Type: "Externí odkaz"
4. Enter URL (e.g., `https://shop.example.com`)
5. Select target: "Nové okno" (_blank)
6. Click "Uložit"

**E. Create Dropdown Menu**
1. Create parent: Type "Dropdown", Label "Média"
2. Create children:
   - Type "Stránka", Page "videos", Label "Videa"
   - Type "Stránka", Page "gallery", Label "Fotogalerie"
   - Type "Externí odkaz", URL to YouTube channel
3. Children appear as dropdown on hover

## 📋 Common Scenarios

### Scenario 1: Add Fanshop Link
```
Label: Fanshop
Type: Externí odkaz
URL: https://yourshop.com
Target: _blank (Nové okno)
Visible: Yes
```

### Scenario 2: Hide "Tabulky" Temporarily
```
1. Find "Tabulky" in list
2. Click edit icon
3. Toggle "Viditelné" to OFF
4. Save
```

### Scenario 3: Add All Social Media
```
Facebook:
- Platform: facebook
- URL: https://www.facebook.com/yourpage

Instagram:
- Platform: instagram  
- URL: https://www.instagram.com/yourhandle

YouTube:
- Platform: youtube
- URL: https://www.youtube.com/@yourchannel
```

### Scenario 4: Create "O nás" Dropdown
```
Parent Item:
- Label: O nás
- Type: dropdown
- Visible: Yes

Child 1:
- Label: O klubu
- Type: page
- Page Type: about
- Parent: (select "O nás")

Child 2:
- Label: Historie
- Type: internal
- URL: /historie
- Parent: (select "O nás")

Child 3:
- Label: Kontakt
- Type: page
- Page Type: contact
- Parent: (select "O nás")
```

## 🎯 Navigation Types Explained

### Page Type (Best for System Pages)
**Use when:** Linking to built-in pages like Home, Calendar, Matches

**Example:**
- Label: "Zápasy"
- Type: page
- Page Type: matches
- ✅ Auto-maps to `/zapasy`

### Internal Type (For Custom Pages)
**Use when:** Linking to custom pages you created

**Example:**
- Label: "Historie"
- Type: internal
- URL: /historie
- ✅ Stays within your app

### External Type (For Outside Links)
**Use when:** Linking to external websites

**Example:**
- Label: "Vstupenky"
- Type: external
- URL: https://tickets.example.com
- Target: _blank
- ✅ Opens in new tab

### Dropdown Type (For Nested Menus)
**Use when:** Grouping related links

**Example:**
- Label: "Média"
- Type: dropdown
- ✅ Shows children on hover

## 🎨 Page Type Options Reference

| Page Type | Label | URL |
|-----------|-------|-----|
| home | Domů | / |
| about | O klubu | /o-klubu |
| calendar | Kalendář | /kalendar |
| matches | Zápasy | /zapasy |
| activities | Aktivity | /aktivity |
| players | Hráči | /hraci |
| tables | Tabulky | /tabulky |
| blog | Články | /blog |
| videos | Videa | /videa |
| gallery | Fotogalerie | /galerie |
| sponsors | Sponzoři | /sponzori |
| contact | Kontakt | /kontakt |
| search | Hledat | /hledat |

## 🌐 Social Media Platforms

### Supported Platforms:
- ✅ Facebook
- ✅ Instagram
- ✅ YouTube
- ✅ Twitter
- ✅ TikTok
- ✅ LinkedIn
- ✅ Discord
- ✅ Twitch

### URL Format Tips:
```
✅ Good:
https://www.facebook.com/yourpage
https://www.instagram.com/yourhandle
https://www.youtube.com/@yourchannel

✅ Also works:
facebook.com/yourpage
@yourhandle
yourhandle

❌ Avoid:
facebook.com (missing page)
www.facebook.com (missing protocol)
```

## 🔧 Pro Tips

### 1. Optimal Navigation Size
- **Desktop**: 8-12 items (including dropdowns)
- **Mobile**: Consider grouping with dropdowns if >10 items
- **Dropdown children**: Max 5-8 per parent

### 2. Order Best Practices
```
Recommended order:
1. Domů (Home) - Always first
2. O klubu (About)
3. Kalendář/Zápasy (Events)
4. Content (Články, Videa, Galerie)
5. Team (Hráči, Tabulky)
6. Support (Sponzoři, Kontakt)
```

### 3. Social Media Order
```
By usage:
1. Facebook (most popular in Czech Republic)
2. Instagram (visual content)
3. YouTube (video content)
4. Twitter/TikTok (engagement)
```

### 4. Mobile Menu Considerations
- All items show in mobile drawer
- Dropdowns become expandable sections
- Social links appear at bottom
- Keep labels short (max 15 characters)

### 5. External Links
- Always use https:// for security
- Set target="_blank" to open in new window
- Consider adding "Fanshop", "Vstupenky", "Partner sites"

## 🐛 Troubleshooting

### Problem: Changes Not Visible
**Solution:**
1. Hard refresh browser (Ctrl+Shift+R)
2. Check "Viditelné" toggle is ON
3. Verify backend is running
4. Check browser console for errors

### Problem: Can't Access Admin Panel
**Solution:**
1. Verify you're logged in as admin
2. Check URL is correct: `/admin/navigace`
3. Clear browser cache and cookies
4. Try different browser

### Problem: Social Icons Not Showing
**Solution:**
1. Verify URL format is correct
2. Check visibility toggle is ON
3. Make sure platform name matches list
4. Clear frontend cache

### Problem: Dropdown Not Working
**Solution:**
1. Verify parent type is "dropdown"
2. Check children have parent_id set correctly
3. Ensure both parent and children are visible
4. Test hover behavior (not click on desktop)

### Problem: Migration Error
**Solution:**
```bash
# Check if tables already exist
psql -d your_database -c "\dt navigation*"

# If they exist, you can skip or:
# 1. Drop tables manually
# 2. Run migration again

# Or rollback and re-run:
goose postgres "connection-string" down
goose postgres "connection-string" up
```

## 📊 Testing Checklist

After setup, verify these work:

- [ ] Admin page loads at `/admin/navigace`
- [ ] Can create new navigation item
- [ ] Can edit existing item
- [ ] Can delete item (shows confirmation)
- [ ] Can reorder with up/down buttons
- [ ] Can toggle visibility
- [ ] Navigation appears on frontend
- [ ] Dropdowns work on hover
- [ ] Mobile menu works properly
- [ ] Social links show in top bar
- [ ] External links open in new tab
- [ ] Active page is highlighted

## 🎓 Advanced Features

### Custom CSS Classes
Add custom styling to specific items:
```
1. Edit navigation item
2. Add CSS class: "nav-highlighted"
3. Create CSS in your theme:
   .nav-highlighted {
     background: var(--club-primary);
     color: white;
     font-weight: bold;
   }
```

### Authentication-Based Navigation
Show items only to logged-in users:
```
1. Edit navigation item
2. Toggle "requires_auth" to true
3. Item only shows when user is logged in
```

### Admin-Only Items
Show items only to admins:
```
1. Edit navigation item
2. Toggle "requires_admin" to true
3. Item only shows for admin users
```

## 📞 Need Help?

### Resources:
1. **Full Documentation**: See `NAVIGATION_SYSTEM.md`
2. **Implementation Details**: See `NAVIGATION_IMPLEMENTATION_SUMMARY.md`
3. **API Reference**: Check controller comments in code
4. **Code Examples**: Look at `NavigationAdminPage.tsx`

### Common Questions:

**Q: Can I have multi-level dropdowns?**
A: Currently supports one level (parent → children). Multi-level coming in future update.

**Q: How many navigation items can I have?**
A: Unlimited, but 8-12 is optimal for UX.

**Q: Can I import/export navigation?**
A: Not yet, but you can backup via database dump.

**Q: Will this work with existing navigation?**
A: Yes! Existing Navbar component already supports all features. The old settings-based custom_nav is still compatible.

**Q: Can I preview before publishing?**
A: Use visibility toggle to test. Hidden items are only visible to admins in the list.

## ✨ Success!

You're now ready to manage your navigation like a pro! 🎉

**What you can do:**
- ✅ Unlimited custom navigation items
- ✅ Dropdown menus for better organization  
- ✅ Social media integration
- ✅ Reorder anything with a click
- ✅ Show/hide items dynamically
- ✅ Mix internal and external links
- ✅ Mobile-responsive automatically

**Next steps:**
1. Customize your navigation structure
2. Add your social media profiles
3. Test on mobile devices
4. Share feedback!

Happy navigating! 🚀