Skip to content

Fix/responsiveness on mobile #27

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
+81 −39
Open

Fix/responsiveness on mobile #27

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0d9bf7d
fix: responsive hamburger menu
bilozorDev Feb 14, 2025
f5d891c
fixed footer to stay on bottom
bilozorDev Feb 15, 2025
21393f0
feat: improve responsive design across multiple pages
bilozorDev Feb 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app/(shop)/[slug]/[category]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export default async function Products(props: ProductsProps) {
<div className={classnames('flex flex-col items-center pt-12', !!blocks?.length && 'pb-12')}>
<Blocks blocks={blocks} />
</div>
<div className={classnames('grid grid-cols-4 gap-2 max-w-screen-2xl mx-auto')}>
<div className={classnames('grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 max-w-screen-2xl mx-auto px-4 2xl:px-0')}>
{children?.map((child) => <Product key={child?.path} product={child} />)}
</div>
</main>
Expand Down
4 changes: 2 additions & 2 deletions app/(shop)/[slug]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export default async function Page({ params }: PageProps) {

return (
<main>
<div className="page pb-6">
<div className="page pb-6">
<Breadcrumbs breadcrumbs={breadcrumbs} />
<h1 className="text-4xl font-bold py-4">{name}</h1>
<div className="gap-4 flex">
Expand All @@ -48,7 +48,7 @@ export default async function Page({ params }: PageProps) {
})}
</div>
</div>
<div className="min-h-screen pt-12">
<div className="pt-12 ">
<Blocks blocks={blocks} />
</div>
</main>
Expand Down
19 changes: 10 additions & 9 deletions app/(shop)/stories/[story]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,29 +36,28 @@ type StoriesProps = {
export default async function StoryPage(props: StoriesProps) {
const params = await props.params;
const { intro, featured, upNext, story, title, media } = await fetchData(`/stories/${params.story}`);

return (
<main className="mt-40">
<main className="mt-40 px-4 2xl:px-0">
<div className="max-w-screen-lg mx-auto text-center mb-12">
<h1 className="text-dark text-5xl font-medium py-4 text-balance">{title}</h1>
<div className="text-lg text-center mx-auto leading-8 font-medium text-dark">
<div className="text-lg text-center mx-auto leading-8 font-medium text-dark">
<ContentTransformer json={intro} />
</div>
</div>
<div className="max-w-screen-xl mx-auto [&_img]:w-full [&_img]:max-w-none overflow-hidden rounded-2xl ">
<Media {...media} preserveRatio sizes="(max-width: 600px) 100vw, 1280px" />
</div>
<div className="grid grid-cols-5 max-w-screen-xl mx-auto mt-24">
<div className="grid grid-cols-1 lg:grid-cols-5 max-w-screen-xl mx-auto mt-24">
<div
className={clsx('col-span-3 gap-24 px-12', {
className={clsx('col-span-3 lg:px-12', {
'!col-span-5 max-w-screen-md mx-auto': featured === null,
})}
>
<ParagraphCollection paragraphs={story} />
</div>
{featured && (
<div className="col-span-2 px-12 pt-6">
<h3 className="font-bold text-sm mb-4">Featured products</h3>
<div className="col-span-2 lg:px-12 pt-6">
<h3 className="font-bold mb-4">Featured products</h3>
<div className="sticky top-20 min-h-[200px] bg-light rounded-lg border border-muted flex flex-col">
{featured?.items?.map((item, index) => {
const product = item as Product;
Expand Down Expand Up @@ -86,11 +85,13 @@ export default async function StoryPage(props: StoriesProps) {
)}
</div>
{upNext && (
<div className="mt-24 px-12 max-w-screen-2xl mx-auto">
<div className="mt-24 lg:px-12 max-w-screen-2xl mx-auto">
<div className="px-0 border-t border-muted pt-24 ">
<h2 className="text-2xl py-4 font-bold">Up next</h2>
<Slider type="story" options={{ loop: false, align: 'start' }}>
{upNext.items?.map((item) => <Story story={item} key={item?.path} />)}
{upNext.items?.map((item) => (
<Story story={item} key={item?.path} />
))}
</Slider>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion app/(shop)/stories/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export default async function Stories() {
<h1 className="text-4xl font-bold py-4">{title}</h1>
</div>
<div className="pt-12">
<div className="grid grid-cols-2 gap-4 items-stretch max-w-screen-2xl mx-auto ">
<div className="grid grid-cols-1 md:grid-cols-2 2xl:grid-cols-3 gap-4 items-stretch max-w-screen-2xl mx-auto px-4 2xl:px-0">
{children?.map((story, index) => <Story story={story} key={index} />)}
</div>
</div>
Expand Down
6 changes: 4 additions & 2 deletions app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,10 @@ export default async function Layout({ children }: LayoutProps) {
</head>
<body className={`${manrope.className} bg-soft`}>
<CartProvider>
{children}
<Footer />
<div className="flex flex-col min-h-screen justify-between">
<div className="flex-grow">{children}</div>
<Footer />
</div>
</CartProvider>
</body>
</html>
Expand Down
2 changes: 1 addition & 1 deletion components/block-fragments/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export const BlockLayout = ({ block, children }: BlockLayoutProps) => {
className={clsx(
`w-full mx-auto block block-bg relative`,
isFirstBlock && 'pt-24 sm:pt-60',
isFullWidth ? 'max-w-full' : 'max-w-screen-2xl rounded-2xl px-4 sm:px-0',
isFullWidth ? 'max-w-full' : 'max-w-screen-2xl rounded-2xl px-4 2xl:px-0',
hasBackgroundMedia ? '!bg-transparent' : 'pt-0 pb-0',
themeMap[selectedTheme as keyof typeof themeMap],
)}
Expand Down
2 changes: 1 addition & 1 deletion components/block-pieces/product-slider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export const ProductSlider = ({ block }: ProductSliderProps) => {
<div className="flex-col flex items-center py-12">
<Typography {...block} />
{!!products?.variants?.length && (
<div className="w-full pb-24">
<div className="w-full max-w-screen-2xl pb-24">
<Slider options={{ loop: true, align: 'start' }}>
{products.variants.map((item) =>
!!item?.product ? (
Expand Down
27 changes: 5 additions & 22 deletions components/header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,11 @@ import Link from 'next/link';
import { Suspense } from 'react';
import { CartButton } from './cart/cart-button';
import { Navigation } from './navigation';
import { MenuWrapper } from './menu-wrapper';

export const Header = () => {
return (
<header className="fixed max-w-screen-2xl w-full top-4 left-1/2 -translate-x-1/2 z-10">
<header className="fixed max-w-screen-2xl w-full top-4 left-1/2 -translate-x-1/2 z-10 px-4 2xl:px-0">
<div className="bg-light border border-muted flex items-stretch rounded-full justify-between">
<div className="flex items-stretch flex-1">
<Link href="/">
Expand All @@ -21,27 +22,9 @@ export const Header = () => {
</Link>

<Suspense fallback={null}>
<div className="flex-1 sm:hidden flex justify-end items-center">
<button className="p-4">
<svg
className="block h-6 w-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M4 6h16M4 12h16M4 18h16"
/>
</svg>
<span className="sr-only">Toggle menu</span>
</button>
</div>
<Navigation className="hidden sm:flex gap-6 min-h-full text-base self-stretch items-stretch font-medium pl-8" />
<MenuWrapper>
<Navigation className="flex flex-col sm:flex-row items-center gap-6 min-h-full text-base self-stretch font-medium sm:pl-8" />
</MenuWrapper>
</Suspense>
</div>

Expand Down
56 changes: 56 additions & 0 deletions components/menu-wrapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
'use client';
import { useState } from 'react';

type MenuWrapperProps = {
children: React.ReactNode;
};

export const MenuWrapper = ({ children }: MenuWrapperProps) => {
const [isOpen, setIsOpen] = useState(false);

return (
<>
{/* Mobile menu button */}
<div className="flex-1 sm:hidden flex justify-end items-center">
<button
className="p-4"
onClick={() => setIsOpen(!isOpen)}
aria-expanded={isOpen}
aria-controls="mobile-menu"
>
<svg
className="block h-6 w-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d={isOpen ? 'M6 18L18 6M6 6l12 12' : 'M4 6h16M4 12h16M4 18h16'}
/>
</svg>
<span className="sr-only">Toggle menu</span>
</button>
</div>

{/* Desktop navigation */}
<div className="hidden sm:block bg-red-800">{children}</div>

{/* Mobile navigation */}
{isOpen && (
<div className="absolute top-full left-0 right-0 mt-2 sm:hidden">
<div
className={`bg-light border border-muted rounded-lg shadow-lg p-4 transition-all duration-200 ease-in-out
${isOpen ? 'scale-100' : 'scale-95'}`}
>
{children}
</div>
</div>
)}
</>
);
};