HTML:

<div class="block" data-widget-definition="th_userNavigation">
    <div class="block-container block-container--noStripRadius" style="background: #141417; border: 1px solid #444; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.3);">
        <h3 class="block-minorHeader" style="background: linear-gradient(135deg, #ff8400 0%, #ffa600 100%); margin: -1px -1px 0 -1px; padding: 12px 15px; border-radius: 11px 11px 0 0; text-align: center;">
            <b style="margin: 0; color: white; font-size: 1.1em; text-shadow: 0 1px 2px rgba(0,0,0,0.3);">
                <i style="font-family: 'Font Awesome 5 Pro'; margin-right: 8px;" class="fas fa-user"></i>
                Меню пользователя
            </b>
        </h3>
        <div class="block-body" style="padding: 15px;">
            <xf:if is="$xf.visitor.user_id">
                <div class="user-menu-buttons" style="display: flex; flex-direction: column; gap: 8px;">
                    <a class="blockLink rippleButton" href="{{ link('members', $xf.visitor) }}" style="background: #242429; color: white; padding: 10px 15px; border-radius: 8px; text-decoration: none; transition: all 0.3s ease; border: 1px solid #555; display: flex; align-items: center;">
                        <i class="fas fa-id-card" style="margin-right: 10px; width: 16px;"></i>
                        {{ phrase('th_profile_uix') }}
                    </a>
                    <a class="blockLink rippleButton" href="{{ link('account/account-details') }}" style="background: #242429; color: white; padding: 10px 15px; border-radius: 8px; text-decoration: none; transition: all 0.3s ease; border: 1px solid #555; display: flex; align-items: center;">
                        <i class="fas fa-cog" style="margin-right: 10px; width: 16px;"></i>
                        {{ phrase('account_details') }}
                    </a>
                    <a class="blockLink rippleButton" href="{{ link('logout', null, {'t': csrf_token()}) }}" style="background: #242429; color: white; padding: 10px 15px; border-radius: 8px; text-decoration: none; transition: all 0.3s ease; border: 1px solid #555; display: flex; align-items: center;">
                        <i class="fas fa-sign-out-alt" style="margin-right: 10px; width: 16px;"></i>
                        {{ phrase('log_out') }}
                    </a>
                </div>
            <xf:else />
                <a class="blockLink rippleButton" href="{{ link('login') }}" style="background: linear-gradient(135deg, #ff8400 0%, #ffa600 100%); color: white; padding: 12px 20px; border-radius: 8px; text-decoration: none; transition: all 0.3s ease; border: none; display: block; text-align: center; font-weight: bold; font-size: 1.1em;">
                    <i class="fas fa-sign-in-alt" style="margin-right: 10px;"></i>
                    {{ phrase('login') }}
                </a>
            </xf:if>
        </div>
    </div>
</div>

HTML:

<div data-widget-id="11" data-widget-key="forum_menu_dostup" data-widget-definition="html">
    <h3 class="block-minorHeader" style="background: linear-gradient(135deg, #141417 0%, #141417 100%); margin: -1px -1px 0 -1px; padding: 12px 15px; border-radius: 11px 11px 0 0; text-align: center;">
            <b style="margin: 0; color: white; font-size: 1.1em; text-shadow: 0 1px 2px rgba(0,0,0,0.3);">
                                  Меню быстрого доступа
            </b>
        </h3>
    
    <div class="block-body block-row">
        <div class="rfq-menu">
            <a class="rfq-btn" href="https://forum.crmp-mob.ru/index.php?pages/igra-rules/"><span>Правила проекта</span></a>           
            <a class="rfq-btn" href="https://forum.crmp-mob.ru/index.php?pages/forum-rules/"><span>Правила форума</span></a>
            <a class="rfq-btn" href="https://forum.crmp-mob.ru/index.php?forums/%D0%98%D0%B3%D1%80%D0%BE%D0%B2%D0%BE%D0%B9-%D0%A1%D0%B5%D1%80%D0%B2%D0%B5%D1%80-drive-mobile.7/"><span>Игровой Сервер: DRIVE MOBILE</span></a>
            <a class="rfq-btn" href="https://forum.crmp-mob.ru/index.php?forums/%D0%98%D0%B3%D1%80%D0%BE%D0%B2%D0%BE%D0%B9-%D1%81%D0%B5%D1%80%D0%B2%D0%B5%D1%80-just-mobile.9/"><span>Игровой сервер: JUST MOBILE</span></a>
            <a class="rfq-btn" href="https://forum.crmp-mob.ru/index.php?forums/%D0%98%D0%B3%D1%80%D0%BE%D0%B2%D0%BE%D0%B9-%D1%81%D0%B5%D1%80%D0%B2%D0%B5%D1%80-race-mobile.55/"><span>Игровой сервер: RACE MOBILE</span></a>           
        </div>
    </div>
</div>

<style>
.p-sideNav.is-active {
    width: 300px
}

.dataList-cell.dataList-cell--action.dataList-cell--action:hover {
    background: #000
}

.p-body-sidebar .rfq-menu {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0px 0px
}

.p-body-sidebar .rfq-btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border-radius: 8px;
    background: #141416;
    border: 1px solid rgb(255, 132, 0);
    color: var(--xf-textColorEmphasized, #fff);
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.28;
    transition: border-color .14s ease,background-color .14s ease,filter .14s ease
}

.p-body-sidebar .rfq-btn span {
    display: block;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.28;
    text-align: center
}

.p-body-sidebar .rfq-btn:hover {
    border-color: rgb(255, 132, 0);
    background: #16171a;
    filter: brightness(1.02)
}

.p-body-sidebar .rfq-btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 132, 0, 0.35)
}

@media (max-width: 420px) {
    .p-body-sidebar .rfq-btn {
        padding:9px 10px;
        font-size: 13.5px
    }
}
</style>