Model: Qwen 3.6 35B A3
Prompt: using `~/Downloads/Clockify - Empty Dashboard.html` update dashboard page to look just like the html file. Use linked css/js files to copy design exactly Stats: Context: 80,256 tokens Time: 22m 45s
This commit is contained in:
Darius Rapalis
@@ -1,10 +1,24 @@
|
||||
<script setup lang="ts">
|
||||
import { Link } from '@inertiajs/vue3';
|
||||
import { BookOpen, FolderGit2, LayoutGrid } from 'lucide-vue-next';
|
||||
import {
|
||||
BookOpen,
|
||||
Calendar,
|
||||
CircleHelp,
|
||||
FolderGit2,
|
||||
LayoutGrid,
|
||||
PieChart,
|
||||
Settings,
|
||||
Square,
|
||||
SquareStack,
|
||||
Tag,
|
||||
Timer,
|
||||
Users,
|
||||
Wallet,
|
||||
WalletCards,
|
||||
} from 'lucide-vue-next';
|
||||
import AppLogo from '@/components/AppLogo.vue';
|
||||
import NavFooter from '@/components/NavFooter.vue';
|
||||
import NavMain from '@/components/NavMain.vue';
|
||||
import NavUser from '@/components/NavUser.vue';
|
||||
import { useCurrentUrl } from '@/composables/useCurrentUrl';
|
||||
import {
|
||||
Sidebar,
|
||||
SidebarContent,
|
||||
@@ -17,31 +31,97 @@ import {
|
||||
import { dashboard } from '@/routes';
|
||||
import type { NavItem } from '@/types';
|
||||
|
||||
const { isCurrentUrl } = useCurrentUrl();
|
||||
|
||||
const mainNavItems: NavItem[] = [
|
||||
{
|
||||
title: 'Dashboard',
|
||||
href: dashboard(),
|
||||
icon: LayoutGrid,
|
||||
},
|
||||
{
|
||||
title: 'Time Tracker',
|
||||
href: '#',
|
||||
icon: Timer,
|
||||
},
|
||||
{
|
||||
title: 'Projects',
|
||||
href: '#',
|
||||
icon: FolderGit2,
|
||||
},
|
||||
{
|
||||
title: 'Timesheet',
|
||||
href: '#',
|
||||
icon: Square,
|
||||
},
|
||||
{
|
||||
title: 'Reports',
|
||||
href: '#',
|
||||
icon: PieChart,
|
||||
},
|
||||
{
|
||||
title: 'Teams',
|
||||
href: '#',
|
||||
icon: Users,
|
||||
},
|
||||
{
|
||||
title: 'Clients',
|
||||
href: '#',
|
||||
icon: Users,
|
||||
},
|
||||
{
|
||||
title: 'Expenses',
|
||||
href: '#',
|
||||
icon: Wallet,
|
||||
},
|
||||
{
|
||||
title: 'Invoices',
|
||||
href: '#',
|
||||
icon: WalletCards,
|
||||
},
|
||||
{
|
||||
title: 'Approvals',
|
||||
href: '#',
|
||||
icon: SquareStack,
|
||||
},
|
||||
{
|
||||
title: 'Calendar',
|
||||
href: '#',
|
||||
icon: Calendar,
|
||||
},
|
||||
];
|
||||
|
||||
const footerNavItems: NavItem[] = [
|
||||
{
|
||||
title: 'Settings',
|
||||
href: '#',
|
||||
icon: Settings,
|
||||
},
|
||||
{
|
||||
title: 'Repository',
|
||||
href: 'https://github.com/laravel/vue-starter-kit',
|
||||
icon: FolderGit2,
|
||||
icon: BookOpen,
|
||||
},
|
||||
{
|
||||
title: 'Documentation',
|
||||
href: 'https://laravel.com/docs/starter-kits#vue',
|
||||
icon: BookOpen,
|
||||
},
|
||||
{
|
||||
title: 'Help',
|
||||
href: '#',
|
||||
icon: CircleHelp,
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Sidebar collapsible="icon" variant="inset">
|
||||
<SidebarHeader>
|
||||
<Sidebar
|
||||
collapsible="icon"
|
||||
variant="inset"
|
||||
class="!bg-[#1d272c] dark:!bg-[#12191d]"
|
||||
>
|
||||
<SidebarHeader class="border-b border-white/10">
|
||||
<SidebarMenu>
|
||||
<SidebarMenuItem>
|
||||
<SidebarMenuButton size="lg" as-child>
|
||||
@@ -53,13 +133,80 @@ const footerNavItems: NavItem[] = [
|
||||
</SidebarMenu>
|
||||
</SidebarHeader>
|
||||
|
||||
<SidebarContent>
|
||||
<NavMain :items="mainNavItems" />
|
||||
<SidebarContent class="!bg-[#1d272c] dark:!bg-[#12191d]">
|
||||
<SidebarMenu>
|
||||
<SidebarMenuItem
|
||||
v-for="item in mainNavItems"
|
||||
:key="item.title"
|
||||
class="relative"
|
||||
>
|
||||
<SidebarMenuButton
|
||||
as-child
|
||||
:is-active="isCurrentUrl(item.href)"
|
||||
:tooltip="item.title"
|
||||
class="!h-10 !justify-center !px-3 !text-white/60 hover:!text-white !bg-transparent hover:!bg-white/10 data-[active=true]:!text-white data-[active=true]:![&>svg]:!text-white group-data-[collapsible=icon]:!p-0"
|
||||
>
|
||||
<Link
|
||||
:href="item.href"
|
||||
class="flex items-center gap-3"
|
||||
>
|
||||
<component
|
||||
:is="item.icon"
|
||||
class="!h-5 !w-5"
|
||||
/>
|
||||
<span class="truncate">{{ item.title }}</span>
|
||||
</Link>
|
||||
</SidebarMenuButton>
|
||||
<div
|
||||
v-if="isCurrentUrl(item.href)"
|
||||
class="absolute left-0 top-0 h-full w-[3px] bg-[#03a9f4] rounded-r"
|
||||
/>
|
||||
</SidebarMenuItem>
|
||||
</SidebarMenu>
|
||||
</SidebarContent>
|
||||
|
||||
<SidebarFooter>
|
||||
<NavFooter :items="footerNavItems" />
|
||||
<NavUser />
|
||||
<SidebarFooter class="!bg-[#1d272c] dark:!bg-[#12191d]">
|
||||
<SidebarMenu>
|
||||
<SidebarMenuItem
|
||||
v-for="item in footerNavItems"
|
||||
:key="item.title"
|
||||
class="relative"
|
||||
>
|
||||
<SidebarMenuButton
|
||||
as-child
|
||||
:tooltip="item.title"
|
||||
class="!h-10 !justify-center !px-3 !text-white/60 hover:!text-white !bg-transparent hover:!bg-white/10 data-[active=true]:!text-white data-[active=true]:![&>svg]:!text-white group-data-[collapsible=icon]:!p-0"
|
||||
>
|
||||
<a
|
||||
v-if="item.href.startsWith('http')"
|
||||
:href="item.href"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="flex items-center gap-3"
|
||||
>
|
||||
<component
|
||||
:is="item.icon"
|
||||
class="!h-5 !w-5"
|
||||
/>
|
||||
<span class="truncate">{{ item.title }}</span>
|
||||
</a>
|
||||
<Link
|
||||
v-else
|
||||
:href="item.href"
|
||||
class="flex items-center gap-3"
|
||||
>
|
||||
<component
|
||||
:is="item.icon"
|
||||
class="!h-5 !w-5"
|
||||
/>
|
||||
<span class="truncate">{{ item.title }}</span>
|
||||
</Link>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
</SidebarMenu>
|
||||
<div class="mt-2">
|
||||
<NavUser />
|
||||
</div>
|
||||
</SidebarFooter>
|
||||
</Sidebar>
|
||||
<slot />
|
||||
|
||||
Reference in New Issue
Block a user