sbc273_sbc275_sbc276_sbc277_sbc271

frontend/.gitignore

@@ -90,3 +90,7 @@ sw.*
 
 # Vim swap files
 *.swp
+
+.nuxt/
+.output/
+dist

frontend/components/app_footer/NavLink.vue

@@ -0,0 +1,24 @@
+<template>
+<li
+    :class="{
+      'inline-block mr-1 lg:pr-2 xl:mr-2': true,
+      'lg:border-r border-solid border-bcdsGray80': true
+    }"
+>
+<nuxt-link
+      :to="route"
+      class="px-md py-xs text-black font-bold hover:underline"
+      :target="target"
+>
+      {{ text }}
+</nuxt-link>
+</li>
+</template>
+<script setup lang="ts">
+defineProps<{
+  text: string,
+  route: string,
+  target: string,
+  isLast: boolean
+}>()
+</script>

frontend/components/app_footer/index.vue

@@ -0,0 +1,33 @@
+<template>
+<footer
+    id="app-footer"
+    class="grid grid-cols-10 items-center flex min-h-[3.5rem] text-[0.94rem] px-sm xl:px-lg bg-white border-t-2 border-bcdsGray mx-[15rem]"
+>
+<nav class="col-span-7 flex justify-between justify-content-end">
+<ul class="p-0 list-none">
+<AppFooterNavLink
+          v-for="(link, index) in links"
+          :key="index"
+          :text="link.text"
+          :route="link.route"
+          :target="link.target || '_blank'"
+          :isLast="index === links.length - 1"
+        />
+</ul>
+</nav>
+<aside class="col-span-3 flex justify-self-end justify-content-end">
+<span class="text-bcdsGray-50">v3.0.0 df0ab7
+<span class="p-sm m-huge rounded-md bg-surface-tertiary text-bcdsGray-80 border-bcdsGray-80 border shadow-xs">Dev</span></span>
+</aside>
+
+</footer>
+</template>
+<script setup lang="ts">
+const links = [
+  { text: 'About', route: '/' },
+  { text: 'Disclaimer', route: 'https://www2.gov.bc.ca/gov/content/home/disclaimer' },
+  { text: 'Privacy', route: 'https://www2.gov.bc.ca/gov/content/home/privacy' },
+  { text: 'Accessibility', route: 'https://www2.gov.bc.ca/gov/content/home/accessibility' },
+  { text: 'Copyright', route: 'https://www2.gov.bc.ca/gov/content/home/copyright' }
+]
+</script>

frontend/components/app_header/NavLink.vue

@@ -0,0 +1,24 @@
+<template>
+<li
+    :class="{
+      'inline-block mr-1 lg:pr-2 xl:mr-2': true,
+      'lg:border-r border-solid border-bcdsGray80': true
+    }"
+>
+<nuxt-link
+      :to="route"
+      class="px-md py-xs text-black font-bold hover:underline"
+      :target="target"
+>
+      {{ text }}
+</nuxt-link>
+</li>
+</template>
+<script setup lang="ts">
+defineProps<{
+  text: string,
+  route: string,
+  target: string,
+  isLast: boolean
+}>()
+</script>

frontend/components/app_header/index.vue

@@ -0,0 +1,20 @@
+<template>
+  <nav
+    id="app-header"
+    class="sticky top-0 z-50 h-16  border-gray-300 bg-white mx-[15rem] "
+  >
+  <div class="flex h-full w-full items-center justify-between">
+      <div class="hidden h-full lg:block">
+          <img
+            src="/images/top-nav.png"
+            class="min-w-8 h-full"
+            alt="Queue Management"
+          />
+      </div>  
+      <Button />
+      </div>
+  </nav>
+</template>
+
+<script setup lang="ts">
+</script>

frontend/components/button.vue

@@ -0,0 +1,17 @@
+<template>
+<button
+   @click="onClick"
+   class="p-sm m-huge  rounded-md bg-surface-primary text-white border-bcdsBlue border shadow-xs"
+>
+<span class="mr-2 max-w-28">Login</span>
+</button>
+</template>
+<script>
+export default {
+ methods: {
+   onClick() {
+     console.log('Button clicked!');
+   },
+ },
+};
+</script>

frontend/components/dropdown.vue

@@ -0,0 +1,77 @@
+<template>
+<div class="flex items-center space-x-2">
+  <div class="relative inline-block text-left">
+    <button
+      @click="toggleDropdown"
+      class="p-sm m-xs inline-flex justify-center w-full px-hair py-xs rounded-md border border-gray-300 shadow-sm bg-white text-md text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary mr-2"
+      :aria-expanded="isOpen.toString()"
+    >
+      <font-awesome-icon icon="bars" style="font-size: 1.18rem" />
+    </button>
+
+    <div v-if="isOpen" class="absolute right-0 z-10 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
+      <div class="py-1" role="menu" aria-orientation="vertical" aria-labelledby="dropdown-button">
+        <template v-for="(item, index) in items" :key="index">
+          <div v-if="item.condition === undefined || item.condition">
+            <button
+              v-if="item.action"
+              @click.prevent="item.action"
+              class="block px-md py-sm text-gray-700 hover:bg-gray-100 text-left w-full"
+              role="menuitem"
+            >
+              <font-awesome-icon
+                v-if="item.icon"
+                :icon="item.icon"
+                class="mr-2"
+              />
+              {{ item.text }}
+            </button>
+            <router-link
+              v-else-if="item.to"
+              :to="item.to"
+              class="block px-md py-sm text-gray-700 hover:bg-gray-100 text-left w-full"
+              role="menuitem"
+            >
+              <font-awesome-icon
+                v-if="item.icon"
+                :icon="item.icon"
+                class="mr-2"
+              />
+              {{ item.text }}
+            </router-link>
+          </div>
+          <div v-if="item.divider" class="border-t border-gray-200"></div>
+        </template>
+      </div>
+    </div>
+  </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, defineProps, watch } from 'vue';
+
+const props = defineProps({
+  showDropdown: {
+    type: Boolean,
+    required: true
+  },
+  items: {
+    type: Array,
+    required: true
+  }
+});
+
+const isOpen = ref(false);
+
+watch(() => props.showDropdown, (newVal) => {
+  isOpen.value = newVal;
+});
+
+const toggleDropdown = () => {
+  isOpen.value = !isOpen.value;
+};
+</script>
+
+<style scoped>
+</style>