Logo Configuration Examples

Comprehensive documentation system guides

Logo Configuration Examples

🎨 Simplified Logo Configuration System

The logo configuration system automatically shows elements based on their presence. No boolean flags needed!

📋 Configuration Options

Complete Logo (Image + Text)

{
  "logo": {
    "image": "🚀",
    "text": "My Project",
    "imageSize": "1.8em",
    "textSize": "1.1rem",
    "link": "/my-project",
    "alt": "My Project Documentation"
  }
}

Image Only

{
  "logo": {
    "image": "⚡",
    "imageSize": "2.5em",
    "link": "/",
    "alt": "Documentation"
  }
}

Text Only

{
  "logo": {
    "text": "Documentation Hub",
    "textSize": "1.3rem",
    "link": "/docs",
    "alt": "Documentation Hub"
  }
}

Minimal Configuration

{
  "logo": {
    "image": "📚",
    "text": "Docs"
  }
}

🎯 Real Project Examples

GoGrab Pulse

{
  "logo": {
    "image": "🎵",
    "text": "GoGrab Pulse",
    "imageSize": "1.8em",
    "textSize": "1.1rem",
    "link": "/GoGrab-Pulse",
    "alt": "GoGrab Pulse Documentation"
  }
}

GoGrab Space

{
  "logo": {
    "image": "🌌",
    "text": "GoGrab Space",
    "imageSize": "1.6em",
    "textSize": "1rem",
    "link": "/GoGrab-Space",
    "alt": "GoGrab Space Platform Documentation"
  }
}

🔧 How It Works

Automatic Display Logic

Image present? → Show image
Text present? → Show text
Both present? → Show both
Neither present? → Use global fallback

Fallback System

Project config overrides global config
Missing properties use global defaults
No config uses global configuration
Load failure uses hardcoded defaults

⚙️ Configuration Properties

Property	Type	Required	Default	Description
`image`	`string`	No	-	Emoji or icon to display
`text`	`string`	No	-	Text label to display
`imageSize`	`string`	No	`1.5em`	CSS size for image
`textSize`	`string`	No	`1rem`	CSS size for text
`link`	`string`	No	`/`	Navigation link
`alt`	`string`	No	`Documentation`	Accessibility text

🎨 Styling Tips

Size Guidelines

Small: 1.2em / 0.9rem
Medium: 1.5em / 1rem (default)
Large: 1.8em / 1.1rem
Extra Large: 2.2em / 1.3rem

Emoji Recommendations

Documentation: 📚 📖 📝 📄
Development: 🚀 ⚡ 🔧 💻
Platform: 🌌 🏗️ 🎯 🔮
Creative: 🎨 🎵 ✨ 🎭
Business: 💼 📊 📈 🏢

🌍 Where Logos Appear

The logo configuration system automatically applies to:

Sidebar Navigation: Main logo display with project-aware switching
Project Switcher: Shows project-specific logos and names in dropdown
Loading Screens: Dynamic branding with project-specific titles and icons
Admin Interface: Configuration and preview with real-time updates

Project-Aware Logo System

The system intelligently switches logos based on the current project:

Current Project Display

Sidebar: Shows the active project's logo configuration
Loading Screen: Uses project-specific title and icon
Project Switcher Button: Displays current project's name from logo config

Project Switcher Dropdown

Each Project: Shows its own configured logo and name
Fallback Handling: Uses global config if project has no specific logo
Real-time Loading: Fetches project-specific configurations on demand

Responsive Behavior

Desktop: Full logo (image + text) when expanded
Mobile: Image-only in collapsed states
Admin: Live preview updates as you type
Project Switching: Smooth transitions between project branding

🚀 Benefits

🎯 Intuitive: Presence = visibility
🔧 Simple: No boolean flags needed
⚡ Flexible: Mix and match as needed
🛡️ Robust: Automatic fallbacks
♿ Accessible: Built-in ARIA support
🌍 Project-Aware: Automatic context switching