الگو:منوی پایین صفحه/کافه محمد: تفاوت میان نسخه‌ها

دیداریویکی‌متن

@@ خط ۱: / خط ۱: @@
-<html>
+<html lang="fa" dir="rtl">
 <head>
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+    <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;
+            }
-<style>
+            .nav-item i { font-size: 20px; }
-/* ۱. تنظیمات عمومی: مخفی بودن در دسکتاپ (حالت پیش‌فرض) */
+            .nav-item:active { opacity: .75; }
-.bottom-nav {
-    display: none;
-}
-/* ۲. تنظیمات موبایل: فقط در عرض کمتر از ۷۶۸ پیکسل ظاهر شود */
+            /* ===== دکمه FAB وسط (محصولات) ===== */
-@media (max-width: 767px) {
+            .nav-item.fab { justify-content: flex-start; }
-    .bottom-nav {
-        display: flex; /* نمایش در موبایل */
-        position: fixed;
-        bottom: 20px;
-        left: 20px;
-        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.fab i {
-    .nav-item {
+                width: 58px;
-        color: #ffffff;
+                height: 58px;
-        text-decoration: none;
+                margin-top: -30px;          /* بیرون‌زدگی از بالای نوار */
-        display: flex;
+                border-radius: 50%;
-        flex-direction: column;
+                background: #fff;           /* رنگ دکمه */
-        align-items: center;
+                color: #000;                /* رنگ آیکون */
-        font-size: 12px;
+                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 {
-    body {
+                font-size: 11px;
-        padding-bottom: 70px;
+                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>
-</style>
+        <a href="/products" class="nav-item fab" aria-label="محصولات">
+            <i class="fas fa-box"></i>
+            <span>محصولات</span>
+        </a>
-</head>
+        <a href="/cart" class="nav-item">
+            <i class="fas fa-shopping-cart"></i>
+            <span>سبد خرید</span>
+        </a>
+    </nav>
-<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>