Navigation Footer v1.0

<script setup lang="ts">
import type { ESocials } from 'types';

import EIcon from '../e-icon/e-icon.vue';

export type Props = {
  socials?: ESocials;
};
withDefaults(defineProps<Props>(), {
  socials: () => {
    return [
      {
        url: 'https://econnect.eu/',
        icon: 'network',
        name: 'eConnect Website'
      }
    ];
  }
});
</script>

<template>
  <div class="e-navigation-footer">
    <div class="e-socials-container">
      <a
        v-for="(social, key) in socials"
        :key="key"
        class="e-social"
        :href="social.url"
        rel="noopener noreferrer"
        target="_blank"
      >
        <e-icon
          :icon="[social.icon]"
          :title="`eConnect ${social?.name}`"
        />
        <span
          class="e-sr-only"
          v-text="social?.name"
        />
      </a>
    </div>
  </div>
</template>

<style scoped lang="scss">
.e-navigation-footer {
  width: 100%;
  padding-right: 25px;
  margin-top: 20px;

  .e-socials-container {
    width: fit-content;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    gap: 10px;

    .e-social {
      .e-icon {
        width: 100%;
        height: 100%;
        max-width: 24px;
        max-height: 24px;
        margin: 12px;
      }

      &:visited {
        color: var(--e-secondary);
        fill: var(--e-secondary);
      }

      .e-sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        border: 0;
      }
    }
  }
}

@media only screen and (min-width: 1000px) {
  .navigation-footer {
    margin-top: 0;
  }
}
</style>