How can I redirect link to external page in tag <a> with Aurelia?

Viewed 17

I'm making the footer of my page and in the mobile version, when I click on a link, it does not redirect me to where it should go, it only redirects me if it is an internal page of the same repository, and the link that I need to redirect, is another repository. Even if I do the test with the complete nomenclature, it doesn't redirect.

<template>
    <div id="footer" class="container-fluid footer-area background w-100 font-medium d-flex">
        <div class="container d-flex justify-content-center h-100 flex-column flex-lg-row">
            <div
                class="footer-socials g-0 col-12 d-inline-block d-lg-none d-flex justify-content-center justify-content-lg-start flex-column">
                <div class="d-flex justify-content-center">
                    <a href="https://www.facebook.com/" target="_blank" rel="nofollow noopener noreferrer">
                        <img src="/static/icons/facebook.svg" class="me-2" loading="lazy" alt="facebook">
                    </a>
                    <a href="https://www.instagram.com/" target="_blank" rel="nofollow noopener noreferrer">
                        <img src="/static/icons/instagram.svg" class="me-2" loading="lazy" alt="instagram">
                    </a>
                    <a href="https://twitter.com/" target="_blank" rel="nofollow noopener noreferrer">
                        <img src="/static/icons/twitter.svg" class="me-2" loading="lazy" alt="twitter">
                    </a>
                    <a href="https://discord.gg/" target="_blank" rel="nofollow noopener noreferrer">
                        <img src="/static/icons/discord.svg" loading="lazy" alt="discord">
                    </a>
                </div>
                <hr class="text-white py-0">
            </div>
            <div class="row justify-content-center d-flex align-content-between">
                <div class="col-12 col-md-5 col-lg-3 text-md-start text-center logo-column text-lightgray">
                    <img src="/static/logo/logo-purple-all-white.png" alt="logo" class="logo-logo"
                        loading="lazy">
                    <div class="text-regular mail">
                        support@mymail.com
                    </div>
                    <div class="information font-regular text-regular text-sm-start px-2 px-md-0 mt-3">
                        <page-content-area key.bind="'FOOTER_PARAGRAPH'" class="font-footer hide-paragraph"></page-content-area>
                        <page-content-area key.bind="'FOOTER_BRAND'" class="font-footer"></page-content-area>
                        <page-content-area key.bind="'FOOTER_ADDRESS'" class="font-footer"></page-content-area>
                        <page-content-area key.bind="'FOOTER_FRINTRACT'" class="font-footer"></page-content-area>
                    </div>
                </div>
                <div class="col-lg-2 col-md-2 d-none d-md-block about-column">
                    <div class="footer-section-header font-medium">
                        Name
                    </div>
                    <hr class="mt-1 text-white d-none d-lg-block">
                    <a class="footer-link text-regular mt-3 mt-lg-4" href="#">
                        About Us
                    </a>
                    <a class="footer-link text-regular footer-link-items" href="/careers">
                        Careers
                    </a>
                    <a class="footer-link text-regular footer-link-items" href="/blog" router-ignore>
                        Blog
                    </a>
                </div>
                <div class="col-lg-2 col-md-2 d-none d-md-block support-column">
                    <div class="footer-section-header font-medium">
                        Support
                    </div>
                    <hr class="mt-1 text-white d-none d-lg-block">
                    <a class="footer-link text-regular mt-3 mt-lg-4" href="/faq">
                        FAQ
                    </a>
                    <a class="footer-link text-regular footer-link-items" href="/contact">
                        Contact Us
                    </a>
                </div>
                <div class="col-lg-2 col-md-2 d-none d-md-block legal-column">
                    <div class="footer-section-header font-medium">
                        Legal
                    </div>
                    <hr class="mt-1 text-white d-none d-lg-block">
                    <a class="footer-link text-regular mt-3 mt-lg-4" href="/tos">
                        Terms of Service
                    </a>
                    <a class="footer-link text-regular footer-link-items" href="/privacy-policy">
                        Privacy Policy
                    </a>
                    <a class="footer-link text-regular footer-link-items" href="/cookies">
                        Cookies Policy
                    </a>
                    <div class="trust-pilot-section text-start d-lg-none d-md-inline-block">
                        <a class="trust-pilot-text-large" href="https://www.trustpilot.com/review/"
                            target="_blank" rel="nofollow noopener noreferrer">
                            Trustpilot Reviews
                        </a>
                        <a href="https://www.trustpilot.com/review" target="_blank" rel="nofollow noopener noreferrer">
                            <div class="trust-pilot-star-group">
                                <img repeat.for="i of 5" class="trust-pilot-star "
                                    src="/static/icons/trust-pilot-1-star.svg" loading="lazy" alt="star">
                            </div>
                        </a>
                    </div>
                </div>
                <div class="g-0 col-12 d-inline-block d-md-none gray-border-bottom mt-1">
                    <mdc-expandable ref="xExpandable" class="mb-1 mt-1 footer-expandable"
                        click.delegate="handleClickEvent(xExpandable)">
                        <div slot="caption" class="footer-section-header font-bold">Name</div>
                        <div>
                            <a class="footer-link expandable-footer-link text-regular" href="#" click.delegate="handleClickEvent(xExpandable)">
                                About Us
                            </a>
                            <a class="footer-link expandable-footer-link text-regular" href="/careers" click.delegate="handleClickEvent(xExpandable)">
                                Careers
                            </a>

