Skip to content

Commit 9a4b496

Browse files
Ibraheem AhmedIbraheem Ahmed
Ibraheem Ahmed
authored and
Ibraheem Ahmed
committed
change nav layout
1 parent 19fa6ee commit 9a4b496

File tree

6 files changed

+89
-111
lines changed

6 files changed

+89
-111
lines changed

‎src/components/SiteNav/assets/close-icon.svg

-7
This file was deleted.

‎src/components/SiteNav/assets/hamburger-menu.svg

-1
This file was deleted.

‎src/components/SiteNav/index.astro

+22-61
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,28 @@
11
---
2-
import { Image } from 'astro:assets';
3-
import logo from '../../assets/icons/logo.svg';
4-
import closeIcon from './assets/close-icon.svg';
5-
import hamburgerIcon from './assets/hamburger-menu.svg';
2+
import { Icon } from 'astro-icon/components';
3+
import SiteNavLinks from '../SiteNavLinks/index.astro';
64
import './styles.css';
7-
const BLOG_URL = Astro.site?.href;
85
---
96

10-
<nav id="site-nav" aria-label="Main navigation menu">
11-
<ul id="nav-menubar">
12-
<li>
13-
<a href={BLOG_URL}>
14-
<Image src={logo} alt="TorontoJS Logo!" height={70} width={70} id="logo-rounded" />
15-
</a>
16-
</li>
17-
<li class="desktop-only">
18-
<a href={`${BLOG_URL}accessibility`}>
19-
Accessibility
20-
</a>
21-
</li>
22-
<li class="desktop-only">
23-
<a href={`${BLOG_URL}license`}>
24-
License
25-
</a>
26-
</li>
27-
<li class="desktop-only">
28-
<a href={`${BLOG_URL}about`}>
29-
About
30-
</a>
31-
</li>
32-
<li class="mobile-only">
33-
<button
34-
id="nav-menu-button" aria-controls="mobile-menu" aria-expanded="false" aria-haspopup="true"
35-
aria-label="Open blog navigation" popovertarget="mobile-menu"
36-
>
37-
<Image
38-
id="hamburger-icon" src={hamburgerIcon} alt="Hamburger Menu Icon" width={70} height={70}
39-
/>
40-
</button>
41-
</li>
42-
</ul>
43-
<div popover id="mobile-menu">
44-
<button popovertarget="mobile-menu" aria-controls="mobile-menu" aria-expanded="true" aria-label="Close blog navigation">
45-
<Image
46-
id="close-icon" src={closeIcon} alt="Close Icon" width={70} height={70}
7+
<nav id="desktop-navigation" aria-label="Main blog navigation">
8+
<SiteNavLinks />
9+
</nav>
10+
11+
<div id="mobile-navigation">
12+
<button
13+
id="hamburger-button" aria-controls="mobile-menu" aria-expanded="false" aria-haspopup="true"
14+
aria-label="Open blog navigation" popovertarget="mobile-menu"
15+
>
16+
<Icon
17+
id="hamburger-icon" name="mdi:hamburger-menu" title="Hamburger Menu Icon" width={70} height={70}
18+
/>
19+
</button>
20+
<nav popover id="mobile-menu" aria-label="Main blog navigation">
21+
<button popovertarget="mobile-menu" aria-controls="mobile-menu" aria-label="Close blog navigation">
22+
<Icon
23+
id="close-icon" name="mdi:close" title="Close Icon" width={70} height={70}
4724
/>
4825
</button>
49-
<ul>
50-
<li>
51-
<a href={`${BLOG_URL}accessibility`}>
52-
Accessibility
53-
</a>
54-
</li>
55-
<li>
56-
<a href={`${BLOG_URL}license`}>
57-
License
58-
</a>
59-
</li>
60-
<li>
61-
<a href={`${BLOG_URL}about`}>
62-
About
63-
</a>
64-
</li>
65-
</ul>
66-
</div>
67-
</nav>
26+
<SiteNavLinks />
27+
</nav>
28+
</div>

‎src/components/SiteNav/styles.css

+17-42
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,25 @@
1-
#site-nav {
2-
padding: var(--size-2);
1+
#desktop-navigation, #mobile-navigation {
32
background-color: var(--tjs-dark-bg);
43
font-weight: bold;
4+
padding: var(--size-2);
55
}
66

7-
#site-nav a { color: white; }
8-
9-
#logo-rounded {
10-
border-radius: var(--size-2);
11-
}
12-
13-
#nav-menubar {
14-
gap: var(--size-2);
15-
align-items: center;
16-
padding: var(--size-3);
17-
}
18-
19-
#nav-menubar .mobile-only {
20-
display: none;
21-
}
22-
23-
@media (max-width: 500px) {
24-
#nav-menubar {
25-
justify-content: space-between;
26-
}
27-
28-
#nav-menubar .mobile-only {
29-
display: block;
30-
}
31-
32-
#nav-menubar .desktop-only {
33-
display: none;
34-
}
35-
}
36-
37-
#nav-menu-button {
38-
display: none;
7+
#hamburger-button {
398
background-color: transparent;
9+
padding: var(--size-3)
4010
}
4111

42-
#nav-menu-button .hidden {
12+
#mobile-navigation {
4313
display: none;
4414
}
4515

46-
@media (max-width: 500px) {
47-
#nav-menu-button {
48-
display: block;
49-
}
50-
}
51-
5216
#mobile-menu:popover-open {
5317
width: 100%;
5418
height: 100%;
5519
text-align: center;
5620
display: flex;
5721
flex-direction: column;
58-
padding: var(--size-3);
22+
padding: var(--size-3)
5923
}
6024

6125
#mobile-menu:popover-open ul {
@@ -69,3 +33,14 @@
6933
margin-left: auto;
7034
padding: var(--size-2);
7135
}
36+
37+
@media (max-width: 31.25rem) {
38+
#mobile-navigation {
39+
display: block;
40+
text-align: right;
41+
}
42+
43+
#desktop-navigation {
44+
display: none;
45+
}
46+
}

‎src/components/SiteNavLinks/index.astro

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
---
2+
import { Image } from 'astro:assets';
3+
import logo from '../../assets/icons/logo.svg';
4+
import './styles.css';
5+
const BLOG_URL = Astro.site?.href;
6+
---
7+
8+
<ul id="nav-links">
9+
<li>
10+
<a href={BLOG_URL}>
11+
<Image src={logo} alt="TorontoJS Logo!" height={70} width={70} id="logo-rounded" />
12+
</a>
13+
</li>
14+
<li>
15+
<a href={`${BLOG_URL}accessibility`}>
16+
Accessibility
17+
</a>
18+
</li>
19+
<li>
20+
<a href={`${BLOG_URL}license`}>
21+
License
22+
</a>
23+
</li>
24+
<li>
25+
<a href={`${BLOG_URL}about`}>
26+
About
27+
</a>
28+
</li>
29+
</ul>

‎src/components/SiteNavLinks/styles.css

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
#nav-links {
2+
gap: var(--size-2);
3+
align-items: center;
4+
list-style: none;
5+
display: flex;
6+
padding: var(--size-3)
7+
}
8+
9+
#nav-links a {
10+
color: white;
11+
}
12+
13+
#logo-rounded {
14+
border-radius: var(--size-2);
15+
}
16+
17+
@media (max-width: 31.25rem) {
18+
#nav-links {
19+
flex-direction: column;
20+
}
21+
}

0 commit comments

Comments
 (0)