From 79d618d3ee66934ec7c0439a30993abee3bdd3b9 Mon Sep 17 00:00:00 2001 From: Ibraheem Ahmed Date: Sun, 18 Aug 2024 18:03:23 -0400 Subject: [PATCH 1/7] added html css for hamburger menu --- src/components/PostHeader/index.astro | 2 +- .../SiteNav/assets/hamburger-menu.svg | 1 + src/components/SiteNav/index.astro | 79 +++++++++++++------ src/components/SiteNav/styles.css | 54 +++++++++++++ 4 files changed, 113 insertions(+), 23 deletions(-) create mode 100644 src/components/SiteNav/assets/hamburger-menu.svg diff --git a/src/components/PostHeader/index.astro b/src/components/PostHeader/index.astro index a8c35ee..c735ea5 100644 --- a/src/components/PostHeader/index.astro +++ b/src/components/PostHeader/index.astro @@ -1,6 +1,6 @@ --- -import { Image } from 'astro:assets'; import { Icon } from 'astro-icon/components'; +import { Image } from 'astro:assets'; import SiteNav from '../SiteNav/index.astro'; diff --git a/src/components/SiteNav/assets/hamburger-menu.svg b/src/components/SiteNav/assets/hamburger-menu.svg new file mode 100644 index 0000000..06bb2c8 --- /dev/null +++ b/src/components/SiteNav/assets/hamburger-menu.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/SiteNav/index.astro b/src/components/SiteNav/index.astro index 2c6b5d8..dc46de6 100644 --- a/src/components/SiteNav/index.astro +++ b/src/components/SiteNav/index.astro @@ -1,30 +1,65 @@ --- import { Image } from 'astro:assets'; import logo from '../../assets/icons/logo.svg'; +import hamburgerIcon from './assets/hamburger-menu.svg'; import './styles.css'; const BLOG_URL = Astro.site?.href; --- + diff --git a/src/components/SiteNav/styles.css b/src/components/SiteNav/styles.css index 40a17da..232bb8c 100644 --- a/src/components/SiteNav/styles.css +++ b/src/components/SiteNav/styles.css @@ -4,6 +4,44 @@ font-weight: bold; } +#nav-bar { + display: flex; + justify-content: space-between; +} + +#mobile-menu { + width: 100%; + display: none; +} + +#mobile-menu.active { + display: block; + transform: translateY(1px); +} + +#mobile-menu ul { + display: flex; + flex-direction: column; +} + +#right-nav { + justify-content: right; + flex-wrap: nowrap; +} + +#right-nav .mobile-screen { + display: none; +} + +#left-nav { + justify-content: left; +} + +#nav-menu-button { + display: none; + background-color: transparent; +} + #site-nav ul { gap: var(--size-2); align-items: center; @@ -19,3 +57,19 @@ @media (max-width: 500px) { #site-nav ul { flex-direction: column; } } + +@media (max-width: 500px) { + #site-nav #nav-menu-button { + display: block; + } +} + +@media (max-width: 500px) { + #right-nav .mobile-screen { + display: block; + } + + #right-nav li { + display: none; + } +} From 190ff8fb3364194aa4ee766140400e3313c44585 Mon Sep 17 00:00:00 2001 From: Ibraheem Ahmed Date: Wed, 21 Aug 2024 15:58:53 -0400 Subject: [PATCH 2/7] added accessibility support for the hamburger menu --- src/components/SiteNav/assets/close-icon.svg | 7 ++ src/components/SiteNav/index.astro | 78 +++++++++--------- src/components/SiteNav/styles.css | 85 +++++++++----------- 3 files changed, 87 insertions(+), 83 deletions(-) create mode 100644 src/components/SiteNav/assets/close-icon.svg diff --git a/src/components/SiteNav/assets/close-icon.svg b/src/components/SiteNav/assets/close-icon.svg new file mode 100644 index 0000000..78285be --- /dev/null +++ b/src/components/SiteNav/assets/close-icon.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/src/components/SiteNav/index.astro b/src/components/SiteNav/index.astro index dc46de6..1851a21 100644 --- a/src/components/SiteNav/index.astro +++ b/src/components/SiteNav/index.astro @@ -1,42 +1,51 @@ --- import { Image } from 'astro:assets'; import logo from '../../assets/icons/logo.svg'; +import closeIcon from './assets/close-icon.svg'; import hamburgerIcon from './assets/hamburger-menu.svg'; import './styles.css'; const BLOG_URL = Astro.site?.href; --- - + +
+ +
- + + + diff --git a/src/components/SiteNav/styles.css b/src/components/SiteNav/styles.css index fe5621c..780bb1a 100644 --- a/src/components/SiteNav/styles.css +++ b/src/components/SiteNav/styles.css @@ -1,61 +1,25 @@ -#site-nav { - padding: var(--size-2); +#desktop-navigation, #mobile-navigation { background-color: var(--tjs-dark-bg); font-weight: bold; + padding: var(--size-2); } -#site-nav a { color: white; } - -#logo-rounded { - border-radius: var(--size-2); -} - -#nav-menubar { - gap: var(--size-2); - align-items: center; - padding: var(--size-3); -} - -#nav-menubar .mobile-only { - display: none; -} - -@media (max-width: 500px) { - #nav-menubar { - justify-content: space-between; - } - - #nav-menubar .mobile-only { - display: block; - } - - #nav-menubar .desktop-only { - display: none; - } -} - -#nav-menu-button { - display: none; +#hamburger-button { background-color: transparent; + padding: var(--size-3) } -#nav-menu-button .hidden { +#mobile-navigation { display: none; } -@media (max-width: 500px) { - #nav-menu-button { - display: block; - } -} - #mobile-menu:popover-open { width: 100%; height: 100%; text-align: center; display: flex; flex-direction: column; - padding: var(--size-3); + padding: var(--size-3) } #mobile-menu:popover-open ul { @@ -69,3 +33,14 @@ margin-left: auto; padding: var(--size-2); } + +@media (max-width: 31.25rem) { + #mobile-navigation { + display: block; + text-align: right; + } + + #desktop-navigation { + display: none; + } +} diff --git a/src/components/SiteNavLinks/index.astro b/src/components/SiteNavLinks/index.astro new file mode 100644 index 0000000..31a1f4f --- /dev/null +++ b/src/components/SiteNavLinks/index.astro @@ -0,0 +1,29 @@ +--- +import { Image } from 'astro:assets'; +import logo from '../../assets/icons/logo.svg'; +import './styles.css'; +const BLOG_URL = Astro.site?.href; +--- + + diff --git a/src/components/SiteNavLinks/styles.css b/src/components/SiteNavLinks/styles.css new file mode 100644 index 0000000..5a98df6 --- /dev/null +++ b/src/components/SiteNavLinks/styles.css @@ -0,0 +1,21 @@ +#nav-links { + gap: var(--size-2); + align-items: center; + list-style: none; + display: flex; + padding: var(--size-3) +} + +#nav-links a { + color: white; +} + +#logo-rounded { + border-radius: var(--size-2); +} + +@media (max-width: 31.25rem) { + #nav-links { + flex-direction: column; + } +} From 87f2e06d40623d3f0965556fa4f64fd772f7b6e5 Mon Sep 17 00:00:00 2001 From: Ibraheem Ahmed Date: Tue, 24 Sep 2024 17:31:27 -0400 Subject: [PATCH 5/7] remove NavLinks component and move the code into SiteNav --- src/components/SiteNav/index.astro | 50 +++++++++++++++++++++++-- src/components/SiteNav/styles.css | 24 +++++++++++- src/components/SiteNavLinks/index.astro | 29 -------------- src/components/SiteNavLinks/styles.css | 21 ----------- 4 files changed, 70 insertions(+), 54 deletions(-) delete mode 100644 src/components/SiteNavLinks/index.astro delete mode 100644 src/components/SiteNavLinks/styles.css diff --git a/src/components/SiteNav/index.astro b/src/components/SiteNav/index.astro index b27c902..859512c 100644 --- a/src/components/SiteNav/index.astro +++ b/src/components/SiteNav/index.astro @@ -1,11 +1,34 @@ --- import { Icon } from 'astro-icon/components'; -import SiteNavLinks from '../SiteNavLinks/index.astro'; +import { Image } from 'astro:assets'; +import logo from '../../assets/icons/logo.svg'; import './styles.css'; +const BLOG_URL = Astro.site?.href; ---
@@ -23,6 +46,27 @@ import './styles.css'; id="close-icon" name="mdi:close" title="Close Icon" width={70} height={70} /> - +
diff --git a/src/components/SiteNav/styles.css b/src/components/SiteNav/styles.css index 780bb1a..d9384d6 100644 --- a/src/components/SiteNav/styles.css +++ b/src/components/SiteNav/styles.css @@ -4,6 +4,22 @@ padding: var(--size-2); } +.nav-links { + gap: var(--size-2); + align-items: center; + list-style: none; + display: flex; + padding: var(--size-3) +} + +.nav-links a { + color: white; +} + +#logo-rounded { + border-radius: var(--size-2); +} + #hamburger-button { background-color: transparent; padding: var(--size-3) @@ -34,7 +50,7 @@ padding: var(--size-2); } -@media (max-width: 31.25rem) { +@media (max-width: 32rem) { #mobile-navigation { display: block; text-align: right; @@ -44,3 +60,9 @@ display: none; } } + +@media (max-width: 32rem) { + .nav-links { + flex-direction: column; + } +} diff --git a/src/components/SiteNavLinks/index.astro b/src/components/SiteNavLinks/index.astro deleted file mode 100644 index 31a1f4f..0000000 --- a/src/components/SiteNavLinks/index.astro +++ /dev/null @@ -1,29 +0,0 @@ ---- -import { Image } from 'astro:assets'; -import logo from '../../assets/icons/logo.svg'; -import './styles.css'; -const BLOG_URL = Astro.site?.href; ---- - - diff --git a/src/components/SiteNavLinks/styles.css b/src/components/SiteNavLinks/styles.css deleted file mode 100644 index 5a98df6..0000000 --- a/src/components/SiteNavLinks/styles.css +++ /dev/null @@ -1,21 +0,0 @@ -#nav-links { - gap: var(--size-2); - align-items: center; - list-style: none; - display: flex; - padding: var(--size-3) -} - -#nav-links a { - color: white; -} - -#logo-rounded { - border-radius: var(--size-2); -} - -@media (max-width: 31.25rem) { - #nav-links { - flex-direction: column; - } -} From 780469715d8c23d4ef70efd32897e81e4a652393 Mon Sep 17 00:00:00 2001 From: Ibraheem Ahmed Date: Tue, 24 Sep 2024 18:14:04 -0400 Subject: [PATCH 6/7] add torontojs logo for mobile navbar --- src/components/SiteNav/index.astro | 3 +++ src/components/SiteNav/styles.css | 8 +++++++- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/src/components/SiteNav/index.astro b/src/components/SiteNav/index.astro index 859512c..6ab67b3 100644 --- a/src/components/SiteNav/index.astro +++ b/src/components/SiteNav/index.astro @@ -32,6 +32,9 @@ const BLOG_URL = Astro.site?.href;
+