51 lines
1.2 KiB
Plaintext
51 lines
1.2 KiB
Plaintext
<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> |