Sitemap Module Demo

Wyldcode Visual Sitemap Overview

• Modify Module in Content > Site Modules. Look for Wyldcode Visual Sitemap.
• In the Module tab, select the layout, menu, and any additional settings (if applicable to the chosen layout).
• Under Appearance settings, you can adjust colours and styles.

Bugs Requiring AK’s Help

• When a menu item uses the "Menu Alias" type, it attaches the ItemID instead of generating the friendly URL.
• When menu uses URL menu type, it doesn't respect Window Target set in menu settings
• Card Card Grid Sitemap - I can't seem to get columns balanced, so i added shuffle, but it's still wonky. Anything Alex can do to smooth it out?  This one, with flip box and pulling dynamic heights for back of cards was much more challenging than expected and CSS only method wasn't possible with Masonry. Had to use JS and it needs some polish. 
• Language File - for life of me, I couldn't connect :-( 
  • Add language support for XML settings and the Easter Egg message in accordion.php:
    • JavaScript is required to view the Easter Egg.
  • Add language support for the Surprise Me card in cards.php:
    • <h3 class="card-title">Surprise Me</h3>

Features

• Vertical Sitemap
  
  • Basic vertical list, standard layout, no special interactions.
• Horizontal Sitemap
  
  • Standard horizontal list, simple layout.
• Card Grid Sitemap with Surprise Me Option
  
  • Flip cards layout.
  • Can set default icon in Module, or can set a menu item "Link Image"  (under Link Type) to use a custom icon.
    • Not: Icons only work on parent
  • Option to enable a "Surprise Me" card that randomly links to one of the sitemap links.
    (This feature can be disabled if not wanted.)
• Accordion Sitemap with Easter Egg
  
  • Settings allow you to define how many links a user must click before revealing a hidden Easter Egg message.
  • The Easter Egg can only be triggered once per day (retry by using Incognito mode).
• Journey Sitemap
  
  • Progress bar-style navigation.
  • Child items fade in as users scroll through the sitemap.

Light and Dark Mode 

If you enable the “Site Supports Dark / Light Mode” setting in the module, the module’s wrapper will output with the class:

<div class="wyldcode-visual-sitemap [layout] supports-dark-mode">

You can target dark mode styles using the standard prefers-color-scheme media query or your site’s existing dark mode body class.

Option 1:
Using prefers-color-scheme (recommended for most cases)

.supports-dark-mode {
    /* Light mode default styles */
}

@media (prefers-color-scheme: dark) {
    .supports-dark-mode {
        background-color: #111;
        color: #eee;
    }
    .supports-dark-mode .card-front {
        background-color: #222;
    }
    .supports-dark-mode .card-back {
        background-color: #333;
    }
}

Option 2:
If your site uses a .dark class (common in frameworks like Tailwind or Bootstrap 5+)

.dark .supports-dark-mode {
    background-color: #111;
    color: #eee;
}
.dark .supports-dark-mode .card-front {
    background-color: #222;
}
.dark .supports-dark-mode .card-back {
    background-color: #333;
}