Added real frontend

Made hostname global and easy to change in docker

cmd/frontend/src/components/layout/TheHeader.vue

@@ -0,0 +1,139 @@
+<template>
+   <nav>
+      <p class="title">Music Player Randomizer</p>
+      <div class="navMenuWrapper">
+         <button class="settingsButton" @click="showSettingsModal">
+            Settings
+         </button>
+         <button class="statisticsButton" @click="showStatisticsModal">
+            Statistics
+         </button>
+         <button class="aboutButton" @click="showAboutModal">About</button>
+      </div>
+      <p v-if="!$parent.displayWhenDesktop" class="mobileMenuButton" @click="showMobileMenu">
+         Menu
+      </p>
+      <settingsModal ref="settingsModal"></settingsModal>
+      <statisticsModal ref="statisticsModal"></statisticsModal>
+      <aboutModal ref="aboutModal"></aboutModal>
+      <mobileMenu
+         ref="mobileMenu"
+         @start-sound-test="startSoundTest"
+         @show-settings-modal="showSettingsModal"
+         @show-statistics-modal="showStatisticsModal"
+         @show-about-modal="showAboutModal"
+      ></mobileMenu>
+   </nav>
+</template>
+
+<script>
+import aboutModal from "../items/aboutModal.vue";
+import statisticsModal from "../items/statisticsModal.vue";
+import settingsModal from "../items/settingsModal.vue";
+import mobileMenu from "../items/mobileMenu.vue";
+
+export default {
+   components: {
+      aboutModal,
+      settingsModal,
+      statisticsModal,
+      mobileMenu,
+   },
+   methods: {
+      playSelectedTrack(track) {
+         this.$refs.theFooter.playSpecificTrack(track);
+      },
+      scrollToBottomPlaylistHistory() {
+         this.$refs.playlistHistory.scrollToBottom();
+      },
+      showAboutModal() {
+         this.$refs.aboutModal.openModal();
+      },
+      showSettingsModal() {
+         this.$refs.settingsModal.openModal();
+      },
+      showStatisticsModal() {
+         this.$refs.statisticsModal.openModal();
+      },
+      showMobileMenu() {
+         this.$refs.mobileMenu.openMobileMenu();
+         this.showMobileMenuContent();
+      },
+      showMobileMenuContent() {
+         setTimeout(() => {
+            this.$refs.mobileMenu.openMobileMenuContent();
+         }, 20);
+      },
+      startSoundTest() {
+         this.$emit("start-sound-test");
+      },
+   },
+};
+</script>
+
+<style scoped>
+nav {
+   background: #333;
+   display: flex;
+   align-content: center;
+   align-items: center;
+   width: 100%;
+   height: 5vh;
+}
+
+.title {
+   color: #fff;
+   font-size: 2rem;
+   margin-left: 2vw;
+   font-style: normal;
+}
+
+.navMenuWrapper {
+   margin-left: auto;
+   height: 5vh;
+}
+
+.navMenuWrapper button {
+   background: #333;
+   color: #ff9c00;
+   font-size: 1.3rem;
+   outline: none;
+   cursor: pointer;
+   border: none;
+   border-radius: 3px;
+   height: 100%;
+   padding: 0 20px;
+}
+
+.navMenuWrapper button:hover {
+   background-color: #555;
+}
+
+/* Mobile */
+@media only screen and (max-width: 1000px) {
+   nav {
+      justify-content: center;
+      height: 10vw;
+   }
+   .title {
+      font-size: 1.2rem;
+      margin: 0;
+      padding: 0;
+      width: 100%;
+      margin-left: 5px;
+      /* text-align: ; */
+   }
+
+   .navMenuWrapper {
+      display: none;
+   }
+
+   .mobileMenuButton {
+      color: white;
+      background: grey;
+      padding: 6px;
+      border-top-left-radius: 7px;
+      border-bottom-left-radius: 7px;
+   }
+}
+</style>