Skip to content

Commit fe07473

Browse files
mmert9008mmert9008
committed
added some more components, some styles, and some JavaScript. Currently at https://docs.astro.build/en/tutorial/4-layouts/1/ 
1 parent 71a0053 commit fe07473

File tree

10 files changed

+114
-11
lines changed

10 files changed

+114
-11
lines changed

‎src/components/Hamburger.astro‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
import '../styles/global.css';
3+
4+
---
5+
6+
<div class="hamburger">
7+
<span class="line"></span>
8+
<span class="line"></span>
9+
<span class="line"></span>
10+
</div>

‎src/components/Header.astro‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
---
2+
import '../styles/global.css';
3+
import Hamburger from './Hamburger.astro';
4+
import Navigation from './Navigation.astro';
5+
6+
---
7+
8+
<header>
9+
<nav>
10+
<Hamburger />
11+
<Navigation />
12+
</nav>
13+
</header>

‎src/components/Navigation.astro‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import '../styles/global.css';
44
55
---
66

7-
<a href="/">Home</a>
8-
<a href="/about/">About</a>
9-
<a href="/blog/">Blog</a>
7+
<div class="nav-links">
8+
<a href="/">Home</a>
9+
<a href="/about/">About</a>
10+
<a href="/blog/">Blog</a>
11+
</div>

‎src/components/Social.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import '../styles/global.css';
44
const { platform, username } = Astro.props;
55
---
66

7-
<a href={`https://www.${platform}.com/${username}`}>{platform}</a>
7+
<a href={`https://www.${platform}.com/${username}`} target='_blank'>{platform}</a>
88

99
<style>
1010
a {

‎src/pages/about.astro‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
import '../styles/global.css';
3-
import Navigation from '../components/Navigation.astro';
3+
import Header from '../components/Header.astro';
44
import Footer from '../components/Footer.astro';
55
66
const pageTitle = "About Me";
@@ -44,7 +44,7 @@ const textCase = "uppercase"
4444
</style>
4545
</head>
4646
<body>
47-
<Navigation />
47+
<Header />
4848
<h1>{pageTitle}</h1>
4949
<h2>... and my new Astro site!</h2>
5050

@@ -71,5 +71,8 @@ const textCase = "uppercase"
7171

7272
{goal === 3 ? <p>My goal is to finish in 3 days.</p> : <p>My goal is not 3 days.</p>}
7373
<Footer />
74+
<script>
75+
import '../scripts/menu.js';
76+
</script>
7477
</body>
7578
</html>

‎src/pages/blog.astro‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
import '../styles/global.css';
3-
import Navigation from '../components/Navigation.astro';
3+
import Header from '../components/Header.astro';
44
import Footer from '../components/Footer.astro';
55
66
---
@@ -14,7 +14,7 @@ import Footer from '../components/Footer.astro';
1414
<title>Astro</title>
1515
</head>
1616
<body>
17-
<Navigation />
17+
<Header />
1818
<h1>My Astro Learning Blog</h1>
1919
<p>This is where I will post about my journey learning Astro.</p>
2020
<ul>
@@ -23,5 +23,8 @@ import Footer from '../components/Footer.astro';
2323
<li><a href="/posts/post-3/">Post 3</a></li>
2424
</ul>
2525
<Footer />
26+
<script>
27+
import '../scripts/menu.js';
28+
</script>
2629
</body>
2730
</html>

‎src/pages/index.astro‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
import '../styles/global.css';
3-
import Navigation from '../components/Navigation.astro';
3+
import Header from '../components/Header.astro';
44
import Footer from '../components/Footer.astro';
55
66
const pageTitle = 'Home Page';
@@ -15,8 +15,11 @@ const pageTitle = 'Home Page';
1515
<title>{pageTitle}</title>
1616
</head>
1717
<body>
18-
<Navigation />
18+
<Header />
1919
<h1>{pageTitle}</h1>
2020
<Footer />
21+
<script>
22+
import '../scripts/menu.js';
23+
</script>
2124
</body>
2225
</html>

‎src/scripts/menu.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
document.querySelector('.hamburger').addEventListener('click', () => {
2+
document.querySelector('.nav-links').classList.toggle('expanded');
3+
});

‎src/styles/global.css‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,4 +28,67 @@ body {
2828
h1 {
2929
margin: 1rem 0;
3030
font-size: 2.5rem;
31+
}
32+
33+
/* nav styles */
34+
35+
.hamburger {
36+
padding-right: 20px;
37+
cursor: pointer;
38+
}
39+
40+
.hamburger .line {
41+
display: block;
42+
width: 40px;
43+
height: 5px;
44+
margin-bottom: 10px;
45+
background-color: #ff9776;
46+
}
47+
48+
.nav-links {
49+
width: 100%;
50+
top: 5rem;
51+
left: 48px;
52+
background-color: #ff9776;
53+
display: none;
54+
margin: 0;
55+
}
56+
57+
.nav-links a {
58+
display: block;
59+
text-align: center;
60+
padding: 10px 0;
61+
text-decoration: none;
62+
font-size: 1.2rem;
63+
font-weight: bold;
64+
text-transform: uppercase;
65+
}
66+
67+
.nav-links a:hover,
68+
.nav-links a:focus {
69+
background-color: #ff9776;
70+
}
71+
72+
.expanded {
73+
display: unset;
74+
}
75+
76+
@media screen and (min-width: 636px) {
77+
.nav-links {
78+
margin-left: 5em;
79+
display: block;
80+
position: static;
81+
width: auto;
82+
background: none;
83+
}
84+
85+
.nav-links a {
86+
display: inline-block;
87+
padding: 15px 20px;
88+
}
89+
90+
.hamburger {
91+
display: none;
92+
}
93+
3194
}

‎tsconfig.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
{
22
"extends": "astro/tsconfigs/strict",
33
"include": [".astro/types.d.ts", "**/*"],
4-
"exclude": ["dist"]
4+
"exclude": ["dist"],
5+
"compilerOptions": {
6+
"lib": ["esnext", "dom"]
7+
}
58
}

0 commit comments

Comments
 (0)