Skip to content
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

Jump to bottom

style: add style part-l #1

Merged
merged 1 commit into from
Feb 19, 2024
Merged

style: add style part-l #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
4 changes: 3 additions & 1 deletion components/header/Header.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading