Skip to content

Commit a63a3dc

Browse files
lcharettelcharette
committed
Mobile navigation
1 parent a57f7b4 commit a63a3dc

7 files changed

Lines changed: 116 additions & 48 deletions

File tree

‎CHANGELOG.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
1010
1111
## [6.0.0-beta.7](https://github.com/userfrosting/UserFrosting/compare/6.0.0-beta.6...6.0.0-beta.7)
1212
- [Docker] Update tp PHP 8.4
13+
- Add mobile navigation
14+
- Restructure Navbar/Sidebar/Footer Content files
1315

1416
## [6.0.0-beta.6](https://github.com/userfrosting/UserFrosting/compare/6.0.0-beta.5...6.0.0-beta.6)
1517
- Remove Limax from optimizeDeps

‎app/assets/components/FooterContent.vue‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
11
<template>
2-
<UFFooterContent>
3-
<div>{{ $t('COPYRIGHT', { year: new Date().getFullYear() }) }}</div>
4-
</UFFooterContent>
2+
<div>{{ $t('COPYRIGHT', { year: new Date().getFullYear() }) }}</div>
53
</template>

‎app/assets/components/NavBar.vue‎

Lines changed: 0 additions & 36 deletions
This file was deleted.

‎app/assets/components/NavBarContent.vue‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<script setup lang="ts">
2+
import { useLogoutApi } from '@userfrosting/sprinkle-account/composables'
3+
import { useAuthStore } from '@userfrosting/sprinkle-account/stores'
4+
import { useConfigStore } from '@userfrosting/sprinkle-core/stores'
5+
const config = useConfigStore()
6+
7+
// Auth and Logout API variables
8+
const auth = useAuthStore()
9+
const { submitLogout } = useLogoutApi()
10+
</script>
11+
12+
<template>
13+
<UFNavBarItem :to="{ name: 'about' }" :label="$t('ABOUT')" />
14+
<UFNavBarItem
15+
:to="{ name: 'account.register' }"
16+
:label="$t('REGISTER')"
17+
v-if="!auth.isAuthenticated && config.get('site.registration.enabled')" />
18+
<UFNavBarLogin v-if="!auth.isAuthenticated" />
19+
<UFNavBarUserCard
20+
v-if="auth.isAuthenticated"
21+
:username="auth.user?.full_name"
22+
:avatar="auth.user?.avatar"
23+
:meta="auth.user?.user_name">
24+
<UFNavBarUserCardButton
25+
:label="$t('ADMIN_PANEL')"
26+
v-if="$checkAccess('uri_dashboard')"
27+
:to="{ name: 'admin.dashboard' }" />
28+
<UFNavBarUserCardButton
29+
:label="$t('ACCOUNT.SETTINGS')"
30+
v-if="$checkAccess('update_account_settings')"
31+
:to="{ name: 'account.settings' }" />
32+
<UFNavBarUserCardButton :label="$t('LOGOUT')" @click="submitLogout()" />
33+
</UFNavBarUserCard>
34+
</template>

