Skip to content

navbar hide and show #210

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

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

navbar hide and show #210

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
6 changes: 0 additions & 6 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions src/components/hero.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ import { Icon } from "astro-icon";
---

<main
class="grid lg:grid-cols-2 place-items-center pt-16 pb-8 md:pt-12 md:pb-24">
<div class="py-6 md:order-1 hidden md:block">
class="grid lg:grid-cols-2 place-items-center pt-16 pb-8 md:pt-12 md:pb-24 my-20">
<div class="py-6 md:order-1 hidden md:block ">
<Picture className="animate__animated animate__zoomIn animation-duration: 3s; animate__slow"
src={heroImage}
alt="Astronaut in the air"
Expand Down
83 changes: 69 additions & 14 deletions src/components/navbar/navbar.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,9 @@ import Container from "@components/container.astro";
import Link from "@components/ui/link.astro";
import Dropdown from "./dropdown.astro";
import { Astronav, MenuItems, MenuIcon } from "astro-navbar";
import { Icon } from 'astro-icon'
import { Icon } from "astro-icon";

const menuitems = [

// {
// title: "Pricing",
// path: "/pricing",
Expand All @@ -27,10 +26,22 @@ const menuitems = [
title: "Quick Links",
// path: "#",
children: [
{ title: "Twitter❤️", path: "https://twitter.com/astrodevil_", target: "_blank"},
{ title: "Instagram👀", path: "https://www.instagram.com/codes.astro/", target: "_blank" },
{
title: "Twitter❤️",
path: "https://twitter.com/astrodevil_",
target: "_blank",
},
{
title: "Instagram👀",
path: "https://www.instagram.com/codes.astro/",
target: "_blank",
},
// { title: "Gumroad Store📔", path: "https://astrodevil.gumroad.com/"},
{ title: "Sponser on Ko-Fi☕", path: "https://ko-fi.com/astrodevil", target: "_blank" },
{
title: "Sponser on Ko-Fi☕",
path: "https://ko-fi.com/astrodevil",
target: "_blank",
},
],
},

Expand All @@ -39,19 +50,57 @@ const menuitems = [
// path: "/contact",
// },
];
---

<style>


---

#navbar {
position: fixed;
transition: all ease 0.5s;
background-color: rgba(193, 212, 219, 0.5);
margin-left:-18px;
padding:18px;
border-radius:10px;
transform: translateY(0);
top: 0;
width: 100%;
box-shadow:0px 1.3px 0px lightgrey;
}
</style>

<script>
var prevScrollpos = window.pageYOffset;
var navbar = document.getElementById("navbar");
var navbarHeight = navbar.offsetHeight;
var scrollThreshold = 200;


window.onscroll = function() {
var currentScrollPos = window.pageYOffset;

if (window.scrollY > 200) {
if (window.scrollY > prevScrollpos) {
navbar.style.top = '-100px';
}
}else{
navbar.style.top='0px'
}
};
</script>

<Container class = "sticky top-3 sm:top-5 sm:px-5 mx-[10px] sm:mx-auto rounded-[5px] py-[1px] bg-slate-300 bg-opacity-50 backdrop-blur-[6px] z-10 sm:rounded-bl-lg sm:rounded-tl-lg sm:rounded-tr-lg sm:rounded-br-lg ">

<header class="flex flex-col lg:flex-row justify-between items-center my-4">
<Container
class="sticky top-0 rounded-[5px] py-[1px] bg-opacity-50 backdrop-blur-[6px] z-10 sm:rounded-bl-lg sm:rounded-tl-lg sm:rounded-tr-lg sm:rounded-br-lg">
<header class="flex flex-col lg:flex-row justify-between items-center my-4" id="navbar">
<Astronav>
<div class="flex w-full lg:w-auto items-center justify-between">
<a href="/" class="text-lg"
><span class="font-bold text-[20px] tracking-[0.2px] text-slate-800">Resource</span><span
class="text-slate-500 tracking-[0.2px] text-[20px]">Gallery</span
><span class="font-bold text-[20px] tracking-[0.2px] text-slate-800"
>Resource</span
><span class="text-slate-500 tracking-[0.2px] text-[20px]"
>Gallery</span
>
</a>
<div class="block lg:hidden">
Expand Down Expand Up @@ -86,16 +135,22 @@ const menuitems = [
</ul>
<div class="lg:hidden flex items-center mt-3 gap-4">
<!-- <Link href="#" style="muted" block size="md">Log in</Link> -->
<Link href="https://github.com/Astrodevil/resource-gallery/" size="md" block>Contribute to ReGala</Link>
<Link
href="https://github.com/Astrodevil/resource-gallery/"
size="md"
block>
Contribute to ReGala
</Link>
</div>
</MenuItems>
</Astronav>
<div>
<div class="hidden lg:flex items-center gap-4">

<!-- <a href="#">Log in</a> -->
<Link href="https://github.com/Astrodevil/resource-gallery/" size="md">Contribute to ReGala</Link>
<Link href="https://github.com/Astrodevil/resource-gallery/" size="md">
Contribute to ReGala
</Link>
</div>
</div>
</header>
</div>
</Container>
2 changes: 1 addition & 1 deletion src/pages/about.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ const team = [
---

<Layout title="About">
<Container>
<Container class="my-20">
<Sectionhead>
<Fragment slot="title"><span class="text-gradient">About</span></Fragment>
<Fragment slot="desc">Our team consists of each contributor improving the <strong>Resource Gallery</strong>.</Fragment>
Expand Down
2 changes: 1 addition & 1 deletion src/pages/blog.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ console.log(posts[0].frontmatter.image);
---

<Layout title="Blog">
<Container>
<Container class="my-20">
<Sectionhead>
<Fragment slot="title"><span class="text-gradient">Our Blog</span></Fragment>
<Fragment slot="desc">Our contributors write about topics and discussions around the tech world.</Fragment>
Expand Down
2 changes: 1 addition & 1 deletion src/pages/resource.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ const { frontmatter } = Astro.props;
---

<Layout title="Resources | Resource Gallery">
<main>
<main class="my-20">
<h1>Welcome to <span class="text-gradient">Resource Gallery</span></h1>
<p class="instructions">
To contribute, open the directory <code
Expand Down