=== Ashik Mobile Bottom Navigation & Drawer Menu ===
Contributors: ashikcse, coderitsolution
Tags: mobile, bottom navigation, navigation bar, mobile menu, drawer menu
Requires at least: 5.8
Tested up to: 7.1
Requires PHP: 7.4
Stable tag: 1.0.0
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html

Mobile bottom navigation bar and slide-out drawer menu with WooCommerce integration, user profile card, and live preview.

== Description ==

Ashik Mobile Bottom Navigation & Drawer Menu is an all-in-one mobile UX solution for WordPress and WooCommerce websites. It delivers an app-like experience for smartphone and tablet visitors through a responsive bottom navigation bar and an elegant slide-out drawer menu.

Designed for store owners, publishers, and developers who want to boost mobile conversion rates and user engagement without slowing down their site.

### Key Features

#### 1. Mobile Bottom Navigation Bar
* **6 Modern Layout Presets:** Modern Classic, Minimal Clean, Floating Pill, Curved Cutout (with center raised FAB button), Glassmorphic Blur, and Compact Strip.
* **Drag-and-Drop Reordering:** Easily sort and reorder navigation items with intuitive drag-and-drop handles in the admin dashboard.
* **Icon Flexibility:** Choose from FontAwesome 6 icons or paste custom inline SVG code for unique branding.
* **Dynamic WooCommerce Badging:** Automatically displays the live WooCommerce cart items count badge and updates dynamically via AJAX fragments without page refreshes.
* **Custom Static Badges:** Add promotional badges such as "HOT", "NEW", or "SALE" to any navigation item.
* **Flexible Action Types:**
  * Direct Page Link (same tab or new tab).
  * Open Slide-out Drawer Menu.
  * Open WooCommerce Cart Drawer (triggers theme cart drawer).
  * Click Custom CSS Selector (trigger theme search, popups, or custom elements).
  * Built-in Search Modal Popup.
* **Individual Item Customization:** Customize icon color, background color, and border color for specific items, including the center action button.
* **Active Indicator Effects:** Accent line, Pill background, Bubble glow, Subtle dot, or None.
* **Label Visibility Modes:** Always visible, Active item only, or Icons only (never show labels).

#### 2. Slide-out Drawer Menu
* **User Profile & Greeting Card:** Welcomes logged-in users with their avatar (Gravatar or default), display name, and a direct logout link. Welcomes guests with a friendly sign-in prompt leading to their account page.
* **Hierarchical Category Accordion:** Pulls categories directly from WooCommerce product categories or any standard WordPress navigation menu. Features multi-level nested subcategories with smooth chevron accordion toggling and an option to hide empty categories.
* **Quick Links Section:** Configure fast-access shortcut links with custom icons (e.g. Track Order, Customer Support, WhatsApp Chat, FAQs).
* **Smooth Overlay Backdrop:** Custom drawer mask overlay color with strict RGBA or Hex formatting.

#### 3. Built-in Mobile Search Modal
* Lightweight, responsive search popup with instant autofocus on open and ESC-key dismiss support.

#### 4. Live Interactive Admin Preview Simulator
* **Real-time Mobile Phone Mockup:** See changes instantly as you customize colors, presets, typography, and layout settings in the WordPress admin panel.
* **Profile Preview Switcher:** Test how the drawer greeting card appears to logged-in users vs. logged-out guests directly inside the settings screen.

#### 5. Styling, Layout & Performance Controls
* **Typography & Fonts:** Choose from popular fonts (Inter, Roboto, Poppins, or system font stack) and font weights.
* **Container Styling:** Adjust heights, horizontal/vertical paddings, border radius, border styles, and elevation shadow presets.
* **iOS Safe Area Support:** Automatically respects `env(safe-area-inset-bottom)` to ensure buttons are never covered by iPhone home indicator bars.
* **Mobile-Only & Scroll Triggers:** Hide on desktop displays with customizable breakpoints, and auto-hide when scrolling down to maximize screen estate.
* **Dark Mode Ready:** Built-in dark mode color overrides for night mode themes.
* **Performance-First:** Written in clean, modular vanilla JavaScript and lightweight CSS with zero bloat and no external dependencies.
* **Secure Coding:** Follows WordPress coding standards with strict input sanitization, data validation, and output escaping.

== Installation ==

1. Upload the `ashik-mobile-bottom-navigation-drawer-menu` folder to the `/wp-content/plugins/` directory, or install directly through the WordPress Plugins dashboard.
2. Activate the plugin through the 'Plugins' menu in WordPress.
3. Navigate to **Mobile Nav Menu** in your WordPress admin menu to configure your bottom navigation bar, drawer menu, and styling options.
4. Save your settings and preview your responsive mobile navigation on any smartphone or tablet.

== Frequently Asked Questions ==

= Does this plugin require WooCommerce? =
No, WooCommerce is completely optional. The plugin functions seamlessly on any WordPress website, blog, or portfolio. When WooCommerce is active, advanced e-commerce features (such as dynamic cart badge count synchronization and product category hierarchies) automatically become available.

= How does the cart badge count update? =
The cart badge connects directly to WooCommerce's AJAX cart fragments system (`woocommerce_add_to_cart_fragments`). Whenever a customer adds or removes items from their cart, the badge number updates instantly without requiring a page reload.

= Can I reorder the navigation buttons? =
Yes. In the admin settings under the "Bottom Nav Items" tab, each item widget has a drag handle on the left. Simply drag and drop items into your desired order and save settings.

= Can I use my own SVG icons instead of FontAwesome? =
Yes. Each navigation item includes an "Inline SVG Code" field. You can paste standard SVG markup directly into this field, and the plugin will safely sanitize and render it.

= Does it support modern smartphones with notch and home bars (e.g. iPhone)? =
Yes. The plugin includes a "Safe Area Inset (iPhone Notch)" option. When enabled, it automatically applies `env(safe-area-inset-bottom)` padding to prevent buttons from overlapping with mobile home indicators and gesture navigation bars.

= Can I hide the navigation bar on desktop computers? =
Yes. Under the "General Appearance" tab, check the "Hide on Desktop Screens" option. The bottom navigation bar will then only appear on screens smaller than 768px.

= How do I trigger my theme's cart drawer or search popup? =
Set the navigation item's Action Type to "Click Custom CSS Selector" and enter the CSS selector of your theme's trigger button (for example `#dcCartToggle` or `.header-search-toggle`). When a user taps the bottom bar item, it simulates a click on that element.

== Screenshots ==

1. screenshot-1.png — Layout Presets
2. screenshot-2.png — Navigation Items
3. screenshot-3.png — Bottom Bar Styling
4. screenshot-4.png — User Profile & Greeting
5. screenshot-5.png — Categories / Drawer Menu Content Settings
6. screenshot-6.png — Quick Links Settings
7. screenshot-7.png — Drawer Styling
8. screenshot-8.png — Documentation & Integration Guide
9. screenshot-9.png — Mobile Menu Drawer Preview

== Changelog ==

= 1.0.0 =
* Initial release of Ashik Mobile Bottom Navigation & Drawer Menu.
* Added 6 layout presets: Modern, Minimal, Floating Pill, Curved Cutout, Glassmorphic, and Compact.
* Added drag-and-drop visual reordering for navigation items.
* Added user profile greeting card with avatar and logout link.
* Added WooCommerce category accordion and custom WordPress menu support.
* Added dynamic WooCommerce cart fragment count update.
* Added built-in mobile search modal.
* Added live phone preview simulator in admin panel.
* Fully hardened security with strict color/RGBA sanitization, SVG sanitization, and output escaping.
