DevOpsLab/app/templates/components/sidebar.html

<aside class="sidebar" id="sidebar" aria-label="Главное меню">
    <div class="sidebar-resize-handle" id="sidebar-resize-handle" title="Изменить ширину" aria-hidden="true"></div>
    <div class="sidebar-header">
        <a href="/" class="sidebar-brand" title="DevOpsLab">
            <i class="fas fa-cogs brand-icon"></i>
            <div class="sidebar-brand-text-column">
                <div class="sidebar-header-badges">
                    <span class="sidebar-version-badge" title="Версия">v1.0.0</span>
                </div>
                <span class="brand-text">AnsibleLab</span>
            </div>
        </a>
        <button type="button" class="sidebar-collapse-btn" id="sidebar-collapse-btn" aria-label="Свернуть меню" title="Свернуть меню">
            <i class="fas fa-chevron-left sidebar-collapse-icon" aria-hidden="true"></i>
        </button>
    </div>
    <nav class="sidebar-nav">
        <ul class="sidebar-menu">
            <li class="sidebar-menu-item">
                <a href="/" class="sidebar-menu-link {% if request.url.path == '/' %}active{% endif %}" title="Дашборд">
                    <i class="fas fa-tachometer-alt menu-icon"></i>
                    <span class="menu-text">Дашборд</span>
                </a>
            </li>
            <li class="sidebar-menu-divider"></li>
            <li class="sidebar-menu-item">
                <a href="/roles" class="sidebar-menu-link {% if request.url.path.startswith('/roles') and not request.url.path.startswith('/roles/create') and not request.url.path.startswith('/roles/import') %}active{% endif %}" title="Роли">
                    <i class="fas fa-tasks menu-icon"></i>
                    <span class="menu-text">Роли</span>
                </a>
            </li>
            <li class="sidebar-menu-item">
                <a href="/lint" class="sidebar-menu-link {% if request.url.path.startswith('/lint') %}active{% endif %}" title="Проверка синтаксиса">
                    <i class="fas fa-check-circle menu-icon"></i>
                    <span class="menu-text">Линтинг</span>
                </a>
            </li>            
            <li class="sidebar-menu-item">
                <a href="/playbooks" class="sidebar-menu-link {% if request.url.path.startswith('/playbooks') %}active{% endif %}" title="Плейбуки">
                    <i class="fas fa-book menu-icon"></i>
                    <span class="menu-text">Плейбуки</span>
                </a>
            </li>            
            <li class="sidebar-menu-item">
                <a href="/deploy" class="sidebar-menu-link {% if request.url.path.startswith('/deploy') %}active{% endif %}" title="Деплой">
                    <i class="fas fa-rocket menu-icon"></i>
                    <span class="menu-text">Деплой</span>
                </a>
            </li>
            <li class="sidebar-menu-divider"></li>
            <li class="sidebar-menu-item">
                <a href="/docker" class="sidebar-menu-link {% if request.url.path.startswith('/docker') and not request.url.path.startswith('/dockerfiles') %}active{% endif %}" title="Docker образы">
                    <i class="fab fa-docker menu-icon"></i>
                    <span class="menu-text">Docker</span>
                </a>
            </li>
            <li class="sidebar-menu-item">
                <a href="/vault" class="sidebar-menu-link {% if request.url.path.startswith('/vault') %}active{% endif %}" title="Ansible Vault">
                    <i class="fas fa-lock menu-icon"></i>
                    <span class="menu-text">Vault</span>
                </a>
            </li>
            <li class="sidebar-menu-item">
                <a href="/k8s" class="sidebar-menu-link {% if request.url.path.startswith('/k8s') %}active{% endif %}" title="Kubernetes">
                    <i class="fas fa-cube menu-icon"></i>
                    <span class="menu-text">Kubernetes</span>
                </a>
            </li>
            <li class="sidebar-menu-divider"></li>
            <li class="sidebar-menu-item sidebar-dropdown-item" id="tools-menu">
                <a href="#" class="sidebar-menu-link sidebar-dropdown-toggle {% if request.url.path.startswith('/roles/create') or request.url.path.startswith('/presets/create') or request.url.path.startswith('/roles/import') %}active{% endif %}" onclick="toggleToolsMenu(event)" title="Инструменты">
                    <i class="fas fa-tools menu-icon"></i>
                    <span class="menu-text">Инструменты</span>
                    <i class="fas fa-chevron-down dropdown-arrow"></i>
                </a>
                <ul class="sidebar-dropdown-menu">
                    <li class="sidebar-menu-item">
                        <a href="/roles/create" class="sidebar-menu-link {% if request.url.path == '/roles/create' %}active{% endif %}" title="Создать роль">
                            <i class="fas fa-plus menu-icon"></i>
                            <span class="menu-text">Создать роль</span>
                        </a>
                    </li>
                    <li class="sidebar-menu-item">
                        <a href="/roles/import" class="sidebar-menu-link {% if request.url.path == '/roles/import' %}active{% endif %}" title="Импортировать роль">
                            <i class="fas fa-download menu-icon"></i>
                            <span class="menu-text">Импортировать роль</span>
                        </a>
                    </li>
                    <li class="sidebar-menu-item">
                        <a href="/presets/create" class="sidebar-menu-link {% if request.url.path == '/presets/create' %}active{% endif %}" title="Создать preset">
                            <i class="fas fa-plus menu-icon"></i>
                            <span class="menu-text">Создать preset</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="sidebar-menu-item sidebar-dropdown-item" id="settings-menu">
                <a href="#" class="sidebar-menu-link sidebar-dropdown-toggle {% if request.url.path.startswith('/dockerfiles') or request.url.path.startswith('/presets') %}active{% endif %}" onclick="toggleSettingsMenu(event)" title="Настройки">
                    <i class="fas fa-cog menu-icon"></i>
                    <span class="menu-text">Настройки</span>
                    <i class="fas fa-chevron-down dropdown-arrow"></i>
                </a>
                <ul class="sidebar-dropdown-menu">
                    <li class="sidebar-menu-item">
                        <a href="/dockerfiles" class="sidebar-menu-link {% if request.url.path.startswith('/dockerfiles') %}active{% endif %}" title="Dockerfile">
                            <i class="fas fa-file-code menu-icon"></i>
                            <span class="menu-text">Dockerfiles</span>
                        </a>
                    </li>
                    <li class="sidebar-menu-item">
                        <a href="/presets" class="sidebar-menu-link {% if request.url.path.startswith('/presets') and not request.url.path.startswith('/presets/create') %}active{% endif %}" title="Preset'ы">
                            <i class="fas fa-sliders-h menu-icon"></i>
                            <span class="menu-text">Пресеты Molecule</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="sidebar-menu-item sidebar-dropdown-item" id="profile-menu">
                <a href="#" class="sidebar-menu-link sidebar-dropdown-toggle {% if request.url.path.startswith('/profile') %}active{% endif %}" onclick="toggleProfileMenu(event)" title="Профиль">
                    <i class="fas fa-user menu-icon"></i>
                    <span class="menu-text">Профиль</span>
                    <i class="fas fa-chevron-down dropdown-arrow"></i>
                </a>
                <ul class="sidebar-dropdown-menu">
                    <li class="sidebar-menu-item">
                        <a href="/profile" class="sidebar-menu-link {% if request.url.path == '/profile' %}active{% endif %}" title="Редактировать профиль">
                            <i class="fas fa-user-edit menu-icon"></i>
                            <span class="menu-text">Редактировать профиль</span>
                        </a>
                    </li>
                    <li class="sidebar-menu-item">
                        <a href="/profile/docker-settings" class="sidebar-menu-link {% if request.url.path == '/profile/docker-settings' %}active{% endif %}" title="Настройки Docker">
                            <i class="fab fa-docker menu-icon"></i>
                            <span class="menu-text">Настройки Docker</span>
                        </a>
                    </li>
                    <li class="sidebar-menu-item">
                        <a href="/change-password" class="sidebar-menu-link {% if request.url.path == '/change-password' %}active{% endif %}" title="Смена пароля">
                            <i class="fas fa-key menu-icon"></i>
                            <span class="menu-text">Смена пароля</span>
                        </a>
                    </li>
                </ul>
            </li>
        </ul>
    </nav>
    <div class="sidebar-footer">
        <div class="sidebar-logout">
            <a href="/api/v1/auth/logout" class="sidebar-menu-link btn-logout-sidebar" title="Выход">
                <i class="fas fa-sign-out-alt menu-icon"></i>
                <span class="menu-text">Выход</span>
            </a>
        </div>
    </div>
</aside>