Skip to content

Separate header and footer from default container file #170

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Sep 23, 2019
Merged

Separate header and footer from default container file #170

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
16f0998
Add new DefaultFooter file
mjsorribas Sep 20, 2019
f43a844
Add new DefaultHeader file
mjsorribas Sep 20, 2019
82385f3
Update DefaultCoontainer with the new header and footer components
mjsorribas Sep 20, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 8 additions & 45 deletions src/containers/DefaultContainer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,6 @@
<template>
<div class="app">
<AppHeader fixed>
<SidebarToggler class="d-lg-none" display="md" mobile />
<b-link class="navbar-brand" to="#">
<img class="navbar-brand-full" src="img/brand/logo.svg" width="89" height="25" alt="CoreUI Logo">
<img class="navbar-brand-minimized" src="img/brand/sygnet.svg" width="30" height="30" alt="CoreUI Logo">
</b-link>
<SidebarToggler class="d-md-down-none" display="lg" :defaultOpen=true />
<b-navbar-nav class="d-md-down-none">
<b-nav-item class="px-3" to="/dashboard">Dashboard</b-nav-item>
<b-nav-item class="px-3" to="/users" exact>Users</b-nav-item>
<b-nav-item class="px-3">Settings</b-nav-item>
</b-navbar-nav>
<b-navbar-nav class="ml-auto">
<b-nav-item class="d-md-down-none">
<i class="icon-bell"></i>
<b-badge pill variant="danger">5</b-badge>
</b-nav-item>
<b-nav-item class="d-md-down-none">
<i class="icon-list"></i>
</b-nav-item>
<b-nav-item class="d-md-down-none">
<i class="icon-location-pin"></i>
</b-nav-item>
<DefaultHeaderDropdownAccnt/>
</b-navbar-nav>
<AsideToggler class="d-none d-lg-block" />
<!--<AsideToggler class="d-lg-none" mobile />-->
</AppHeader>
<DefaultHeader/>
<div class="app-body">
<AppSidebar fixed>
<SidebarHeader/>
Expand All @@ -47,43 +20,33 @@
<DefaultAside/>
</AppAside>
</div>
<TheFooter>
<!--footer-->
<div>
<a href="https://coreui.io">CoreUI</a>
<span class="ml-1">&copy; 2018 creativeLabs.</span>
</div>
<div class="ml-auto">
<span class="mr-1">Powered by</span>
<a href="https://coreui.io">CoreUI for Vue</a>
</div>
</TheFooter>
<DefaultFooter/>
</div>
</template>

<script>
import nav from '@/_nav'
import { Header as AppHeader, SidebarToggler, Sidebar as AppSidebar, SidebarFooter, SidebarForm, SidebarHeader, SidebarMinimizer, SidebarNav, Aside as AppAside, AsideToggler, Footer as TheFooter, Breadcrumb } from '@coreui/vue'
import { Sidebar as AppSidebar, SidebarFooter, SidebarForm, SidebarHeader, SidebarMinimizer, SidebarNav, Aside as AppAside, Breadcrumb } from '@coreui/vue'
import DefaultAside from './DefaultAside'
import DefaultHeaderDropdownAccnt from './DefaultHeaderDropdownAccnt'
import DefaultHeader from './DefaultHeader'
import DefaultFooter from './DefaultFooter'

export default {
name: 'DefaultContainer',
components: {
AsideToggler,
AppHeader,
AppSidebar,
AppAside,
TheFooter,
Breadcrumb,
DefaultAside,
DefaultHeaderDropdownAccnt,
SidebarForm,
SidebarFooter,
SidebarToggler,
SidebarHeader,
SidebarNav,
SidebarMinimizer
SidebarMinimizer,
DefaultFooter,
DefaultHeader
},
data () {
return {
Expand Down
22 changes: 22 additions & 0 deletions src/containers/DefaultFooter.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<template>
<TheFooter>
<div>
<!--footer-->
<a href="https://coreui.io">CoreUI</a>
<span class="ml-1">&copy; 2018 creativeLabs.</span>
</div>
<div class="ml-auto">
<span class="mr-1">Powered by</span>
<a href="https://coreui.io">CoreUI for Vue</a>
</div>
</TheFooter>
</template>
<script>
import { Footer as TheFooter } from '@coreui/vue'
export default {
name: 'DefaultFooter',
components: {
TheFooter
},
}
</script>
44 changes: 44 additions & 0 deletions src/containers/DefaultHeader.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
<template>
<AppHeader fixed>
<SidebarToggler class="d-lg-none" display="md" mobile />
<b-link class="navbar-brand" to="#">
<img class="navbar-brand-full" src="img/brand/logo.svg" width="89" height="25" alt="CoreUI Logo">
<img class="navbar-brand-minimized" src="img/brand/sygnet.svg" width="30" height="30" alt="CoreUI Logo">
</b-link>
<SidebarToggler class="d-md-down-none" display="lg" :defaultOpen=true />
<b-navbar-nav class="d-md-down-none">
<b-nav-item class="px-3" to="/dashboard">Dashboard</b-nav-item>
<b-nav-item class="px-3" to="/users" exact>Users</b-nav-item>
<b-nav-item class="px-3">Settings</b-nav-item>
</b-navbar-nav>
<b-navbar-nav class="ml-auto">
<b-nav-item class="d-md-down-none">
<i class="icon-bell"></i>
<b-badge pill variant="danger">5</b-badge>
</b-nav-item>
<b-nav-item class="d-md-down-none">
<i class="icon-list"></i>
</b-nav-item>
<b-nav-item class="d-md-down-none">
<i class="icon-location-pin"></i>
</b-nav-item>
<DefaultHeaderDropdownAccnt/>
</b-navbar-nav>
<AsideToggler class="d-none d-lg-block" />
<!--<AsideToggler class="d-lg-none" mobile />-->
</AppHeader>
</template>
<script>
import { Header as AppHeader, SidebarToggler, AsideToggler } from '@coreui/vue'
import DefaultHeaderDropdownAccnt from './DefaultHeaderDropdownAccnt'

export default {
name: 'DefaultHeader',
components: {
AsideToggler,
AppHeader,
DefaultHeaderDropdownAccnt,
SidebarToggler
}
}
</script>