كود تجهيز الأزرار السريعة لمنتداك

<xf:macro id="footer_btns">
    <div class="footer_btns">
        <ul>
            <!-- Menu Button -->
            <li>
                <a href="#" data-xf-click="off-canvas" data-menu=".js-headerOffCanvasMenu" role="button" tabindex="0" aria-label="{{ phrase('menu')|for_attr }}">
                    <xf:fa icon="fa-bars" />
                    <span>{{ phrase('menu') }}</span>
                </a>
            </li>

            <!-- What's New Button -->
            <li>
                <a href="{{ link('whats-new') }}">
                    <xf:fa icon="fa-bolt" />
                    <span>{{ phrase('whats_new') }}</span>
                </a>
            </li>

            <!-- Conditional for logged-out visitors -->
            <xf:if is="!$xf.visitor.user_id">
                <li>
                    <a href="{{ link('login') }}" data-xf-click="canvas" data-ajax="true">
                        <xf:fa icon="fa-sign-in" />
                        <span>{{ phrase('login') }}</span>
                    </a>
                </li>
                <li>
                    <a href="{{ link('register') }}" data-xf-click="canvas" data-ajax="true">
                        <xf:fa icon="fa-user-plus" />
                        <span>{{ phrase('register') }}</span>
                    </a>
                </li>
            </xf:if>

            <!-- Conditional for logged-in members -->
            <xf:if is="$xf.visitor.user_id">
                <li>
                    <a href="{{ link('account') }}">
                        <xf:fa icon="fa-cog" />
                        <span>إعدادات الحساب</span> <!-- Custom Arabic phrase for Account Settings -->
                    </a>
                </li>
                <li>
                    <a href="{{ link('conversations') }}" data-xf-click="canvas" data-ajax="true">
                        <xf:fa icon="fa-envelope" />
                        <span>الرسائل</span> <!-- Arabic phrase for Messages -->
                    </a>
                </li>
                <!-- Logout Button -->
                <li>
                    <a href="{{ link('logout', null, {'t': csrf_token()}) }}">
                        <xf:fa icon="fa-sign-out" />
                        <span>تسجيل الخروج</span> <!-- Arabic phrase for Logout -->
                    </a>
                </li>
            </xf:if>
        </ul>
    </div>
</xf:macro>

<!-- JavaScript for Footer Buttons -->
<script>
document.addEventListener('DOMContentLoaded', function () {
    const footerLinks = document.querySelectorAll('.footer_btns a');

    footerLinks.forEach(link => {
        link.addEventListener('click', function () {
            // You can add any click functionality here if needed
            // e.g., tracking clicks or animations
        });
    });
});
</script>

.footer_btns {
    display: none; /* Initially hidden for all screens */
}

@media (max-width: 600px) {
    .footer_btns {
        display: block; /* Display only for small screens */
        position: fixed; /* Fixed position */
        bottom: 0; /* At the bottom of the screen */
        background: @xf-contentHighlightBg; /* Default background color */
        width: 100%; /* Full width */
        box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2); /* Softer shadow */
        z-index: 1000; /* Ensure it's always on top */
    }

    .footer_btns ul {
        display: flex;
        list-style: none;
        justify-content: space-between;
        margin: 0;
        padding: 0;
    }

    .footer_btns li {
        flex: 1; /* Makes each button take equal space */
        border-left: 1px solid @xf-borderColor;

        &:first-child {
            border-left: none; /* Remove border from first item */
        }
    }

    .footer_btns li a {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 10px;
        color: @xf-textColorMuted; /* Consistent text color */
        text-decoration: none;

        i {
            font-size: 20px;
            color: @xf-linkColor; /* Icon color consistent with links */
        }

        span {
            font-size: 12px;
            margin-top: 5px;
        }

        &:hover {
            background-color: @xf-pageBg; /* Invert to page background on hover */
            color: @xf-textColor; /* Change text color on hover */
        }
    }

    /* Hide text on small screens */
    a span {
        display: none; /* Hide text on small screens */
    }
}

                <xf:macro id="page_macros::footer_btns" />