MyClub/DOCS/NAVIGATION_QUICK_START.md

Navigation Management - Quick Start Guide

🚀 Get Started in 5 Minutes

Step 1: Run the Migration (30 seconds)

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

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

# 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! 🚀