The next block is where I have the problem:

                            <a class="footer-link expandable-footer-link text-regular" href="https://google.com" click.delegate="handleClickEvent(xExpandable)">
                                Blog
                            </a>

And this is the final:

                        </div>
                    </mdc-expandable>
                </div>
                <div class="g-0 col-12 d-inline-block d-md-none gray-border-bottom">
                    <mdc-expandable ref="supportExpandable" class="mb-1 mt-1 footer-expandable"
                        click.delegate="handleClickEvent(supportExpandable)">
                        <div slot="caption" class="footer-section-header font-bold">Support</div>
                        <div>
                            <a class="footer-link expandable-footer-link text-regular" href="/faq" click.delegate="handleClickEvent(supportExpandable)">
                                FAQ
                            </a>
                            <a class="footer-link expandable-footer-link text-regular" href="/contact" click.delegate="handleClickEvent(supportExpandable)">
                                Contact Us
                            </a>
                        </div>
                    </mdc-expandable>
                </div>
                <div class="g-0 col-12 d-inline-block d-md-none gray-border-bottom">
                    <mdc-expandable ref="legalExpandable" class="mb-1 mt-1 footer-expandable"
                        click.delegate="handleClickEvent(legalExpandable)">
                        <div slot="caption" class="footer-section-header font-bold">Legal</div>
                        <div>
                            <a class="footer-link expandable-footer-link text-regular" href="/tos" click.delegate="handleClickEvent(legalExpandable)">
                                Terms of Service
                            </a>
                            <a class="footer-link expandable-footer-link text-regular" href="/privacy-policy" click.delegate="handleClickEvent(legalExpandable)">
                                Privacy Policy
                            </a>
                            <a class="footer-link expandable-footer-link text-regular" href="/cookies" click.delegate="handleClickEvent(legalExpandable)">
                                Cookies Policy
                            </a>
                        </div>
                    </mdc-expandable>
                </div>
                <span class="d-flex d-md-none justify-content-center col-12">
                    <a class="trust-pilot-text-large" href="https://www.trustpilot.com/review"
                        target="_blank">
                        Trustpilot Reviews
                    </a>
                </span>
                <div class="d-flex d-md-none justify-content-center col-12 pt-1">
                    <a href="https://www.trustpilot.com/review" target="_blank" rel="nofollow noopener noreferrer">
                        <div class="trust-pilot-star-group">
                            <img repeat.for="i of 5" class="trust-pilot-star" src="/static/icons/trust-pilot-1-star.svg"
                                loading="lazy" alt="star">
                        </div>
                    </a>
                </div>
                <div class="col-lg-3 d-none d-lg-block mx-auto social-column">
                    <div class="footer-section-header">
                        Social
                    </div>
                    <hr class="mt-1 text-white">
                    <div class="icons-container footer-socials">
                        <a href="https://www.facebook.com/" target="_blank" rel="nofollow noopener noreferrer" class="space-icon">
                            <img src="/static/icons/facebook.svg" loading="lazy" alt="facebook">
                        </a>
                        <a href="https://www.instagram.com/" target="_blank" rel="nofollow noopener noreferrer" class="space-icon">
                            <img src="/static/icons/instagram.svg" loading="lazy" alt="instagram">
                        </a>
                        <a href="https://twitter.com/" target="_blank" rel="nofollow noopener noreferrer" class="space-icon">
                            <img src="/static/icons/twitter.svg" loading="lazy" alt="twitter">
                        </a>
                        <a href="https://discord.gg/" target="_blank" rel="nofollow noopener noreferrer">
                            <img src="/static/icons/discord.svg" loading="lazy" alt="discord">
                        </a>
                    </div>
                    <div class="row d-flex justify-content-start mt-3 pt-1">
                        <div class="col-xxl-4 ml-4">
                            <span class="d-none d-lg-inline-block col-xxl-8 mb-3">
                                <a class="trust-pilot-text-large" href="https://www.trustpilot.com/review/"
                                    target="_blank" rel="nofollow noopener noreferrer">
                                    Trustpilot Reviews
                                </a>
                            </span>
                            <a href="https://www.trustpilot.com/review/" target="_blank" rel="nofollow noopener noreferrer">
                                <div class="trust-pilot-star-group">
                                    <img repeat.for="i of 5" class="trust-pilot-star"
                                        src="/static/icons/trust-pilot-1-star.svg" loading="lazy" alt="star">
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-12 text-center">
                    <div class="rights-reserved mt-lg-5 mt-xxl-0 text-md-regular text-small">
                        <hr class="w-100 mt-0 text-white d-none d-lg-block">
                        Copyright © ${currentYear}. All Rights Reserved.
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

Everything works correctly, except the responsive there.

0 Answers
Related