Skip to content

test #302

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

Merged
davidabram merged 6 commits into from
Jan 2, 2025
Merged

test #302

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f016393
test
davidabram Jan 2, 2025
6920d79
test2
davidabram Jan 2, 2025
6a83a34
fix try1
davidabram Jan 2, 2025
c838c64
try 2
davidabram Jan 2, 2025
b31c35e
fix
davidabram Jan 2, 2025
51de2b3
fixes
davidabram Jan 2, 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
76 changes: 31 additions & 45 deletions apps/blog/src/layouts/header.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,15 @@
<header
class="flex w-full justify-center md:mt-1"
>
<div class="
m-auto
<header class="flex w-full justify-center md:mt-1">
<div
class="m-auto
mx:0
max-w-[100vw]
w-full
md:mx-2
md:w-auto
md:[&_[data-navhidden]]:duration-700
md:[&_[data-navhidden]]:!overflow-hidden
md:[&_[data-navhidden]]:ease-in-out
md:[&_[data-navhidden='false']]:w-0
md:[&_[data-navhidden='false']]:px-0
md:[&_[data-navhidden='false']]:mx-0
md:[&_[data-navhidden='']]:max-w-48
z-50"
>
<nav
class='bg-[#3C3843E5]
class="bg-[#3C3843E5]
flex
items-center
justify-between
Expand All @@ -29,36 +20,33 @@
md:rounded-r-lg
md:overflow-hidden
relative
max-md:has-[input:checked]:bg-[#3c3843]'
max-md:has-[input:checked]:bg-[#3c3843]"
>
<a class='sm:flex sm:items-center' href='/' aria-label='Crocoder Logo'>
<a class="sm:flex sm:items-center" href="/" aria-label="Crocoder Logo">
<img
width={64}
height={30}
alt='Crocoder Crocodile Logo'
src='./images/crocoder-logo.png'
class='h-[48px] w-auto'
alt="Crocoder Crocodile Logo"
src="./images/crocoder-logo.png"
class="h-[48px] w-auto"
/>
<img
width={153}
height={24}
alt='Crocoder Text Logo'
src='./images/crocoder-text.svg'
class="pl-2 hidden h-6 w-auto md:block
md:[&[data-navhidden='false']]:opacity-0
md:[&[data-navhidden='']]:opacity-100"
data-navhidden
alt="Crocoder Text Logo"
src="./images/crocoder-text.svg"
class="pl-2 hidden h-6 w-auto md:block"
/>
</a>
<input
id='nav-menu-toggle'
type='checkbox'
id="nav-menu-toggle"
type="checkbox"
readonly
class='hidden peer/menu-toggle'
class="hidden peer/menu-toggle"
/>
<label
for='nav-menu-toggle'
class='md:hidden
for="nav-menu-toggle"
class="md:hidden
flex
flex-col
gap-1.5
Expand All @@ -67,47 +55,45 @@
peer-checked/menu-toggle:[&>*:nth-child(2)]:opacity-0
peer-checked/menu-toggle:[&>*:nth-child(2)]:-translate-x-full
peer-checked/menu-toggle:[&>*:nth-child(3)]:-translate-y-2
peer-checked/menu-toggle:[&>*:nth-child(3)]:-rotate-45'
peer-checked/menu-toggle:[&>*:nth-child(3)]:-rotate-45"
>
<span class='h-0.5 w-6 bg-neutral-50 transition-transform duration-200'
<span class="h-0.5 w-6 bg-neutral-50 transition-transform duration-200"
></span>
<span
class='h-0.5 w-6 bg-neutral-50 transition-[transform_opacity] duration-350'
class="h-0.5 w-6 bg-neutral-50 transition-[transform_opacity] duration-350"
></span>
<span class='h-0.5 w-6 bg-neutral-50 transition-transform duration-200'
<span class="h-0.5 w-6 bg-neutral-50 transition-transform duration-200"
></span>
</label>
<div
class='max-md:absolute max-md:hidden max-md:peer-checked/menu-toggle:flex max-md:flex-col max-md:gap-7 max-md:top-[74px] max-md:w-full max-md:py-7 bg-[#3c3843] max-md:h-[calc(100vh-74px)] max-md:right-0 md:bg-transparent md:flex md:items-center'
class="max-md:absolute max-md:hidden max-md:peer-checked/menu-toggle:flex max-md:flex-col max-md:gap-7 max-md:top-[74px] max-md:w-full max-md:py-7 bg-[#3c3843] max-md:h-[calc(100vh-74px)] max-md:right-0 md:bg-transparent md:flex md:items-center"
>
<ul
data-navhidden
class='flex flex-col md:flex-row gap-7 mx-7 md:mx-0 md:ml-20 md:w-auto relative top-1'
class="flex flex-col md:flex-row gap-7 mx-7 md:mx-0 md:ml-20 md:w-auto relative top-1"
>
<li>
<a
class='font-medium text-2xl md:text-lg text-[#E8E8E8] hover:text-white whitespace-nowrap'
href='/blog'
class="font-medium text-2xl md:text-lg text-[#E8E8E8] hover:text-white whitespace-nowrap"
href="/blog"
>
For CTOs
</a>
</li>
<li>
<a
class='font-medium text-2xl md:text-lg text-[#E8E8E8] hover:text-white'
href='/blog'
class="font-medium text-2xl md:text-lg text-[#E8E8E8] hover:text-white"
href="/blog"
>
Blog
</a>
</li>
</ul>
<ul class='flex gap-4 mx-7 md:ml-4 md:mx-4'>
<ul class="flex gap-4 mx-7 md:ml-4 md:mx-4">
<li>
<a
id='book-a-call-action'
class="flex w-fit font-medium h-[45px] items-center px-4 py-2 rounded-md text-base text-center whitespace-nowrap bg-[#545664] text-[#ffffff] hover:opacity-90"
data-navhidden
href='/#book-a-call-section'>Book a call</a
id="book-a-call-action"
class="flex opacity-0 w-fit font-medium h-[45px] items-center px-4 py-2 rounded-md text-base text-center whitespace-nowrap bg-[#545664] text-[#ffffff] hover:opacity-90"
href="/#book-a-call-section">Book a call</a
>
</li>
</ul>
Expand Down
92 changes: 48 additions & 44 deletions apps/website/src/components/navigation.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
z-50"
>
<nav
class='bg-[#3C3843E5]
class="bg-[#3C3843E5]
flex
items-center
justify-between
Expand All @@ -29,36 +29,36 @@
md:rounded-r-lg
md:overflow-hidden
relative
max-md:has-[input:checked]:bg-[#3c3843]'
max-md:has-[input:checked]:bg-[#3c3843]"
>
<a class='sm:flex sm:items-center' href='/' aria-label='Crocoder Logo'>
<a class="sm:flex sm:items-center" href="/" aria-label="Crocoder Logo">
<img
width={64}
height={30}
alt='Crocoder Crocodile Logo'
src='./images/crocoder-logo.png'
class='h-[48px] w-auto'
alt="Crocoder Crocodile Logo"
src="./images/crocoder-logo.png"
class="h-[48px] w-auto"
/>
<img
width={153}
height={24}
alt='Crocoder Text Logo'
src='./images/crocoder-text.svg'
alt="Crocoder Text Logo"
src="./images/crocoder-text.svg"
class="pl-2 hidden h-6 w-auto md:block
md:[&[data-navhidden='false']]:opacity-0
md:[&[data-navhidden='']]:opacity-100"
data-navhidden
/>
</a>
<input
id='nav-menu-toggle'
type='checkbox'
id="nav-menu-toggle"
type="checkbox"
readonly
class='hidden peer/menu-toggle'
class="hidden peer/menu-toggle"
/>
<label
for='nav-menu-toggle'
class='md:hidden
for="nav-menu-toggle"
class="md:hidden
flex
flex-col
gap-1.5
Expand All @@ -67,57 +67,57 @@
peer-checked/menu-toggle:[&>*:nth-child(2)]:opacity-0
peer-checked/menu-toggle:[&>*:nth-child(2)]:-translate-x-full
peer-checked/menu-toggle:[&>*:nth-child(3)]:-translate-y-2
peer-checked/menu-toggle:[&>*:nth-child(3)]:-rotate-45'
peer-checked/menu-toggle:[&>*:nth-child(3)]:-rotate-45"
>
<span class='h-0.5 w-6 bg-neutral-50 transition-transform duration-200'
<span class="h-0.5 w-6 bg-neutral-50 transition-transform duration-200"
></span>
<span
class='h-0.5 w-6 bg-neutral-50 transition-[transform_opacity] duration-350'
class="h-0.5 w-6 bg-neutral-50 transition-[transform_opacity] duration-350"
></span>
<span class='h-0.5 w-6 bg-neutral-50 transition-transform duration-200'
<span class="h-0.5 w-6 bg-neutral-50 transition-transform duration-200"
></span>
</label>
<div
class='max-md:absolute max-md:hidden max-md:peer-checked/menu-toggle:flex max-md:flex-col max-md:gap-7 max-md:top-[74px] max-md:w-full max-md:py-7 bg-[#3c3843] max-md:h-[calc(100vh-74px)] max-md:right-0 md:bg-transparent md:flex md:items-center'
class="max-md:absolute max-md:hidden max-md:peer-checked/menu-toggle:flex max-md:flex-col max-md:gap-7 max-md:top-[74px] max-md:w-full max-md:py-7 bg-[#3c3843] max-md:h-[calc(100vh-74px)] max-md:right-0 md:bg-transparent md:flex md:items-center"
>
<ul
data-navhidden
class='flex flex-col md:flex-row gap-7 mx-7 md:mx-0 md:ml-20 md:w-auto relative top-1'
class="flex flex-col md:flex-row gap-7 mx-7 md:mx-0 md:ml-20 md:w-auto relative top-1"
>
<li>
<a
class='font-medium text-2xl md:text-lg text-[#E8E8E8] hover:text-white whitespace-nowrap'
href='/blog'
class="font-medium text-2xl md:text-lg text-[#E8E8E8] hover:text-white whitespace-nowrap"
href="/blog"
>
For CTOs
</a>
</li>
<li>
<a
class='font-medium text-2xl md:text-lg text-[#E8E8E8] hover:text-white'
href='/blog'
class="font-medium text-2xl md:text-lg text-[#E8E8E8] hover:text-white"
href="/blog"
>
Blog
</a>
</li>
</ul>
<ul class='flex gap-4 mx-7 md:ml-4 md:mx-4'>
<ul class="flex gap-4 mx-7 md:ml-4 md:mx-4">
<li>
<a
id='book-a-call-action'
id="book-a-call-action"
class="flex w-fit font-medium h-[45px] items-center px-4 py-2 rounded-md text-base text-center whitespace-nowrap bg-[#545664] text-[#ffffff] hover:opacity-90
md:[&[data-navhidden='false']]:!w-auto
md:[&[data-navhidden='false']]:!px-4
md:[&[data-navhidden='false']]:opacity-0
md:[&[data-navhidden='']]:opacity-100
md:[&[data-navhidden='']]:delay-100"
data-navhidden='false'
href='#book-a-call-section'>Book a call</a
data-navhidden="false"
href="#book-a-call-section">Book a call</a
>
<li class='hidden'>
<li class="hidden">
<a
class='flex font-medium w-fit h-[45px] items-center px-4 py-2 rounded-md text-base text-center whitespace-nowrap bg-[#FEC343] text-[#1E1A1A] hover:opacity-90'
href='/contact'
class="flex font-medium w-fit h-[45px] items-center px-4 py-2 rounded-md text-base text-center whitespace-nowrap bg-[#FEC343] text-[#1E1A1A] hover:opacity-90"
href="/contact"
>
Contact us
</a>
Expand Down Expand Up @@ -146,48 +146,52 @@
lastRan = Date.now();
}
},
limit - (Date.now() - lastRan)
limit - (Date.now() - lastRan),
);
}
};
}

