Skip to content

Commit 213b7c4

Browse files
mjsorribaswoothu
mjsorribas
authored and
woothu
committed
refactor: Separate header and footer from default container file (coreui#170)
-Add new DefaultFooter file -Add new DefaultHeader file - Update DefaultCoontainer with the new header and footer components
1 parent aafa8c8 commit 213b7c4

File tree

3 files changed

+74
-45
lines changed

3 files changed

+74
-45
lines changed

‎src/containers/DefaultContainer.vue

Lines changed: 8 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,6 @@
11
<template>
22
<div class="app">
3-
<AppHeader fixed>
4-
<SidebarToggler class="d-lg-none" display="md" mobile />
5-
<b-link class="navbar-brand" to="#">
6-
<img class="navbar-brand-full" src="img/brand/logo.svg" width="89" height="25" alt="CoreUI Logo">
7-
<img class="navbar-brand-minimized" src="img/brand/sygnet.svg" width="30" height="30" alt="CoreUI Logo">
8-
</b-link>
9-
<SidebarToggler class="d-md-down-none" display="lg" :defaultOpen=true />
10-
<b-navbar-nav class="d-md-down-none">
11-
<b-nav-item class="px-3" to="/dashboard">Dashboard</b-nav-item>
12-
<b-nav-item class="px-3" to="/users" exact>Users</b-nav-item>
13-
<b-nav-item class="px-3">Settings</b-nav-item>
14-
</b-navbar-nav>
15-
<b-navbar-nav class="ml-auto">
16-
<b-nav-item class="d-md-down-none">
17-
<i class="icon-bell"></i>
18-
<b-badge pill variant="danger">5</b-badge>
19-
</b-nav-item>
20-
<b-nav-item class="d-md-down-none">
21-
<i class="icon-list"></i>
22-
</b-nav-item>
23-
<b-nav-item class="d-md-down-none">
24-
<i class="icon-___location-pin"></i>
25-
</b-nav-item>
26-
<DefaultHeaderDropdownAccnt/>
27-
</b-navbar-nav>
28-
<AsideToggler class="d-none d-lg-block" />
29-
<!--<AsideToggler class="d-lg-none" mobile />-->
30-
</AppHeader>
3+
<DefaultHeader/>
314
<div class="app-body">
325
<AppSidebar fixed>
336
<SidebarHeader/>
@@ -47,43 +20,33 @@
4720
<DefaultAside/>
4821
</AppAside>
4922
</div>
50-
<TheFooter>
51-
<!--footer-->
52-
<div>
53-
<a href="https://coreui.io">CoreUI</a>
54-
<span class="ml-1">&copy; 2018 creativeLabs.</span>
55-
</div>
56-
<div class="ml-auto">
57-
<span class="mr-1">Powered by</span>
58-
<a href="https://coreui.io">CoreUI for Vue</a>
59-
</div>
60-
</TheFooter>
23+
<DefaultFooter/>
6124
</div>
6225
</template>
6326

6427
<script>
6528
import nav from '@/_nav'
66-
import { Header as AppHeader, SidebarToggler, Sidebar as AppSidebar, SidebarFooter, SidebarForm, SidebarHeader, SidebarMinimizer, SidebarNav, Aside as AppAside, AsideToggler, Footer as TheFooter, Breadcrumb } from '@coreui/vue'
29+
import { Sidebar as AppSidebar, SidebarFooter, SidebarForm, SidebarHeader, SidebarMinimizer, SidebarNav, Aside as AppAside, Breadcrumb } from '@coreui/vue'
6730
import DefaultAside from './DefaultAside'
6831
import DefaultHeaderDropdownAccnt from './DefaultHeaderDropdownAccnt'
32+
import DefaultHeader from './DefaultHeader'
33+
import DefaultFooter from './DefaultFooter'
6934
7035
export default {
7136
name: 'DefaultContainer',
7237
components: {
73-
AsideToggler,
74-
AppHeader,
7538
AppSidebar,
7639
AppAside,
77-
TheFooter,
7840
Breadcrumb,
7941
DefaultAside,
8042
DefaultHeaderDropdownAccnt,
8143
SidebarForm,
8244
SidebarFooter,
83-
SidebarToggler,
8445
SidebarHeader,
8546
SidebarNav,
86-
SidebarMinimizer
47+
SidebarMinimizer,
48+
DefaultFooter,
49+
DefaultHeader
8750
},
8851
data () {
8952
return {

‎src/containers/DefaultFooter.vue

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<template>
2+
<TheFooter>
3+
<div>
4+
<!--footer-->
5+
<a href="https://coreui.io">CoreUI</a>
6+
<span class="ml-1">&copy; 2018 creativeLabs.</span>
7+
</div>
8+
<div class="ml-auto">
9+
<span class="mr-1">Powered by</span>
10+
<a href="https://coreui.io">CoreUI for Vue</a>
11+
</div>
12+
</TheFooter>
13+
</template>
14+
<script>
15+
import { Footer as TheFooter } from '@coreui/vue'
16+
export default {
17+
name: 'DefaultFooter',
18+
components: {
19+
TheFooter
20+
},
21+
}
22+
</script>

‎src/containers/DefaultHeader.vue

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<template>
2+
<AppHeader fixed>
3+
<SidebarToggler class="d-lg-none" display="md" mobile />
4+
<b-link class="navbar-brand" to="#">
5+
<img class="navbar-brand-full" src="img/brand/logo.svg" width="89" height="25" alt="CoreUI Logo">
6+
<img class="navbar-brand-minimized" src="img/brand/sygnet.svg" width="30" height="30" alt="CoreUI Logo">
7+
</b-link>
8+
<SidebarToggler class="d-md-down-none" display="lg" :defaultOpen=true />
9+
<b-navbar-nav class="d-md-down-none">
10+
<b-nav-item class="px-3" to="/dashboard">Dashboard</b-nav-item>
11+
<b-nav-item class="px-3" to="/users" exact>Users</b-nav-item>
12+
<b-nav-item class="px-3">Settings</b-nav-item>
13+
</b-navbar-nav>
14+
<b-navbar-nav class="ml-auto">
15+
<b-nav-item class="d-md-down-none">
16+
<i class="icon-bell"></i>
17+
<b-badge pill variant="danger">5</b-badge>
18+
</b-nav-item>
19+
<b-nav-item class="d-md-down-none">
20+
<i class="icon-list"></i>
21+
</b-nav-item>
22+
<b-nav-item class="d-md-down-none">
23+
<i class="icon-___location-pin"></i>
24+
</b-nav-item>
25+
<DefaultHeaderDropdownAccnt/>
26+
</b-navbar-nav>
27+
<AsideToggler class="d-none d-lg-block" />
28+
<!--<AsideToggler class="d-lg-none" mobile />-->
29+
</AppHeader>
30+
</template>
31+
<script>
32+
import { Header as AppHeader, SidebarToggler, AsideToggler } from '@coreui/vue'
33+
import DefaultHeaderDropdownAccnt from './DefaultHeaderDropdownAccnt'
34+
35+
export default {
36+
name: 'DefaultHeader',
37+
components: {
38+
AsideToggler,
39+
AppHeader,
40+
DefaultHeaderDropdownAccnt,
41+
SidebarToggler
42+
}
43+
}
44+
</script>

0 commit comments

Comments
 (0)