chore: initial commits for static template

Author: kabaluyot

.env.example

@@ -1,7 +1,11 @@
-APP_NAME='Daks.ts'
-APP_DESCRIPTION='By kabaluyot'
-APP_HOST=localhost
-APP_PORT=3000
-APP_URL=http://localhost:3000
+APP_NAME=Rizal Memorial Colleges, School of Law
+APP_DESCRIPTION=Excellence, service and justice. For God and country.
+APP_HOST=localhost 
+APP_PORT=3005
+
+APP_URL = http://localhost:3005
+#APP_URL = https://lms-webapp-f5e33.web.app
+
+STAGING_API_URL = https://jsonplaceholder.typicode.com
+PRODUCTION_API_URL = https://jsonplaceholder.typicode.com
 
-API_URL=https://jsonplaceholder.typicode.com

assets/css/global.css

@@ -0,0 +1,11 @@
+#app,
+#app div,
+#app a,
+#app span,
+#app table,
+#app thead,
+#app tbody,
+#app tr,
+#app td {
+  font-family: 'Poppins', sans-serif !important;
+}

components/Logo.vue

@@ -0,0 +1,15 @@
+<template>
+  <v-footer app>
+    <span class="mx-auto">&copy; {{ new Date().getFullYear() }}</span>
+  </v-footer>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'nuxt-property-decorator'
+
+@Component
+export default class Footer extends Vue {
+  // declare vaiable
+  fixed: boolean = false
+}
+</script>

components/VuetifyLogo.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="header__container">
+    <v-app-bar app height="80" class="px-12" flat color="white">
+      <v-btn
+        v-for="page in pages"
+        :key="page.icon"
+        :to="page.link"
+        x-large
+        text
+        :color="activePage == page.name ? 'primary' : 'accent'"
+        class="font-weight-bold text-capitalize hidden-sm-and-down"
+        @click="onPageClick(page)"
+        >{{ page.title }}</v-btn
+      >
+
+      <v-menu offset-y min-width="100vw">
+        <template v-slot:activator="{ on, attrs }">
+          <v-btn
+            color="primary"
+            x-large
+            v-bind="attrs"
+            text
+            class="hidden-md-and-up"
+            v-on="on"
+          >
+            <v-icon large>mdi-menu</v-icon>
+          </v-btn>
+        </template>
+        <v-list color="white" flat nav tile elevation="0">
+          <v-list-item
+            v-for="(page, key) in pages"
+            :key="key"
+            :to="page.to"
+            class="font-weight-bold"
+          >
+            <v-list-item-title
+              class="ml-3 my-3"
+              :class="[
+                { 'primary--text': activePage == page.name },
+                { 'accent--text': activePage != page.name }
+              ]"
+              >{{ page.title }}</v-list-item-title
+            >
+          </v-list-item>
+        </v-list>
+      </v-menu>
+
+      <v-spacer></v-spacer>
+      <v-btn color="primary" large class="font-weight-bold">
+        Login
+      </v-btn>
+    </v-app-bar>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'nuxt-property-decorator'
+
+interface Item {
+  name: string
+  title: string
+  to: string
+}
+
+interface Route {
+  name: string
+}
+
+@Component
+export default class Header extends Vue {
+  //  * Data
+  pages: Item[] = [
+    {
+      name: 'index',
+      title: 'Home',
+      to: '/'
+    },
+    {
+      name: 'subject',
+      title: 'Subject',
+      to: '/subject'
+    },
+    {
+      name: 'faculty',
+      title: 'Faculty',
+      to: '/faculty'
+    },
+    {
+      name: 'about',
+      title: 'About',
+      to: '/about'
+    }
+  ]
+
+  // * * Computed
+  /**
+   * return currect active page
+   */
+  get activePage(): string {
+    if (this.$route.name === undefined || this.$route.name === null) {
+      return ''
+    }
+    return this.$route.name
+  }
+
+  // * * Methods
+  /**
+   * return to selected page/route
+   * @param Item     page item object
+   */
+  onPageClick(item: Item): void {
+    this.$router.push({ name: item.name })
+  }
+}
+</script>
+
+<style scoped>
+.header__container {
+  height: 80px;
+}
+</style>

components/footer/Footer.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="banner__container d-flex justify-content"></div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'nuxt-property-decorator'
+
+@Component
+export default class Banner extends Vue {}
+</script>
+
+<style scoped>
+.banner__container {
+  height: calc(100vh - 80px);
+}
+</style>

components/header/Header.vue

@@ -1,4 +1,5 @@
-import Logo from './Logo.vue'
-import VuetifyLogo from './VuetifyLogo.vue'
+import Header from './header/Header.vue'
+import Footer from './footer/Footer.vue'
+import Banner from './home/Banner.vue'
 
-export { Logo, VuetifyLogo }
+export { Header, Footer, Banner }