Skip to content

Commit

Permalink
Merge pull request #1 from deco-sites/feat/header
Browse files Browse the repository at this point in the history 
style: add style part-l
  • Loading branch information
@RodolfoN1
RodolfoN1 authored Feb 19, 2024
2 parents 4560847 + 85b2442 commit 09f535a
Show file tree
Hide file tree
Showing 17 changed files with 308 additions and 148 deletions.
4 changes: 3 additions & 1 deletion components/header/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,8 @@ function Header({
const platform = usePlatform();
const items = navItems ?? [];

// console.log('Header - items: ', items)

return (
<>
<header style={{ height: headerHeight }}>
Expand All @@ -86,7 +88,7 @@ function Header({
searchbar={searchbar}
platform={platform}
>
<div class="bg-base-100 fixed w-full z-50">
<div class="fixed w-full z-50 n1-header__desktop">
{alerts && alerts.length > 0 && <Alert alerts={alerts} />}
<Navbar
items={items}
Expand Down
19 changes: 19 additions & 0 deletions components/header/ItemWhatsapp.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import LinkButtonWithArrow from '$store/components/ui/LinkButtonWithArrow.tsx';

interface Props{
nameItemScape?: string | undefined;
url?: string | undefined;
name?: string | undefined;
}

function ItemWhatsapp( { nameItemScape, url, name }: Props ){
return(
<>
<li class={`group flex items-center n1-font-size--16 uppercase is-${nameItemScape}`}>
<LinkButtonWithArrow url={url} name={name} />
</li>
</>
)
}

export default ItemWhatsapp;
152 changes: 114 additions & 38 deletions components/header/NavItem.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,57 +1,133 @@
import type { SiteNavigationElement } from "apps/commerce/types.ts";
import Image from "apps/website/components/Image.tsx";
import { headerHeight } from "./constants.ts";
import ItemWhatsapp from '$store/components/header/ItemWhatsapp.tsx';

function NavItem({ item }: { item: SiteNavigationElement }) {
const { url, name, children } = item;
const image = item?.image?.[0];
const nameItemScape = item?.name?.replaceAll(/\s/g, '-').toLowerCase();
const itemWhatsapp = nameItemScape === 'whatsapp' ? nameItemScape : null;
const itemLegend = nameItemScape === 'legenda' ? nameItemScape : null;

// console.log('Navitem - item: ', item?.name?.replaceAll(/\s/g, '-').toLowerCase())
// console.log('----> ', itemWhatsapp)

return (
<li class="group flex items-center">
<a href={url} class="py-6">
<span class="group-hover:underline text-xs font-thin">
{name}
</span>
</a>
<>
{itemWhatsapp ?
(
<ItemWhatsapp nameItemScape={nameItemScape} url={url} name={name} />
)
: itemLegend ?
(
// <ItemLegend nameItemScape={nameItemScape} url={url} name={name} />
<>
<li class={`group flex items-center n1-font-size--16 uppercase is-${nameItemScape}`}>
<img class="w-[36px] h-[24px]" src='/image/header-sub-menu-pt-br.png' />
<a href={url} class="overflow-y-hidden h-5">
<span class="-translate-y-5 group-hover:translate-y-0 transition-all text-xs font-thin flex moveFromTop duration-500">
{/* {name} */}
</span>
<span class="-translate-y-5 group-hover:translate-y-5 transition-all text-xs font-thin flex moveFromTop duration-500">
{/* {name} */}
</span>
</a>

{children && children.length > 0 &&
{children && children.length > 0 &&
(
<div
class="fixed hidden hover:flex group-hover:flex bg-base-100 z-50 items-start justify-center gap-6 border-t border-b-2 border-base-200 w-screen"
style={{ top: "0px", left: "0px", marginTop: headerHeight }}
>
{image?.url && (
<Image
class="p-6"
src={image.url}
alt={image.alternateName}
width={300}
height={332}
loading="lazy"
/>
)}
<ul class="flex items-start justify-center gap-6">
{children.map((node) => (
<li class="p-6">
<a class="hover:underline" href={node.url}>
<span>{node.name}</span>
</a>

<ul class="flex flex-col gap-1 mt-4">
{node.children?.map((leaf) => (
<li>
<a class="hover:underline" href={leaf.url}>
<span class="text-xs">{leaf.name}</span>
</a>
</li>
))}
</ul>
</li>
))}
</ul>
</div>
)
}
</li>
</>
)
:
(
<div
class="fixed hidden hover:flex group-hover:flex bg-base-100 z-50 items-start justify-center gap-6 border-t border-b-2 border-base-200 w-screen"
style={{ top: "0px", left: "0px", marginTop: headerHeight }}
>
{image?.url && (
<Image
class="p-6"
src={image.url}
alt={image.alternateName}
width={300}
height={332}
loading="lazy"
/>
)}
<ul class="flex items-start justify-center gap-6">
{children.map((node) => (
<li class="p-6">
<a class="hover:underline" href={node.url}>
<span>{node.name}</span>
</a>
<li class={`group flex justify-between n1-font-size--16 uppercase is-${nameItemScape} items-center pt-3`}>
<a href={url} class="overflow-y-hidden h-5">
<span class="-translate-y-5 group-hover:translate-y-0 transition-all text-xs flex moveFromTop duration-500 font-black">
{name}
</span>
<span class="-translate-y-5 group-hover:translate-y-5 transition-all text-xs flex moveFromTop duration-500 font-black">
{name}
</span>
</a>

<ul class="flex flex-col gap-1 mt-4">
{node.children?.map((leaf) => (
<li>
<a class="hover:underline" href={leaf.url}>
<span class="text-xs">{leaf.name}</span>
{children && children.length > 0 &&
(
<div
class="fixed hidden hover:flex group-hover:flex bg-base-100 z-50 items-start justify-center gap-6 border-t border-b-2 border-base-200 w-screen"
style={{ top: "0px", left: "0px", marginTop: headerHeight }}
>
{image?.url && (
<Image
class="p-6"
src={image.url}
alt={image.alternateName}
width={300}
height={332}
loading="lazy"
/>
)}
<ul class="flex items-start justify-center gap-6">
{children.map((node) => (
<li class="p-6">
<a class="hover:underline" href={node.url}>
<span>{node.name}</span>
</a>

<ul class="flex flex-col gap-1 mt-4">
{node.children?.map((leaf) => (
<li>
<a class="hover:underline" href={leaf.url}>
<span class="text-xs">{leaf.name}</span>
</a>
</li>
))}
</ul>
</li>
))}
</ul>
</li>
))}
</ul>
</div>
)}
</li>
</div>
)}
</li>
)
}
</>
);
}

Expand Down
6 changes: 4 additions & 2 deletions components/header/Navbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,8 @@ function Navbar({ items, searchbar, logo, buttons, logoPosition = "left" }: {
}) {
const platform = usePlatform();

// console.log('Navibar - items: ', items)

return (
<>
{/* Mobile Version */}
Expand Down Expand Up @@ -60,9 +62,9 @@ function Navbar({ items, searchbar, logo, buttons, logoPosition = "left" }: {
</div>

{/* Desktop Version */}
<div class="hidden lg:grid lg:grid-cols-3 items-center border-b border-base-200 w-full px-6">
<div class="hidden lg:grid lg:n1-grid-cols-3 items-center w-full py-6 n1-container">
<ul
class={`flex gap-6 col-span-1 ${
class={`flex gap-8 col-span-1 ${
logoPosition === "left" ? "justify-center" : "justify-start"
}`}
>
Expand Down
21 changes: 21 additions & 0 deletions components/ui/LinkButtonWithArrow.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
interface Props{
url?: string | undefined;
name?: string | undefined;
}

function LinkButtonWithArrow( {url, name}:Props ){
return(
<a href={url} class="btn bg-accent n1-btn-header-item--rounded">
<span class="text-primary n1-font-size--16">
{name}
</span>
<div class="rounded-[50%] p-[5px] bg-[#F8BC33]">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.83333 5.83333C5.83333 5.3731 6.20643 5 6.66667 5H14.1667C14.6269 5 15 5.3731 15 5.83333V13.3333C15 13.7936 14.6269 14.1667 14.1667 14.1667C13.7064 14.1667 13.3333 13.7936 13.3333 13.3333V7.84518L6.42259 14.7559C6.09715 15.0814 5.56951 15.0814 5.24408 14.7559C4.91864 14.4305 4.91864 13.9028 5.24408 13.5774L12.1548 6.66667H6.66667C6.20643 6.66667 5.83333 6.29357 5.83333 5.83333Z" fill="#0C1F59"/>
</svg>
</div>
</a>
)
}

export default LinkButtonWithArrow;
2 changes: 1 addition & 1 deletion constants.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -462,7 +462,7 @@ export const buttonClasses = {
"Default": "",
"Primary": "btn-primary",
"Secondary": "btn-secondary",
"Tertiary": "btn-accent",
"Tertiary": "btn-accent bg-[#F6AB00]",
};

export function getButtonClasses(style: ButtonType) {
Expand Down
Loading

0 comments on commit 09f535a

Please sign in to comment.