edit styling to be responsive

shabrina12 · Dec 31, 2022 · d8d09e1 · d8d09e1
1 parent 52f10ad
commit d8d09e1
Show file tree

Hide file tree

Showing 10 changed files with 481 additions and 71 deletions.
diff --git a/components/EventsBanner.jsx b/components/EventsBanner.jsx
@@ -19,38 +19,38 @@ const EventsBanner = () => {
               <h3>GET UP TO <span>60%</span></h3>
               <p>For the summer season</p>
             </div>
-            <Image src={event1} width={260} height={200} alt='event' />
+            <Image src={event1} alt='event' />
           </div>
 
           <div className='event-card'>
             <h3>GET 30% Off</h3>
             <p>USE PROMO CODE</p>
-            {/* <div className='code-promo'> */}
-              <button>DINEWEEKENDSALE</button>
-            {/* </div> */}
+            <button>DINEWEEKENDSALE</button>
           </div>
         </div>
 
-        <div className='event-banner-right-1'>
-          <div className='details'>
-            <p>Flex Sweatshirt</p>
-            <div className='price'>
-              <span>$100.00</span>
-              <span>$75.00</span>
+        <div className='event-banner-right'>
+          <div className='event-banner-right-1'>
+            <div className='details'>
+              <p>Flex Sweatshirt</p>
+              <div className='price'>
+                <span>$100.00</span>
+                <span>$75.00</span>
+              </div>
             </div>
+            <Image src={event2} alt='event' />
           </div>
-          <Image src={event2} width={280} height={340} alt='event' />
-        </div>
 
-        <div className='event-banner-right-2'>
-          <div className='details'>
-            <p>Flex Push Button Bomber</p>
-            <div className='price'>
-              <span>$225.00</span>
-              <span>$190.00</span>
+          <div className='event-banner-right-2'>
+            <div className='details'>
+              <p>Flex Push Button Bomber</p>
+              <div className='price'>
+                <span>$225.00</span>
+                <span>$190.00</span>
+              </div>
             </div>
+            <Image src={event3} alt='event' />
           </div>
-          <Image src={event3} width={280} height={340} alt='event' />
         </div>
       </div>
 

diff --git a/components/FeaturesBanner.jsx b/components/FeaturesBanner.jsx
@@ -38,7 +38,7 @@ const FeaturesBanner = () => {
           <div>
             <p>This piece is ethically crafted in our small family-owned workshop in Peru with unmatched attention to detail and care. The Natural color is the actual natural color of the fiber, undyed and 100% traceable.</p>
             <Link href={'/products'}>
-              <button type='button'>See All Product</button>
+              <button className='btn' type='button'>See All Product</button>
             </Link>
           </div>
         </div>

diff --git a/components/HeroBanner.jsx b/components/HeroBanner.jsx
@@ -17,7 +17,7 @@ const HeroBanner = () => {
                 <h1>An Industrial Take on Streetwear</h1>
                 <p>Anyone can beat you but no one can beat your outfit as long as you wear Dine outfits.</p>
                 <Link href='/products'>
-                     <button type='button'><CgShoppingCart size={26} />  Start Shopping</button>
+                     <button className='btn' type='button'><CgShoppingCart size={26} />  Start Shopping</button>
                 </Link>
             </div>
             <div className='header-featured'>

diff --git a/components/Navbar.jsx b/components/Navbar.jsx
@@ -1,29 +1,33 @@
-import React from 'react'
+import React, { useState } from 'react'
 import Image from 'next/image'
 import {CiSearch} from 'react-icons/ci'
 import {CgShoppingCart} from 'react-icons/cg'
 import logo from '../src/assets/Logo.png'
 import Link from 'next/link'
+import {RiMenu3Line, RiCloseLine } from 'react-icons/ri';
 import { useStateContext } from '../context/StateContext';
 
 const Navbar = () => {
   const {showCart, setShowCart, totalQty} = useStateContext();
+  const [toggleMenu, setToggleMenu] = useState(false);
+
   return (
     <nav>
       <Link href='/'>
         <Image src={logo} width={140} height={25} alt='logo' />
       </Link>
-      <ul>
+      <ul className='nav-links'>
         <Link href='/female'><li>Female</li></Link>
         <Link href='/male'><li>Male</li></Link>
         <Link href='/kids'><li>Kids</li></Link>
         <Link href='/products'><li>All Products</li></Link>
       </ul>
+
       <div className='search-bar'>
         <CiSearch />
         <input type='text' placeholder='What you looking for'/>
       </div>
-      
+
       {showCart ?
       <Link href='/cart'>
         <button className='cart' onClick={() => setShowCart(false)}>   
@@ -37,6 +41,30 @@ const Navbar = () => {
         <span className='cart-item-qty'>{totalQty}</span>
       </button> 
       }
+
+      <div className='navbar-smallscreen'>
+        <RiMenu3Line color='black' fontSize={27} onClick={() => setToggleMenu(true)} />
+        {toggleMenu && (
+          <div className='navbar-smallscreen_overlay'>
+            <Link href='/'>
+              <Image className='logo-small' src={logo} width={140} height={25} alt='logo' />
+            </Link>
+            <RiCloseLine  color='black' fontSize={27} className='close_icon' onClick={() => setToggleMenu(false)} />
+            <ul className='navbar-smallscreen_links'>
+              <Link href='/cart'>
+                  <button className='cart-small-screen' onClick={() => setShowCart(false)}>   
+                    <CgShoppingCart size={22} />
+                    <span className='cart-item-qty'>{totalQty}</span> 
+                  </button>
+              </Link> 
+              <Link href='/female'><li>Female</li></Link>
+              <Link href='/male'><li>Male</li></Link>
+              <Link href='/kids'><li>Kids</li></Link>
+              <Link href='/products'><li>All Products</li></Link>
+            </ul>
+          </div>
+        )}
+      </div>
     </nav>
   )
 }

diff --git a/pages/cart.js b/pages/cart.js
@@ -88,7 +88,7 @@ const Cart = () => {
             <span>${totalPrice}</span>
           </div>  */}
           <div>
-            <button type='button' onClick={handleCheckout}>Process to Checkout</button>
+            <button className='btn' type='button' onClick={handleCheckout}>Process to Checkout</button>
           </div>         
         </div>
         )}  

diff --git a/pages/index.js b/pages/index.js
@@ -8,7 +8,7 @@ import { Swiper, SwiperSlide } from 'swiper/react';
 import 'swiper/css';
 import 'swiper/css/navigation';
 
-const Home = ({products, bannerData}) => {
+const Home = ({products}) => {
   return (
     <>
       <HeroBanner />
@@ -20,10 +20,27 @@ const Home = ({products, bannerData}) => {
           <h2>Check What We Have</h2>
         </div>
         <Swiper
-            modules={[Navigation, A11y]}
-            spaceBetween={0}
-            slidesPerView={3}
-            navigation
+          breakpoints={{
+              // width >= 300
+              300: {
+                slidesPerView: 1,
+                spaceBetween: 100
+              },
+              // width >= 1000
+              1000: {
+                slidesPerView: 2,
+                spaceBetween: 0
+              },
+              // width >= 1260
+              1260: {
+                slidesPerView: 3,
+                spaceBetween: 0
+              }
+          }}
+          modules={[Navigation, A11y]}
+          spaceBetween={0}
+          slidesPerView={3}
+          navigation
         >
           <div className='products-container'>
             {products?.map(product => (
@@ -44,11 +61,11 @@ const Home = ({products, bannerData}) => {
 export const getServerSideProps = async () => {
   const query = '*[_type == "product"]';
   const products = await client.fetch(query);
-  const bannerQuery = '*[_type == "banner"]';
-  const bannerData = await client.fetch(bannerQuery);
+  // const bannerQuery = '*[_type == "banner"]';
+  // const bannerData = await client.fetch(bannerQuery);
 
   return {
-    props: { products, bannerData }
+    props: { products }
   }
 }
 

diff --git a/pages/product/[slug].js b/pages/product/[slug].js
@@ -56,7 +56,7 @@ const ProductDetails = ({products, product}) => {
                         </div>
                     </div>
                     <div className='add-to-cart'>
-                        <button type='button' onClick={() => onAdd(product, qty)}><CgShoppingCart size={20} />Add to Cart</button>
+                        <button className='btn' type='button' onClick={() => onAdd(product, qty)}><CgShoppingCart size={20} />Add to Cart</button>
                         <p className='price'>${price}.00</p>  
                     </div>
                 </div>

diff --git a/pages/successPay.js b/pages/successPay.js
@@ -30,7 +30,7 @@ const successPay = () => {
                 </a>
             </p>
             <Link href="/">
-                <button type="button" width="300px">
+                <button className='btn' type="button" width="300px">
                     Continue Shopping
                 </button>
             </Link>

diff --git a/sanity-ecommerce-clothing/schemas/index.js b/sanity-ecommerce-clothing/schemas/index.js
@@ -1,4 +1,4 @@
 import product from "./product"
-import banner from "./banner"
+// import banner from "./banner"
 
-export const schemaTypes = [product, banner]
+export const schemaTypes = [product]