Skip to content

Commit

Permalink
feat(nav): implement navigation as component
Browse files Browse the repository at this point in the history
Signed-off-by: Kai Henseler <[email protected]>
  • Loading branch information
bromiesTM committed Sep 26, 2024
1 parent d52eea2 commit e466c0a
Show file tree
Hide file tree
Showing 2 changed files with 77 additions and 17 deletions.
23 changes: 6 additions & 17 deletions src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -19,18 +19,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<template>
<content>
<div class="navigation">
<a href="/">Previous</a>
<ul>
<li>
<a @click="scrollToElement('account')">Account Settings</a>
</li>
<li>
<a @click="scrollToElement('security')">Security & Privacy</a>
</li>
<li>
<a @click="scrollToElement('help')">Help & Support</a>
</li>
</ul>
<Navigation @scroll-to="scrollToElement" />
</div>
<div class="settings">
<a id="close-icon" href="/">
Expand Down Expand Up @@ -60,6 +49,7 @@ import WebDavUrl from './components/files/WebDavUrl.vue'
import Software from './components/help/Software.vue'
import LanguageSection from './components/account/LanguageSection.vue'
import Quota from './components/account/Quota.vue'
import Navigation from './components/navigation/Navigation.vue'
import IconClose from 'vue-material-design-icons/Close.vue'
import { defineComponent } from 'vue'

Expand All @@ -71,14 +61,13 @@ export default defineComponent({
WebDavUrl,
Software,
Quota,
Navigation,
IconClose,
},

methods: {
scrollToElement(ref: string) {
const el = this.$refs[ref] as HTMLElement

el?.scrollIntoView({ behavior: 'smooth', inline: 'start' })
scrollToElement(element: string) {
const el = this.$refs[element] as HTMLElement
el?.scrollIntoView({ behavior: 'smooth', block: 'start' })
},
},
})
Expand Down
71 changes: 71 additions & 0 deletions src/components/navigation/Navigation.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
<template>
<div class="settings-navigation">
<ul class="app-navigation-entry">
<NcAppNavigationItem
id="backButton"
:name="t('simplesettings', 'Back to Files')"
href="/">
<IconChevronLeft slot="icon" :size="24" />
</NcAppNavigationItem>
<NcAppNavigationItem
:name="t('simplesettings', 'Account Settings')"
@click="scrollToElement('account')">
<IconAccount slot="icon" :size="20" />
</NcAppNavigationItem>
<NcAppNavigationItem
:name="t('simplesettings', 'Security & Privacy')"
@click="scrollToElement('security')">
<IconLock slot="icon" :size="20" />
</NcAppNavigationItem>
<NcAppNavigationItem
:name="t('simplesettings', 'Help & Support')"
@click="scrollToElement('help')">
<IconHeadset slot="icon" :size="20" />
</NcAppNavigationItem>
</ul>
</div>
</template>

<script lang="ts">
import { translate as t } from '@nextcloud/l10n'
import { defineComponent } from 'vue'
import IconAccount from 'vue-material-design-icons/Account.vue'
import IconLock from 'vue-material-design-icons/Lock.vue'
import IconHeadset from 'vue-material-design-icons/Headset.vue'
import IconChevronLeft from 'vue-material-design-icons/ChevronLeft.vue'
// @ts-expect-error: Cannot find module or its corresponding type declarations.
import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
export default defineComponent({
name: 'Navigation',
components: {
IconAccount,
IconLock,
IconHeadset,
IconChevronLeft,
NcAppNavigationItem,
},
methods: {
scrollToElement(ref: string) {
this.$emit('scroll-to', ref)
},
t,
},
})
</script>

<style scoped>
.settings-navigation {
margin-left: 14px;
margin-top: 24px;
ul {
#backButton {
margin-top: -8px;
margin-left: -14px;
}
}
}
</style>

0 comments on commit e466c0a

Please sign in to comment.