Added a header with site nav and a footer social media links

DanielWElliott · Jun 26, 2024 · 5edcc97 · 5edcc97
1 parent 0c3b2d8
commit 5edcc97
Show file tree

Hide file tree

Showing 10 changed files with 143 additions and 12 deletions.
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -0,0 +1,16 @@
+---
+import Social from "./Social.astro"
+---
+<style>
+    footer {
+        display: flex;
+        gap: 1rem;
+        margin-top: 2rem;
+    }
+</style>
+
+<footer>
+    <Social platform="twitter" username="DanielWElliott" />
+    <Social platform="github" username="DanielWElliott" />
+    <Social platform="youtube" username="@DanielWElliott" />
+</footer>
diff --git a/src/components/Hamburger.astro b/src/components/Hamburger.astro
@@ -0,0 +1,7 @@
+---
+---
+<div class="hamburger">
+    <span class="line"></span>
+    <span class="line"></span>
+    <span class="line"></span>
+</div>
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -0,0 +1,10 @@
+---
+import Hamburger from "./Hamburger.astro"
+import Navigation from "./Navigation.astro"
+---
+<header>
+    <nav>
+        <Hamburger />
+        <Navigation />
+    </nav>
+</header>
diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
@@ -0,0 +1,8 @@
+---
+const urlBase = import.meta.env.BASE_URL;
+---
+<div class="nav-links">
+    <a href={urlBase}>Home</a>
+    <a href={`${urlBase}/about/`}>About</a>
+    <a href={`${urlBase}/blog/`}>Blog</a>
+</div>
diff --git a/src/components/Social.astro b/src/components/Social.astro
@@ -0,0 +1,13 @@
+---
+const { platform, username} = Astro.props;
+---
+<a href={`https://www.${platform}.com/${username}`}>{platform}</a>
+
+<style>
+    a {
+        padding: 0.5rem 1rem;
+        color: white;
+        background-color: #4c1d95;
+        text-decoration: none;
+    }
+</style>
diff --git a/src/pages/about.astro b/src/pages/about.astro
@@ -1,4 +1,6 @@
 ---
+import Header from '../components/Header.astro';
+import Footer from '../components/Footer.astro';
 import '../styles/global.css';
 const pageTitle = "About Me";
 
@@ -40,9 +42,7 @@ const textCase = "uppercase";
           </style>
 	</head>
 	<body>
-		<a href="/astroTutorial/">Home</a>
-        <a href="/astroTutorial/about/">About</a>
-        <a href="/astroTutorial/blog/">Blog</a>
+		<Header />
         <h1>{pageTitle}</h1>
         <h2>... and my new Astro site!</h2>
 
@@ -66,5 +66,9 @@ const textCase = "uppercase";
         {finished && <p>I finished this tutorial!</p>}
 
         {goal === 3 ? <p>My goal is to finish in 3 days.</p> : <p>My goal is not 3 days.</p>}
+		<Footer />
+		<script>
+			import "../scripts/menu.js"
+		</script>
     </body>
 </html>
diff --git a/src/pages/blog.astro b/src/pages/blog.astro
@@ -1,4 +1,6 @@
 ---
+import Header from '../components/Header.astro';
+import Footer from '../components/Footer.astro';
 import '../styles/global.css';
 const pageTitle = "My Astro Learning Blog";
 ---
@@ -12,9 +14,7 @@ const pageTitle = "My Astro Learning Blog";
 		<title>{pageTitle}</title>
 	</head>
 	<body>
-		<a href="/astroTutorial/">Home</a>
-        <a href="/astroTutorial/about/">About</a>
-        <a href="/astroTutorial/blog/">Blog</a>
+		<Header />
 		<h1>{pageTitle}</h1>
 
         <p>This is where I will post about my journey learning Astro.</p>
@@ -23,5 +23,9 @@ const pageTitle = "My Astro Learning Blog";
             <li><a href="/astroTutorial/posts/post-2/">Post 2</a></li>
             <li><a href="/astroTutorial/posts/post-3/">Post 3</a></li>
         </ul>
+		<Footer/>
+		<script>
+			import "../scripts/menu.js"
+		</script>
 	</body>
 </html>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -1,6 +1,9 @@
 ---
+import Header from '../components/Header.astro';
+import Footer from '../components/Footer.astro';
 import '../styles/global.css';
-const pageTitle = "Home Page";
+
+const pageTitle = 'Home Page';
 ---
 
 <html lang="en">
@@ -12,9 +15,11 @@ const pageTitle = "Home Page";
 		<title>{pageTitle}</title>
 	</head>
 	<body>
-		<a href="/astroTutorial/">Home</a>
-        <a href="/astroTutorial/about/">About</a>
-        <a href="/astroTutorial/blog/">Blog</a>
+		<Header />
 		<h1>{pageTitle}</h1>
+		<Footer />
+		<script>
+			import "../scripts/menu.js"
+		</script>
 	</body>
-</html>
+</html>
diff --git a/src/scripts/menu.js b/src/scripts/menu.js
@@ -0,0 +1,3 @@
+document.querySelector('.hamburger').addEventListener('click', () => {
+    document.querySelector('.nav-links').classList.toggle('expanded');
+  });
diff --git a/src/styles/global.css b/src/styles/global.css
@@ -18,4 +18,65 @@ html {
   h1 {
     margin: 1rem 0;
     font-size: 2.5rem;
-  }
+  }
+
+/* nav styles */
+.hamburger {
+  padding-right: 20px;
+  cursor: pointer;
+}
+
+.hamburger .line {
+  display: block;
+  width: 40px;
+  height: 5px;
+  margin-bottom: 10px;
+  background-color: #ff9776;
+}
+
+.nav-links {
+  width: 100%;
+  top: 5rem;
+  left: 48px;
+  background-color: #ff9776;
+  display: none;
+  margin: 0;
+}
+
+.nav-links a {
+  display: block;
+  text-align: center;
+  padding: 10px 0;
+  text-decoration: none;
+  font-size: 1.2rem;
+  font-weight: bold;
+  text-transform: uppercase;
+}
+
+.nav-links a:hover,
+.nav-links a:focus {
+  background-color: #ff9776;
+}
+
+.expanded {
+  display: unset;
+}
+
+@media screen and (min-width: 636px) {
+  .nav-links {
+    margin-left: 5em;
+    display: block;
+    position: static;
+    width: auto;
+    background: none;
+  }
+
+  .nav-links a {
+    display: inline-block;
+    padding: 15px 20px;
+  }
+
+  .hamburger {
+    display: none;
+  }
+}