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


<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        /* ===== دسکتاپ: منو کاملاً مخفی ===== */
        .bottom-nav { display: none; }

        /* ===== موبایل (کمتر از ۷۶۸px) ===== */
        @media (max-width: 767px) {
            .bottom-nav {
                display: flex;
                position: fixed;
                bottom: 0;
                inset-inline: 0;          /* سازگار با RTL */
                background: #000;
                align-items: stretch;
                justify-content: space-around;
                padding: 4px 8px calc(8px + env(safe-area-inset-bottom));
                z-index: 9999;
                box-shadow: 0 -2px 10px rgba(0,0,0,.5);
                -webkit-tap-highlight-color: transparent;
            }

            .nav-item {
                flex: 1;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: flex-end;
                gap: 3px;
                padding-bottom: 6px;
                color: #fff;
                text-decoration: none;
                font-size: 11px;
                transition: opacity .2s ease;
            }

            .nav-item i { font-size: 20px; }
            .nav-item:active { opacity: .75; }

            /* ===== دکمه FAB وسط (محصولات) ===== */
            .nav-item.fab { justify-content: flex-start; }

            .nav-item.fab i {
                width: 58px;
                height: 58px;
                margin-top: -30px;          /* بیرون‌زدگی از بالای نوار */
                border-radius: 50%;
                background: #fff;           /* رنگ دکمه */
                color: #000;                /* رنگ آیکون */
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 24px;
                box-shadow: 0 4px 12px rgba(255,255,255,.35);
                border: 3px solid #000;
            }

            .nav-item.fab span {
                font-size: 11px;
                color: #fff;
                margin-top: 2px;
            }

            /* ===== فضای خالی برای محتوا ===== */
            body {
                padding-bottom: calc(70px + env(safe-area-inset-bottom));
            }
        }
    </style>
</head>
<body>

    <!-- Bottom Navigation - فقط موبایل -->
    <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 fab" aria-label="محصولات">
            <i class="fas fa-box"></i>
            <span>محصولات</span>
        </a>

        <a href="/cart" class="nav-item">
            <i class="fas fa-shopping-cart"></i>
            <span>سبد خرید</span>
        </a>
    </nav>

</body>
</html>