cv-site/templates/partials/navigation/hamburger-menu.html

{{define "hamburger-menu"}}
<!-- Navigation Menu (Hidden by default) -->
<nav id="navigation-menu" class="navigation-menu no-print" role="navigation" aria-label="CV sections">
    <div class="menu-content">
        <!-- CV Sections - Quick Navigation -->
        <div class="menu-item-submenu">
            <a href="#" class="menu-item has-submenu">
                <iconify-icon icon="mdi:menu" width="20" height="20"></iconify-icon>
                <span>{{if eq .Lang "es"}}Secciones CV{{else}}CV Sections{{end}}</span>
                <iconify-icon icon="mdi:chevron-right" width="16" height="16" class="submenu-arrow"></iconify-icon>
            </a>
            <div class="submenu-content">
                <a href="#education" class="menu-item"
                   _="on click call event.preventDefault() then call document.getElementById('education').scrollIntoView({behavior: 'smooth'})">
                    <iconify-icon icon="mdi:school" width="20" height="20"></iconify-icon>
                    <span>{{if eq .Lang "es"}}Formación{{else}}Training{{end}}</span>
                </a>
                <a href="#skills" class="menu-item"
                   _="on click call event.preventDefault() then call document.getElementById('skills').scrollIntoView({behavior: 'smooth'})">
                    <iconify-icon icon="mdi:brain" width="20" height="20"></iconify-icon>
                    <span>{{if eq .Lang "es"}}Competencias{{else}}Skills{{end}}</span>
                </a>
                <a href="#experience" class="menu-item"
                   _="on click call event.preventDefault() then call document.getElementById('experience').scrollIntoView({behavior: 'smooth'})">
                    <iconify-icon icon="mdi:office-building" width="20" height="20"></iconify-icon>
                    <span>{{if eq .Lang "es"}}Experiencia{{else}}Experience{{end}}</span>
                </a>
                <a href="#awards" class="menu-item"
                   _="on click call event.preventDefault() then call document.getElementById('awards').scrollIntoView({behavior: 'smooth'})">
                    <iconify-icon icon="mdi:trophy" width="20" height="20"></iconify-icon>
                    <span>{{if eq .Lang "es"}}Premios y Reconocimientos{{else}}Awards{{end}}</span>
                </a>
                <a href="#projects" class="menu-item"
                   _="on click call event.preventDefault() then call document.getElementById('projects').scrollIntoView({behavior: 'smooth'})">
                    <iconify-icon icon="mdi:web" width="20" height="20"></iconify-icon>
                    <span>{{if eq .Lang "es"}}Proyectos Personales / Freelance{{else}}Personal / Freelance Projects{{end}}</span>
                </a>
                <a href="#courses" class="menu-item"
                   _="on click call event.preventDefault() then call document.getElementById('courses').scrollIntoView({behavior: 'smooth'})">
                    <iconify-icon icon="mdi:school" width="20" height="20"></iconify-icon>
                    <span>{{if eq .Lang "es"}}Cursos Realizados{{else}}Courses{{end}}</span>
                </a>
                <a href="#languages" class="menu-item"
                   _="on click call event.preventDefault() then call document.getElementById('languages').scrollIntoView({behavior: 'smooth'})">
                    <iconify-icon icon="mdi:translate" width="20" height="20"></iconify-icon>
                    <span>{{if eq .Lang "es"}}Idiomas{{else}}Languages{{end}}</span>
                </a>
                <a href="#references" class="menu-item"
                   _="on click call event.preventDefault() then call document.getElementById('references').scrollIntoView({behavior: 'smooth'})">
                    <iconify-icon icon="mdi:link-variant" width="20" height="20"></iconify-icon>
                    <span>{{if eq .Lang "es"}}Referencias{{else}}References{{end}}</span>
                </a>
                <a href="#other" class="menu-item"
                   _="on click call event.preventDefault() then call document.getElementById('other').scrollIntoView({behavior: 'smooth'})">
                    <iconify-icon icon="mdi:information" width="20" height="20"></iconify-icon>
                    <span>{{if eq .Lang "es"}}Otros{{else}}Other{{end}}</span>
                </a>
            </div>
        </div>

        <!-- Quick Actions Section -->
        <div class="menu-section-wrapper">
            <div class="menu-item menu-item-header">
                <iconify-icon icon="mdi:cog-outline" width="20" height="20"></iconify-icon>
                <span>{{if eq .Lang "es"}}Acciones Rápidas{{else}}Quick Actions{{end}}</span>
            </div>

            <a href="#" class="menu-item menu-item-action" onclick="collapseAllSections(event)">
                <iconify-icon icon="mdi:arrow-collapse-all" width="20" height="20"></iconify-icon>
                <span>{{if eq .Lang "es"}}Colapsar Todo{{else}}Collapse All{{end}}</span>
            </a>
            <a href="#" class="menu-item menu-item-action" onclick="expandAllSections(event)">
                <iconify-icon icon="mdi:arrow-expand-all" width="20" height="20"></iconify-icon>
                <span>{{if eq .Lang "es"}}Expandir Todo{{else}}Expand All{{end}}</span>
            </a>
            <a href="#" id="show-zoom-menu-btn" class="menu-item menu-item-action" style="display: none;"
               _="on click
                    halt the event
                    remove { display: 'none' } from #zoom-control
                    add { display: 'none' } to me
                    set localStorage['cv-zoom-visible'] to 'true'">
                <iconify-icon icon="mdi:magnify" width="20" height="20"></iconify-icon>
                <span>{{if eq .Lang "es"}}Zoom{{else}}Zoom{{end}}</span>
            </a>
        </div>

        <!-- View Controls in menu (visible only on mobile < 900px) -->
        <div class="menu-controls-section">
            <div class="menu-item menu-item-header">
                <iconify-icon icon="mdi:tune-variant" width="20" height="20"></iconify-icon>
                <span>{{if eq .Lang "es"}}Controles de Vista{{else}}View Controls{{end}}</span>
            </div>

            <!-- CV Length toggle -->
            <div class="menu-control-item" id="mobile-length-toggle">
                <label class="menu-control-label">
                    <iconify-icon icon="mdi:file-document-outline" width="20" height="20"></iconify-icon>
                    <span>{{if eq .Lang "es"}}Longitud{{else}}Length{{end}}</span>
                </label>
                <label class="icon-toggle">
                    <input type="checkbox"
                           id="lengthToggleMenu"
                           {{if eq .CVLengthClass "cv-long"}}checked{{end}}
                           hx-post="/toggle/length?lang={{.Lang}}"
                           hx-target="#mobile-length-toggle"
                           hx-swap="outerHTML"
                           _="on htmx:afterRequest
                                if my.checked
                                  remove .cv-short from .cv-paper
                                  add .cv-long to .cv-paper
                                  set localStorage['cv-length'] to 'long'
                                else
                                  remove .cv-long from .cv-paper
                                  add .cv-short to .cv-paper
                                  set localStorage['cv-length'] to 'short'
                                end">
                    <span class="icon-toggle-slider">
                        <iconify-icon icon="mdi:file-document-outline" width="16" height="16" class="icon-left"></iconify-icon>
                        <iconify-icon icon="mdi:file-document-multiple-outline" width="16" height="16" class="icon-right"></iconify-icon>
                    </span>
                </label>
            </div>

            <!-- Logo toggle -->
            <div class="menu-control-item" id="mobile-logo-toggle">
                <label class="menu-control-label">
                    <iconify-icon icon="mdi:image-multiple-outline" width="20" height="20"></iconify-icon>
                    <span>{{if eq .Lang "es"}}Logos{{else}}Logos{{end}}</span>
                </label>
                <label class="icon-toggle">
                    <input type="checkbox"
                           id="logoToggleMenu"
                           {{if .ShowLogos}}checked{{end}}
                           hx-post="/toggle/logos?lang={{.Lang}}"
                           hx-target="#mobile-logo-toggle"
                           hx-swap="outerHTML"
                           _="on htmx:afterRequest
                                if my.checked
                                  add .show-logos to .cv-paper
                                  set localStorage['cv-logos'] to 'true'
                                else
                                  remove .show-logos from .cv-paper
                                  set localStorage['cv-logos'] to 'false'
                                end">
                    <span class="icon-toggle-slider">
                        <iconify-icon icon="mdi:image-off-outline" width="16" height="16" class="icon-left"></iconify-icon>
                        <iconify-icon icon="mdi:image-multiple-outline" width="16" height="16" class="icon-right"></iconify-icon>
                    </span>
                </label>
            </div>

            <!-- Theme toggle -->
            <div class="menu-control-item" id="mobile-theme-toggle">
                <label class="menu-control-label">
                    <iconify-icon icon="mdi:page-layout-sidebar-left" width="20" height="20"></iconify-icon>
                    <span>{{if eq .Lang "es"}}Vista{{else}}View{{end}}</span>
                </label>
                <label class="icon-toggle">
                    <input type="checkbox"
                           id="themeToggleMenu"
                           {{if .ThemeClean}}checked{{end}}
                           hx-post="/toggle/theme?lang={{.Lang}}"
                           hx-target="#mobile-theme-toggle"
                           hx-swap="outerHTML"
                           _="on htmx:afterRequest
                                if my.checked
                                  add .theme-clean to the body
                                  set localStorage['cv-theme'] to 'clean'
                                else
                                  remove .theme-clean from the body
                                  set localStorage['cv-theme'] to 'default'
                                end">
                    <span class="icon-toggle-slider">
                        <iconify-icon icon="mdi:page-layout-sidebar-left" width="16" height="16" class="icon-left"></iconify-icon>
                        <iconify-icon icon="mdi:page-layout-body" width="16" height="16" class="icon-right"></iconify-icon>
                    </span>
                </label>
            </div>
        </div>

        <!-- Action Buttons in menu (visible only on mobile < 900px) -->
        <div class="menu-actions-section">
            <div class="menu-item menu-item-header">
                <iconify-icon icon="mdi:lightning-bolt" width="20" height="20"></iconify-icon>
                <span>{{if eq .Lang "es"}}Acciones{{else}}Actions{{end}}</span>
            </div>

            <button class="menu-action-btn" onclick="document.getElementById('pdf-modal').showModal()">
                <iconify-icon icon="mdi:download" width="20" height="20"></iconify-icon>
                <span>{{if eq .Lang "es"}}Descargar como PDF{{else}}Download as PDF{{end}}</span>
            </button>

            <button class="menu-action-btn" _="on click call printFriendly()">
                <iconify-icon icon="mdi:leaf" width="20" height="20"></iconify-icon>
                <span>{{if eq .Lang "es"}}Imprimir amigable{{else}}Print Friendly{{end}}</span>
            </button>
        </div>
    </div>
</nav>
{{end}}