David/Wfdash-OnlineShop
1
0
Fork 0
mirror of https://gitlab.com/davidels1986/ore-cart-checkout.git synced 2026-10-30 02:59:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Changes

Browse source
This commit is contained in:
gpt-engineer-app[bot] 2026-01-29 22:14:39 +00:00
parent 6e8a80ccff
commit 39ff692496
2 changed files with 25 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/MobileBottomNav.tsx
View file

@ -1,11 +1,13 @@
import { Home, Package, ShoppingCart } from 'lucide-react';
import { Link, useLocation } from 'react-router-dom';
import { useCart } from '@/context/CartContext';
import { useIsMobile } from '@/hooks/use-mobile';
import { cn } from '@/lib/utils';
export function MobileBottomNav() {
const location = useLocation();
const { items } = useCart();
const isMobile = useIsMobile();
const cartCount = items.reduce((sum, item) => sum + item.quantity, 0);
const navItems = [
@ -14,8 +16,10 @@ export function MobileBottomNav() {
{ to: '#cart', icon: ShoppingCart, label: 'Cart', badge: cartCount },
];
if (!isMobile) return null;
return (
<nav className="fixed bottom-0 left-0 right-0 z-50 bg-zinc-700 border-t border-zinc-600 md:hidden">
<nav className="fixed bottom-0 left-0 right-0 z-50 bg-zinc-700 border-t border-zinc-600">
<div className="flex justify-around items-center h-16 px-2 safe-area-inset-bottom">
{navItems.map((item) => {
const isActive = item.to === '/'

26
src/hooks/use-mobile.tsx
View file

@ -1,18 +1,32 @@
import * as React from "react";
const MOBILE_BREAKPOINT = 768;
const TABLET_PORTRAIT_BREAKPOINT = 1024;
export function useIsMobile() {
const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);
React.useEffect(() => {
const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
const onChange = () => {
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
const checkMobile = () => {
const width = window.innerWidth;
const height = window.innerHeight;
const isPortrait = height > width;
// Mobile if: small screen OR tablet in portrait mode
const isMobileView = width < MOBILE_BREAKPOINT || (width < TABLET_PORTRAIT_BREAKPOINT && isPortrait);
setIsMobile(isMobileView);
};
// Listen for both resize and orientation changes
window.addEventListener("resize", checkMobile);
window.addEventListener("orientationchange", checkMobile);
checkMobile();
return () => {
window.removeEventListener("resize", checkMobile);
window.removeEventListener("orientationchange", checkMobile);
};
mql.addEventListener("change", onChange);
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
return () => mql.removeEventListener("change", onChange);
}, []);
return !!isMobile;