<div class="bottom-menu-wrapper">
    <div class="bottom-menu-container">
        <a href="/app" id="home" class="menu-link">
            <div class="menu-icon-container">
                <i class="far fa-home menu-icon"></i>
            </div>
            Home
        </a>
        <a href="/app" id="profile" class="menu-link">
            <div class="menu-icon-container">
                <i class="far fa-user menu-icon"></i>
            </div>
           Profile
        </a>
    </div>
</div>

<style>
    .bottom-menu-wrapper {
        padding-bottom: 90px;
    }
    .bottom-menu-container {
        display: flex;
        justify-content: center;
        gap: 15%;
        background: #F4F4F5;
        position: fixed;
        bottom: 0;
        width: 100%;
        padding: 20px;
        z-index: 11;
    }
    .menu-link {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        text-decoration: none;
        color: #5D5E63;
    }
</style>

<script>
    const url = window.location.pathname;
    const homeBtn = document.getElementById('home')
    const profileBtn = document.getElementById('profile')

    if (url === '/app') {
        homeBtn.style.color = "#0071DC";
    }
</script>