Skip to content

Commit 08c652b

Browse files
author
samarbadriddin0v
committed
Documents layou
1 parent ceffa6b commit 08c652b

File tree

7 files changed

+160
-2
lines changed

7 files changed

+160
-2
lines changed

‎components/layouts/navbar.vue‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<template>
2+
<div
3+
class="fixed top-0 left-0 right-0-0 h-[10vh] dark:bg-gray-900 bg-gray-200 w-full pl-72 flex items-center justify-end"
4+
>
5+
<div class="flex items-center space-x-2 pr-4">
6+
<SharedColorMode />
7+
<SharedUserBox />
8+
</div>
9+
</div>
10+
</template>

‎components/layouts/sidebar.vue‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<template>
2+
<div
3+
class="fixed top-0 left-0 bottom-0 h-screen dark:bg-gray-900 bg-gray-200 w-72 border-r dark:border-r-gray-800 border-r-gray-300 pt-4"
4+
>
5+
<div class="flex flex-col space-y-6">
6+
<NuxtLink to="/" class="flex items-center space-x-1 pl-2">
7+
<NuxtImg src="/logo.svg" width="50" height="50" />
8+
<span class="text-2xl font-medium">Jira software</span>
9+
</NuxtLink>
10+
<div>
11+
<SharedSidebarItem />
12+
</div>
13+
</div>
14+
</div>
15+
</template>

‎components/shared/sidebar-item.vue‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<script setup lang="ts">
2+
import { sidebarItems } from '~/constants'
3+
4+
const route = useRoute()
5+
</script>
6+
7+
<template>
8+
<NuxtLink v-for="(item, index) in sidebarItems" :key="index" :to="item.url">
9+
<UButton
10+
class="w-full text-left h-12 flex justify-start rounded-none"
11+
:variant="route.fullPath === item.url ? 'solid' : 'ghost'"
12+
color="blue"
13+
>
14+
<Icon :name="item.icon" size="20" class="mr-2" />
15+
<span>{{ item.name }}</span>
16+
</UButton>
17+
</NuxtLink>
18+
</template>

‎components/shared/user-box.vue‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<script setup lang="ts">
2+
import { useAuthStore } from '@/store/auth.store'
3+
import { useLoadingStore } from '@/store/loading.store'
4+
import { ACCOUNT } from '~/libs/appwrite'
5+
6+
const { currentUser, clear } = useAuthStore()
7+
const loadingStore = useLoadingStore()
8+
const router = useRouter()
9+
10+
const logout = async () => {
11+
loadingStore.set(true)
12+
await ACCOUNT.deleteSession('current')
13+
clear()
14+
router.push('/auth')
15+
loadingStore.set(false)
16+
}
17+
</script>
18+
19+
<template>
20+
<UPopover :popper="{ placement: 'left' }">
21+
<UAvatar :alt="currentUser.name" class="uppercase" size="lg" />
22+
23+
<template #panel>
24+
<div class="p-2 w-72 bg-white dark:bg-black">
25+
<p class="text-neutral-600 text-sm">{{ currentUser.email }}</p>
26+
27+
<div class="flex items-center mt-3 space-x-2">
28+
<div class="rounded-md dark:bg-gray-900 bg-gray-300 p-1">
29+
<UAvatar :alt="currentUser.name" class="uppercase" />
30+
</div>
31+
<p class="capitalize text-[15px]">
32+
{{ currentUser.name }}'s documents
33+
</p>
34+
</div>
35+
36+
<UDivider class="my-3" />
37+
38+
<NuxtLink to="/profile">
39+
<UButton class="w-full" color="blue" variant="ghost">
40+
Profile</UButton
41+
>
42+
</NuxtLink>
43+
<UButton class="w-full" variant="ghost" color="red" @click="logout">
44+
Logout</UButton
45+
>
46+
</div>
47+
</template>
48+
</UPopover>
49+
</template>

‎constants/index.ts‎

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ export const templates = [
6363
},
6464
{
6565
name: 'Kanban',
66-
image: '/kanban.svg',
66+
image: '/documents.svg',
6767
},
6868
{
6969
name: 'Bug tracking',
@@ -74,3 +74,31 @@ export const templates = [
7474
image: '/devops.svg',
7575
},
7676
]
77+
78+
export const sidebarItems = [
79+
{
80+
name: 'Dashboards',
81+
url: '/documents',
82+
icon: 'radix-icons:dashboard',
83+
},
84+
{
85+
icon: 'ri:todo-fill',
86+
name: 'To Do',
87+
url: '/documents/to-do',
88+
},
89+
{
90+
icon: 'game-icons:progression',
91+
name: 'In Progress',
92+
url: '/documents/in-progress',
93+
},
94+
{
95+
icon: 'eos-icons:product-subscriptions',
96+
name: 'Produced',
97+
url: '/documents/produced',
98+
},
99+
{
100+
icon: 'ic:baseline-cloud-done',
101+
name: 'Done',
102+
url: '/documents/done',
103+
},
104+
]

‎layouts/documents.vue‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<template>
2+
<main>
3+
<LayoutsNavbar />
4+
<LayoutsSidebar />
5+
<section class="min-h-screen bg-white dark:bg-black pl-72 pt-[10vh]">
6+
<div class="p-4">
7+
<slot />
8+
</div>
9+
</section>
10+
</main>
11+
</template>

‎pages/documents.vue‎

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,32 @@
1+
<script setup lang="ts">
2+
import { ACCOUNT } from '~/libs/appwrite'
3+
import { useAuthStore } from '~/store/auth.store'
4+
import { useLoadingStore } from '~/store/loading.store'
5+
6+
definePageMeta({ layout: 'documents' })
7+
useHead({ title: 'Documents | Jira software' })
8+
9+
const router = useRouter()
10+
const loadingStore = useLoadingStore()
11+
const authStore = useAuthStore()
12+
13+
onMounted(() => {
14+
ACCOUNT.get()
15+
.then(response => {
16+
loadingStore.set(false)
17+
authStore.set({
18+
email: response.email,
19+
id: response.$id,
20+
name: response.name,
21+
status: response.status,
22+
})
23+
})
24+
.catch(() => router.push('/auth'))
25+
})
26+
</script>
27+
128
<template>
229
<div>
3-
<h1>Documents</h1>
30+
<UButton>To DO</UButton>
431
</div>
532
</template>

0 commit comments

Comments
 (0)