Skip to main content
The Footer component displays contact information, social media links, and conditionally shows a video policy link based on the current page.

​
Features

  • Contact email with image link
  • Social media icons (Twitter/X, Instagram, GitHub)
  • Conditional rendering based on current page
  • Hover scale animations
  • Game icon display

​
Usage

src/layouts/Layout.astro
---
import Footer from "../components/Footer.astro";
---

<Footer />

​
Component Code

The Footer component uses Astro.url.pathname to conditionally render content:
src/components/Footer.astro
---
const pathname = Astro.url.pathname;
---

{
  pathname !== "/youtube" ? (
    <section>
      <div>
        <div class="container">
          <div class="text-center mt-3">
            <>
              <img
                class="me-2"
                width="92"
                height="88"
                src="https://www.robtopgames.com/Images/icon_200b.png"
              />
              <img
                class="me-2"
                width="92"
                height="88"
                src="https://www.robtopgames.com/Images/icon_200.png"
              />
            </>
          </div>
        </div>
      </div>
    </section>
  ) : null
}

<section>
  <div class="text-center mt-3">
    <img
      class="me-0"
      width="69"
      height="66"
      src="https://www.robtopgames.com/Images/letter.png"
    />
    <a class="me-0 pe-0" href="mailto:[email protected]">
      <img
        class="ms-0 ps-0 me-2 hover-scale transition-all"
        width="98"
        height="45"
        src="https://www.robtopgames.com/Images/contact.png"
      />
    </a>
  </div>
</section>

<section class="mt-3">
  <div class="d-flex justify-content-center gap-4">
    <a href="https://twitter.com/RobTopGames" 
       target="_blank" 
       rel="noopener noreferrer" 
       class="text-white hover-scale transition-all">
      <i class="bi bi-twitter-x fs-4"></i>
    </a>
    <a href="https://instagram.com/robtopgames" 
       target="_blank" 
       rel="noopener noreferrer" 
       class="text-white hover-scale transition-all">
      <i class="bi bi-instagram fs-4"></i>
    </a>
    <a href="https://github.com/ElIvanFX/RobTopGamesWeb" 
       target="_blank" 
       rel="noopener noreferrer" 
       class="text-white hover-scale transition-all">
      <i class="bi bi-github fs-4"></i>
    </a>
  </div>
</section>

{
  pathname !== "/youtube" ? (
    <section>
      <div class="d-flex justify-content-center align-items-center">
        <a class="text-decoration-none text-center footer-text" 
           href="/youtube">
          <>
            <br />
            <span style="color: white;">Video Policy</span>
            <br />
            <br />
          </>
        </a>
      </div>
    </section>
  ) : null
}

​
Conditional Rendering

The Footer component conditionally hides certain sections on the /youtube page: 
{
  pathname !== "/youtube" ? (
    <!-- Content shown on all pages except /youtube -->
  ) : null
}
This pattern is used for:
  • Game icon images
  • Video Policy link
The footer includes three social media links:
PlatformIconLink
Twitter/Xbi-twitter-xhttps://twitter.com/RobTopGames
Instagrambi-instagramhttps://instagram.com/robtopgames
GitHubbi-githubhttps://github.com/ElIvanFX/RobTopGamesWeb

​
Contact Email

The contact section displays a clickable image that opens the user’s email client: 
<a href="mailto:[email protected]">
  <img
    class="hover-scale transition-all"
    src="https://www.robtopgames.com/Images/contact.png"
  />
</a>

​
Styling Features

​
Hover Scale Animation

.hover-scale {
  transform: scale(1);
  transition: transform 0.2s ease-in-out;
}

.hover-scale:hover {
  transform: scale(1.2);
}
This effect is applied to:
  • Social media icons
  • Contact email image

​
Accessibility

All external links include:
  • target="_blank" - Opens in new tab
  • rel="noopener noreferrer" - Security best practice
  • Semantic HTML structure

​
Customization

To modify social media links:
src/components/Footer.astro
<a href="YOUR_SOCIAL_URL" 
   target="_blank" 
   rel="noopener noreferrer" 
   class="text-white hover-scale transition-all">
  <i class="bi bi-YOUR-ICON fs-4"></i>
</a>
  • Header - Site header and navigation
  • Socials - Animated social media icons

Build docs developers (and LLMs) love

Get started for freeTalk to us