feat(web): default layout

modernweb-pl · Feb 4, 2020 · 3e6d3db · 3e6d3db
1 parent 7cab6d3
commit 3e6d3db
Show file tree

Hide file tree

Showing 14 changed files with 94 additions and 48 deletions.
diff --git a/apps/web/public/index.html b/apps/web/public/index.html
@@ -9,10 +9,10 @@
  </head>
  <body>
  <noscript>
- <strong
- >We're sorry but web doesn't work properly without JavaScript enabled. Please enable it to
- continue.</strong
- >
+ <strong>
+ We're sorry but this website doesn't work properly without JavaScript enabled. Please enable
+ it to continue.
+ </strong>
  </noscript>
  <div id="app"></div>
  <!-- built files will be auto injected -->

diff --git a/apps/web/src/App.vue b/apps/web/src/App.vue
diff --git a/apps/web/src/app.vue b/apps/web/src/app.vue
@@ -0,0 +1,14 @@
+<template>
+ <router-view />
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import './layout';
+
+export default Vue.extend({});
+</script>
+
+<style lang="scss">
+@import 'styles/index';
+</style>
diff --git a/apps/web/src/layout/default.vue b/apps/web/src/layout/default.vue
@@ -0,0 +1,8 @@
+<template>
+ <div class="layout layout-default">
+ <app-header />
+ <main class="container">
+ <slot />
+ </main>
+ </div>
+</template>
diff --git a/apps/web/src/layout/header.vue b/apps/web/src/layout/header.vue
@@ -0,0 +1,39 @@
+<template>
+ <b-navbar toggleable="lg" type="dark" variant="dark">
+ <b-navbar-brand to="/">@app/web</b-navbar-brand>
+
+ <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
+
+ <b-collapse id="nav-collapse" is-nav>
+ <b-navbar-nav>
+ <b-nav-item to="/">Home</b-nav-item>
+ <b-nav-item to="/about">About</b-nav-item>
+ <b-nav-item href="#" disabled>Disabled</b-nav-item>
+ </b-navbar-nav>
+
+ <!-- Right aligned nav items -->
+ <b-navbar-nav class="ml-auto">
+ <b-nav-form>
+ <b-form-input size="sm" class="mr-sm-2" placeholder="Search"></b-form-input>
+ <b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
+ </b-nav-form>
+
+ <b-nav-item-dropdown text="Lang" right>
+ <b-dropdown-item href="#">EN</b-dropdown-item>
+ <b-dropdown-item href="#">ES</b-dropdown-item>
+ <b-dropdown-item href="#">RU</b-dropdown-item>
+ <b-dropdown-item href="#">FA</b-dropdown-item>
+ </b-nav-item-dropdown>
+
+ <b-nav-item-dropdown right>
+ <!-- Using 'button-content' slot -->
+ <template v-slot:button-content>
+ <em>User</em>
+ </template>
+ <b-dropdown-item href="#">Profile</b-dropdown-item>
+ <b-dropdown-item href="#">Sign Out</b-dropdown-item>
+ </b-nav-item-dropdown>
+ </b-navbar-nav>
+ </b-collapse>
+ </b-navbar>
+</template>
diff --git a/apps/web/src/layout/index.ts b/apps/web/src/layout/index.ts
@@ -0,0 +1,6 @@
+import Vue from 'vue';
+import LayoutDefault from './default.vue';
+import AppHeader from './header.vue';
+
+Vue.component('layout-default', LayoutDefault);
+Vue.component('app-header', AppHeader);
diff --git a/apps/web/src/main.ts b/apps/web/src/main.ts
@@ -1,12 +1,14 @@
+import BootstrapVue from 'bootstrap-vue';
 import Vue from 'vue';
-import App from './App.vue';
+import App from './app.vue';
 import './registerServiceWorker';
 import router from './router';
 import store from './store';
-import './styles/index.scss';
 
 Vue.config.productionTip = false;
 
+Vue.use(BootstrapVue);
+
 new Vue({
  router,
  store,

diff --git a/apps/web/src/router/index.ts b/apps/web/src/router/index.ts
@@ -1,6 +1,6 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
-import Home from '../views/Home.vue';
+import Home from '../views/home.vue';
 
 Vue.use(VueRouter);
 
@@ -16,7 +16,7 @@ const routes = [
  // route level code-splitting
  // this generates a separate chunk (about.[hash].js) for this route
  // which is lazy-loaded when the route is visited.
- component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
+ component: () => import(/* webpackChunkName: "about" */ '../views/about.vue'),
  },
 ];
 

diff --git a/apps/web/src/styles/_app.scss b/apps/web/src/styles/_app.scss
@@ -0,0 +1 @@
+@import 'app/layout';
diff --git a/apps/web/src/styles/app/_layout.scss b/apps/web/src/styles/app/_layout.scss
@@ -0,0 +1,5 @@
+html,
+body,
+.layout {
+ height: 100%;
+}
diff --git a/apps/web/src/styles/index.scss b/apps/web/src/styles/index.scss
@@ -1,2 +1,3 @@
 @import 'variables';
 @import 'vendors';
+@import 'app';
diff --git a/apps/web/src/views/About.vue b/apps/web/src/views/About.vue
diff --git a/apps/web/src/views/about.vue b/apps/web/src/views/about.vue
@@ -0,0 +1,7 @@
+<template>
+ <layout-default>
+ <div class="about">
+ <h1>This is an about page</h1>
+ </div>
+ </layout-default>
+</template>
diff --git a/apps/web/src/views/Home.vue → apps/web/src/views/home.vue b/apps/web/src/views/Home.vue → apps/web/src/views/home.vue
@@ -1,11 +1,11 @@
 <template>
- <div class="home">
+ <layout-default class="text-center">
  <img alt="Vue logo" src="../assets/logo.png" />
  <HelloWorld msg="Welcome to Your Vue.js App" />
- </div>
+ </layout-default>
 </template>
 
-<script>
+<script lang="ts">
 // @ is an alias to /src
 import HelloWorld from '@/components/HelloWorld.vue';