mulesoft-dx/scripts/portal_generator/templates/partials/skill_sidebar.html at a587d2d2c1ab45d0013c0fe7110c44be9002fc3c · mulesoft/mulesoft-dx · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
{% set skill_name = skill.name|replace('-', ' ')|title %}
{% set slug = skill.slug %}
{% set step_details = skill.step_details|default([]) %}

<aside class="detail-sidebar" id="detailSidebar">
    <div class="sidebar-header">
        <div class="sidebar-overview-section">
            <a href="#overview" class="nav-link nav-link-overview active">
                Overview
            </a>
        </div>
        {% if step_details %}
        <div class="sidebar-tabs" role="tablist">
            <button class="sidebar-tab active" role="tab" aria-selected="false" aria-controls="steps-panel"
                data-tab="steps" onclick="switchSidebarTab('steps')">
                Steps <span class="tab-count" id="steps-count" style="display: none;"></span>
            </button>
        </div>
        {% endif %}
    </div>
    <nav class="sidebar-nav">
        <ul class="nav-list">
            {% if step_details %}
            <div id="steps-panel" class="sidebar-panel active" role="tabpanel" aria-labelledby="steps-tab">
                {% for step in step_details %}
                <li>
                    <a href="#step-{{ slug }}-{{ loop.index0 }}" class="nav-link nav-skill-step"
                        title="{{ step.title }}">
                        <span class="step-number">{{ loop.index }}</span>
                        <span class="step-title-short">{{ step.title|replace('Step ' ~ loop.index ~ ':', '')|truncate(40, True) }}</span>
                    </a>
                </li>
                {% endfor %}
            </div>
            {% else %}
            <div class="sidebar-panel active">
                {% if skill.prerequisites_html %}
                <li>
                    <a href="#prerequisites-section" class="nav-link nav-skill-step" title="Prerequisites">
                        <span class="step-title-short">Prerequisites</span>
                    </a>
                </li>
                {% endif %}
                {% if skill.tips_html %}
                <li>
                    <a href="#tips-section" class="nav-link nav-skill-step" title="Tips and Best Practices">
                        <span class="step-title-short">Tips and Best Practices</span>
                    </a>
                </li>
                {% endif %}
                {% if skill.troubleshooting_html %}
                <li>
                    <a href="#troubleshooting-section" class="nav-link nav-skill-step" title="Troubleshooting">
                        <span class="step-title-short">Troubleshooting</span>
                    </a>
                </li>
                {% endif %}
                {% if skill.related_jobs_list %}
                <li>
                    <a href="#related-jobs-section" class="nav-link nav-skill-step" title="Related Jobs">
                        <span class="step-title-short">Related Jobs</span>
                    </a>
                </li>
                {% endif %}
            </div>
            {% endif %}
        </ul>
    </nav>
</aside>