let lastScrollTop = 0;
const allDataHidden = document.querySelectorAll('[data-navhidden]');
const bookACallAction = document.getElementById('book-a-call-action');
const bookACallAction = document.getElementById("book-a-call-action");

function invertDataAttributte() {
function invertDataAttributte(allDataHidden) {
allDataHidden.forEach((e) => {
if (e.getAttribute('data-navhidden') === '')
e.setAttribute('data-navhidden', 'false');
else e.setAttribute('data-navhidden', '');
if (e.getAttribute("data-navhidden") === "") {
e.setAttribute("data-navhidden", "false");
} else {
e.setAttribute("data-navhidden", "");
}
});
}

function handleScroll() {
const allDataHidden = document.querySelectorAll("[data-navhidden]");
let currentScrollTop = window.scrollY || document.documentElement.scrollTop;

if (
currentScrollTop > lastScrollTop &&
allDataHidden[0].getAttribute('data-navhidden') === ''
allDataHidden[0].getAttribute("data-navhidden") === ""
) {
invertDataAttributte();
invertDataAttributte(allDataHidden);
} else if (
currentScrollTop <= lastScrollTop &&
allDataHidden[0].getAttribute('data-navhidden') === 'false'
allDataHidden[0].getAttribute("data-navhidden") === "false"
) {
invertDataAttributte();
invertDataAttributte(allDataHidden);
}

lastScrollTop = currentScrollTop <= 0 ? 0 : currentScrollTop;
}

function handleBookACall() {
const input = document.getElementById('nav-menu-toggle');
const input = document.getElementById("nav-menu-toggle");
input.checked = false;
}

window.addEventListener('scroll', throttle(handleScroll, 200));
window.addEventListener("scroll", throttle(handleScroll, 200));

console.log("window", window);

bookACallAction.addEventListener('click', handleBookACall);
bookACallAction.addEventListener("click", handleBookACall);
</script>
Loading