منوی پایین صفحه/تورال - فراغیب

<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

<style>
/* ۱. تنظیمات عمومی: مخفی بودن در دسکتاپ (حالت پیش‌فرض) */
.bottom-nav {
    display: none; 
}

/* ۲. تنظیمات موبایل: فقط در عرض کمتر از ۷۶۸ پیکسل ظاهر شود */
@media (max-width: 767px) {
    .bottom-nav {
        display: flex; /* نمایش در موبایل */
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 60px;
        background-color: #000000;
        justify-content: space-around;
        align-items: center;
        z-index: 9999; /* قرارگیری روی همه المان‌ها */
        box-shadow: 0 -2px 10px rgba(0,0,0,0.5);
    }

    /* تنظیمات ظاهری آیتم‌ها */
    .nav-item {
        color: #ffffff;
        text-decoration: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 12px;
    }

    /* فاصله گذاری برای اینکه محتوای اصلی سایت زیر منو نره */
    body {
        padding-bottom: 70px;
    }
}



</style>

</head>

<body>
<!-- Bottom Navigation Bar -->
<nav class="bottom-nav" aria-label="منوی اصلی پایین صفحه">
    <a href="/" class="nav-item">
        <i class="fas fa-home"></i>
        <span>خانه</span>
    </a>
    <a href="/products" class="nav-item">
        <i class="fas fa-box"></i>
        <span>محصولات</span>
    </a>
    <a href="/profile" class="nav-item">
        <i class="fas fa-user"></i>
        <span>کاربران</span>
    </a>
    <a href="/cart" class="nav-item">
        <i class="fas fa-shopping-cart"></i>
        <span>سبد خرید</span>
    </a>
</nav>
</body>

</html>