New navbar in progress
This commit is contained in:
parent
2d91a5741f
commit
e12cf8c21e
@ -12,6 +12,7 @@
|
||||
"next": "14.2.13",
|
||||
"react": "^18",
|
||||
"react-dom": "^18",
|
||||
"react-icons": "^5.3.0",
|
||||
"sharp": "^0.33.5",
|
||||
"swiper": "^11.1.14"
|
||||
},
|
||||
|
||||
@ -29,92 +29,9 @@ body {
|
||||
body {
|
||||
margin: 0;
|
||||
margin-top: 8em;
|
||||
margin-top: 0;
|
||||
padding: 0;
|
||||
background-color: #f0f0f0; /* Optional background color */
|
||||
font-family: Arial, sans-serif;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
position: fixed;
|
||||
top: 1.5em;
|
||||
left: 2em;
|
||||
right: 2em;
|
||||
background-color: white;
|
||||
border-radius: 0px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1em 2em;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.navbar a {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
margin: 0 0.5em;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.navbar a:hover {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.left,
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.navbar .center a {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
margin: 0 0;
|
||||
font-size: 1em;
|
||||
}
|
||||
.center .logo {
|
||||
height: 50px; /* Adjust the logo size as needed */
|
||||
}
|
||||
|
||||
.navbar-center .logo {
|
||||
height: 50px; /* Adjust the logo size as needed */
|
||||
}
|
||||
|
||||
.fa-search,
|
||||
.fa-user {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.navbar {
|
||||
top: 1em;
|
||||
left: 1em;
|
||||
right: 1em;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.navbar-center {
|
||||
margin: 1em 0;
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar a.active {
|
||||
font-weight: bold;
|
||||
border-bottom: 2px solid black;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
border-radius: 25px; /* Makes the corners more rounded */
|
||||
}
|
||||
|
||||
.navbar a {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.fa-search,
|
||||
.fa-user {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import './globals.css';
|
||||
import './globalicons.css';
|
||||
// import './globalicons.css';
|
||||
|
||||
import { ReactNode } from 'react';
|
||||
import Navbar from '../components/navbar';
|
||||
|
||||
27
src/components/navbar-old.tsx
Normal file
27
src/components/navbar-old.tsx
Normal file
@ -0,0 +1,27 @@
|
||||
// components/Navbar.tsx
|
||||
export default function Navbar() {
|
||||
return (
|
||||
<nav className='navbar'>
|
||||
<div className='left'>
|
||||
<a href='#about-us'>About Us</a>
|
||||
<a href='#shop'>Shop</a>
|
||||
</div>
|
||||
<div className='center'>
|
||||
<a href='/' className='mx-0'>
|
||||
<img src='/images/logo.png' alt='Logo' className='logo' />
|
||||
</a>
|
||||
</div>
|
||||
<div className='right'>
|
||||
<a href='#search'>
|
||||
<span className='material-symbols-outlined'>search</span>
|
||||
</a>
|
||||
<a href='#shopping'>
|
||||
<span className='material-symbols-outlined'>shopping_bag</span>
|
||||
</a>
|
||||
<a href='#profile'>
|
||||
<span className='material-symbols-outlined'>person</span>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
85
src/components/navbar.module-old.css
Normal file
85
src/components/navbar.module-old.css
Normal file
@ -0,0 +1,85 @@
|
||||
.navbar {
|
||||
position: fixed;
|
||||
top: 1.5em;
|
||||
left: 2em;
|
||||
right: 2em;
|
||||
@apply transition-all;
|
||||
/* background-color: white;
|
||||
border-radius: 0px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1em 2em;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
z-index: 1000; */
|
||||
}
|
||||
|
||||
/* .navbar a {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
margin: 0 0.5em;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.navbar a:hover {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.left,
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.navbar .center a {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
margin: 0 0;
|
||||
font-size: 1em;
|
||||
}
|
||||
.center .logo {
|
||||
height: 50px; /* Adjust the logo size as needed */
|
||||
}
|
||||
|
||||
.navbar-center .logo {
|
||||
height: 50px; /* Adjust the logo size as needed */
|
||||
}
|
||||
|
||||
.fa-search,
|
||||
.fa-user {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.navbar {
|
||||
top: 1em;
|
||||
left: 1em;
|
||||
right: 1em;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.navbar-center {
|
||||
margin: 1em 0;
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar a.active {
|
||||
font-weight: bold;
|
||||
border-bottom: 2px solid black;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
border-radius: 25px; /* Makes the corners more rounded */
|
||||
}
|
||||
|
||||
.navbar a {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.fa-search,
|
||||
.fa-user {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
*/
|
||||
87
src/components/navbar.module.css
Normal file
87
src/components/navbar.module.css
Normal file
@ -0,0 +1,87 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
|
||||
.navbar {
|
||||
/* position: fixed;
|
||||
@apply transition-all duration-300 top-6 left-6 right-6; */
|
||||
/* background-color: white;
|
||||
border-radius: 0px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1em 2em;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
z-index: 1000; */
|
||||
}
|
||||
|
||||
/* .navbar a {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
margin: 0 0.5em;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.navbar a:hover {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.left,
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.navbar .center a {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
margin: 0 0;
|
||||
font-size: 1em;
|
||||
}
|
||||
.center .logo {
|
||||
height: 50px; /* Adjust the logo size as needed */
|
||||
}
|
||||
|
||||
.navbar-center .logo {
|
||||
height: 50px; /* Adjust the logo size as needed */
|
||||
}
|
||||
|
||||
.fa-search,
|
||||
.fa-user {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.navbar {
|
||||
top: 1em;
|
||||
left: 1em;
|
||||
right: 1em;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.navbar-center {
|
||||
margin: 1em 0;
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar a.active {
|
||||
font-weight: bold;
|
||||
border-bottom: 2px solid black;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
border-radius: 25px; /* Makes the corners more rounded */
|
||||
}
|
||||
|
||||
.navbar a {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.fa-search,
|
||||
.fa-user {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
*/
|
||||
@ -1,26 +1,68 @@
|
||||
'use client'
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { FiSearch, FiUser } from 'react-icons/fi';
|
||||
import { HiShoppingBag } from "react-icons/hi2";
|
||||
import styles from './navbar.module.css';
|
||||
|
||||
// components/Navbar.tsx
|
||||
export default function Navbar() {
|
||||
const prevScrollY = useRef(0);
|
||||
const [navBarStyle, setNavBarStyle] = useState('initial');
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
const currentScrollY = window.scrollY;
|
||||
if (currentScrollY > prevScrollY.current && currentScrollY > 100) {
|
||||
// Scrolling down and scrolled past 100px
|
||||
setNavBarStyle('initial');
|
||||
} else if (currentScrollY < prevScrollY.current && currentScrollY > 100) {
|
||||
// Scrolling up and scrolled past 100px
|
||||
setNavBarStyle('scrolledUp');
|
||||
} else if (currentScrollY <= 100) {
|
||||
setNavBarStyle('initial');
|
||||
}
|
||||
prevScrollY.current = currentScrollY;
|
||||
};
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
|
||||
return () => window.removeEventListener('scroll', handleScroll);
|
||||
}, []); // Empty dependency array
|
||||
|
||||
const navClasses =
|
||||
navBarStyle === 'scrolledUp'
|
||||
? 'bg-white text-black rounded-b-lg shadow-lg fixed'
|
||||
: 'bg-transparent text-white';
|
||||
|
||||
return (
|
||||
<nav className='navbar'>
|
||||
<div className='left'>
|
||||
<a href='#about-us'>About Us</a>
|
||||
<a href='#shop'>Shop</a>
|
||||
</div>
|
||||
<div className='center'>
|
||||
<a href='/' className='mx-0'>
|
||||
<img src='/images/logo.png' alt='Logo' className='logo' />
|
||||
</a>
|
||||
</div>
|
||||
<div className='right'>
|
||||
<a href='#search'>
|
||||
<span className='material-symbols-outlined'>search</span>
|
||||
</a>
|
||||
<a href='#shopping'>
|
||||
<span className='material-symbols-outlined'>shopping_bag</span>
|
||||
</a>
|
||||
<a href='#profile'>
|
||||
<span className='material-symbols-outlined'>person</span>
|
||||
</a>
|
||||
<nav className={`navbar fixed top-6 left-6 right-6 transition-all duration-300 ${navClasses} z-50`}>
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex items-center justify-between h-16">
|
||||
{/* Left side */}
|
||||
<div className="flex items-center">
|
||||
<Link href="/about" className="text-sm font-medium hover:underline">
|
||||
About Us
|
||||
</Link>
|
||||
</div>
|
||||
{/* Middle */}
|
||||
<div className="flex-shrink-0">
|
||||
<Link href="/" className="text-lg font-bold">
|
||||
<img src='/images/logo.png' alt='Logo' className='logo' />
|
||||
</Link>
|
||||
</div>
|
||||
{/* Right side */}
|
||||
<div className="flex items-center space-x-4">
|
||||
<button aria-label="Search">
|
||||
<FiSearch size={20} />
|
||||
</button>
|
||||
<button aria-label="Profile">
|
||||
<FiUser size={20} />
|
||||
</button>
|
||||
<button aria-label="Shopping Cart">
|
||||
<HiShoppingBag size={20} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user