TDvorak/MyClub
1
0
Fork 0
mirror of https://github.com/Dvorinka/MyClubServer.git synced 2026-06-04 02:32:57 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

upload

Browse Source
This commit is contained in:
Tomáš Dvořák
2025-10-16 13:32:05 +02:00
commit 12cba639b9
663 changed files with 168914 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
DOCS/NAVIGATION_QUICK_START.md
+392
View File
@@ -0,0 +1,392 @@
# 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! 🚀