Skip to content

feat: add burger on small screen, with show / hide functionality. #26

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
merged 2 commits into from
Feb 26, 2023
Merged

feat: add burger on small screen, with show / hide functionality. #26

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5f84b42
feat: add burger on small screen, with show / hide functionality. adj…
olierxleben Feb 26, 2023
afc5e2e
fix import
olierxleben Feb 26, 2023
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
35 changes: 31 additions & 4 deletions src/components/Header.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
import { Icon } from "astro-icon";

const desktop = [
const navItems = [
{
name: "Snippets",
href: "/snippets/",
Expand All @@ -16,10 +16,10 @@ const desktop = [

<header class="dark:bg-zinc-900 bg-white max-w-7xl m-auto transition-colors">
<a href="/" class="text-lg sm:text-xl text-black dark:text-zinc-300 hover:dark:text-white transition-colors absolute m-8">Angular Snippets</a>
<nav class="p-8 flex justify-end">
<nav class="p-8 hidden sm:flex justify-end">
<ul class="flex justify-end items-center m-0 space-x-1">
{
desktop.map((item) => (
navItems.map((item) => (
<li>
<a href ={item.href} class="hover:bg-zinc-300 dark:hover:bg-zinc-700 dark:text-zinc-300 text-black p-2 transition-colors rounded-lg">
{item.name}
Expand All @@ -36,5 +36,32 @@ const desktop = [
<Icon name="akar-icons:sun" class="w-6 dark:text-white text-black transition-colors hidden dark:block" />
</button>
</nav>

<nav class="p-2 flex sm:hidden justify-end">
<a aria-label="github" class="pointer mx-3 py-6" href="https://github.com/santoshyadavdev/angular-snipptes" target="_blank">
<Icon name="simple-icons:github" class="w-6 dark:text-white text-black" />
</a>
<button aria-label="theme toggle" class="pointer theme-toggle">
<Icon name="eva:moon-outline" class="w-6 dark:text-white text-black transition-colors dark:hidden" />
<Icon name="akar-icons:sun" class="w-6 dark:text-white text-black transition-colors hidden dark:block" />
</button>
<button class="flex sm:hidden justify-end nav-toggle ml-3 mr-6 py-6" aria-label="menu button">
<Icon name="ri:menu-4-line" class="w-6 h-6" />
</button>
</nav>

</header>

<header class="nav-menu hidden bg-white dark:bg-zinc-900">
{
(
<nav class="m-8 flex flex-col inline-flex space-y-1 ">
{navItems.map((navbar) => (
<a href={navbar.href} class="hover:bg-zinc-300 dark:hover:bg-zinc-700 dark:text-zinc-300 text-black p-2 transition-colors rounded-lg">
{navbar.name}
</a>
))}
</nav>
)
}

</header>
11 changes: 9 additions & 2 deletions src/scripts/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,18 @@
const themeBtn = document.querySelector(".theme-toggle");
const themeBtns = document.querySelectorAll(".theme-toggle");
const htmlClassList = document.documentElement.classList;
themeBtn.addEventListener("click", function () {
themeBtns.forEach( btn => btn.addEventListener("click", function () {

if (htmlClassList.contains("dark")) {
localStorage.setItem("theme", "light");
htmlClassList.remove("dark");
} else {
localStorage.setItem("theme", "dark");
htmlClassList.add("dark");
}
}));

const navBtn = document.querySelector(".nav-toggle");
const navMenu = document.querySelector(".nav-menu");
navBtn.addEventListener("click", function () {
navMenu.classList.toggle("hidden");
});