‎app/assets/components/SideBarContent.vue‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<script setup lang="ts">
2+
import { UFAdminSidebarMenuItems } from '@userfrosting/sprinkle-admin/components'
3+
import { useLogoutApi } from '@userfrosting/sprinkle-account/composables'
4+
import { useAuthStore } from '@userfrosting/sprinkle-account/stores'
5+
import { useConfigStore } from '@userfrosting/sprinkle-core/stores'
6+
const config = useConfigStore()
7+
8+
// Auth and Logout API variables
9+
const auth = useAuthStore()
10+
const { submitLogout } = useLogoutApi()
11+
</script>
12+
13+
<template>
14+
<!-- User card, visible only on mobile -->
15+
<UFSideBarUserCard
16+
class="uk-hidden@m"
17+
v-if="auth.isAuthenticated"
18+
:username="auth.user?.full_name"
19+
:avatar="auth.user?.avatar"
20+
:meta="auth.user?.user_name" />
21+
22+
<!-- Navbar element repeated for mobile -->
23+
<UFSideBarItem class="uk-hidden@m" :to="{ name: 'about' }" :label="$t('ABOUT')" />
24+
<UFSideBarItem
25+
class="uk-hidden@m"
26+
:to="{ name: 'account.register' }"
27+
:label="$t('REGISTER')"
28+
v-if="!auth.isAuthenticated && config.get('site.registration.enabled')" />
29+
<UFSideBarItem
30+
class="uk-hidden@m"
31+
:to="{ name: 'account.login' }"
32+
:label="$t('LOGIN')"
33+
v-if="!auth.isAuthenticated" />
34+
<UFSideBarItem
35+
class="uk-hidden@m"
36+
:label="$t('ACCOUNT.SETTINGS')"
37+
v-if="$checkAccess('update_account_settings')"
38+
:to="{ name: 'account.settings' }" />
39+
<UFSideBarItem
40+
class="uk-hidden@m"
41+
:label="$t('LOGOUT')"
42+
@click="submitLogout()"
43+
v-if="auth.isAuthenticated" />
44+
45+
<!-- Admin Panel Section, always visible -->
46+
<UFSideBarLabel :label="$t('ADMIN_PANEL')" v-if="$checkAccess('uri_dashboard')" />
47+
<UFAdminSidebarMenuItems />
48+
</template>

‎app/assets/layouts/LayoutDashboard.vue‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,26 @@
11
<script setup lang="ts">
2-
import NavBar from '../components/NavBar.vue'
2+
import NavBarContent from '../components/NavBarContent.vue'
3+
import SideBarContent from '../components/SideBarContent.vue'
34
import FooterContent from '../components/FooterContent.vue'
4-
import { UFAdminSidebarMenuItems } from '@userfrosting/sprinkle-admin/components'
5+
import { useConfigStore } from '@userfrosting/sprinkle-core/stores'
6+
const config = useConfigStore()
57
</script>
68

79
<template>
8-
<NavBar />
10+
<UFNavBar :title="config.get('site.title')" :to="{ name: 'home' }">
11+
<NavBarContent />
12+
</UFNavBar>
13+
914
<UFSideBar>
10-
<UFSideBarLabel :label="$t('ADMIN_PANEL')" />
11-
<UFAdminSidebarMenuItems />
15+
<SideBarContent />
1216
</UFSideBar>
17+
1318
<UFMainContent>
1419
<UFHeaderPage />
1520
<RouterView />
1621
</UFMainContent>
17-
<FooterContent />
22+
23+
<UFFooter>
24+
<FooterContent />
25+
</UFFooter>
1826
</template>

‎app/assets/layouts/LayoutPage.vue‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,27 @@
11
<script setup lang="ts">
2-
import NavBar from '../components/NavBar.vue'
2+
import NavBarContent from '../components/NavBarContent.vue'
3+
import SideBarContent from '../components/SideBarContent.vue'
34
import FooterContent from '../components/FooterContent.vue'
5+
import { useConfigStore } from '@userfrosting/sprinkle-core/stores'
6+
const config = useConfigStore()
47
</script>
58

69
<template>
7-
<NavBar />
10+
<UFNavBar :title="config.get('site.title')" :to="{ name: 'home' }">
11+
<NavBarContent />
12+
</UFNavBar>
13+
14+
<!-- Sidebar for small screens -->
15+
<UFSideBar class="uk-hidden@m">
16+
<SideBarContent />
17+
</UFSideBar>
18+
819
<UFMainContent>
920
<UFHeaderPage />
1021
<RouterView />
1122
</UFMainContent>
12-
<FooterContent />
23+
24+
<UFFooter>
25+
<FooterContent />
26+
</UFFooter>
1327
</template>

0 commit comments

Comments
 (0)