brian/activist
1
0
Fork 0
Code Activity Actions

refactor and removals

Browse source
This commit is contained in:
Brian D 2024-11-16 15:08:09 -05:00
parent ea3a216455
commit abebfef132
2 changed files with 53 additions and 109 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

156
src/App.vue
View file

@ -1,126 +1,59 @@
<script setup lang="ts"> <script setup lang="ts">
import { RouterView } from 'vue-router' import { RouterView } from 'vue-router'
import IconField from 'primevue/iconfield';
import InputIcon from 'primevue/inputicon';
import InputText from 'primevue/inputtext';
import OverlayBadge from 'primevue/overlaybadge'; import OverlayBadge from 'primevue/overlaybadge';
</script> </script>
<template> <template>
<div class="min-h-screen flex relative lg:static bg-surface-50 dark:bg-surface-950"> <div class="min-h-screen flex relative lg:static bg-surface-50 dark:bg-surface-950">
<div id="app-sidebar-5" class="bg-surface-900 h-screen hidden lg:block flex-shrink-0 absolute lg:static left-0 top-0 z-10 border-r border-surface-800 w-72 lg:w-28 select-none"> <div id="app-sidebar-5" class="bg-surface-900 h-screen hidden lg:block flex-shrink-0 absolute lg:static left-0 top-0 z-10 border-surface-800 w-72 lg:w-28 select-none">
<div class="flex flex-col h-full"> <div class="flex flex-col h-full">
<div class="flex items-center justify-center flex-shrink-0 bg-primary h-[60px]"> <div class="flex items-center justify-center flex-shrink-0 bg-primary h-[60px]">
<svg width="48" height="50" viewBox="0 0 48 50" fill="none" xmlns="http://www.w3.org/2000/svg"> Designer
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M33.1548 9.65956L23.9913 4.86169L5.54723 14.5106L0.924465 12.0851L23.9913 0L37.801 7.23403L33.1548 9.65956ZM23.9931 19.3085L42.4255 9.65955L47.0717 12.0851L23.9931 24.1595L10.1952 16.9361L14.8297 14.5106L23.9931 19.3085ZM4.6345 25.8937L0 23.4681V37.9149L23.0669 50V45.1489L4.6345 35.4894V25.8937ZM18.4324 28.2658L0 18.6169V13.7658L23.0669 25.8403V40.2977L18.4324 37.8615V28.2658ZM38.7301 23.468V18.6169L24.9205 25.8403V49.9999L29.555 47.5743V28.2659L38.7301 23.468ZM43.3546 35.4892V16.1914L48.0008 13.7659V37.9148L34.1912 45.1488V40.2977L43.3546 35.4892Z"
class="fill-primary-contrast"
/>
</svg>
</div> </div>
<div class="mt-4"> <nav class="mt-4">
<ul class="list-none p-4 m-0"> <ul class="list-none p-4 m-0">
<li> <li>
<RouterLink <RouterLink
class="flex flex-row lg:flex-col items-center cursor-pointer p-4 lg:justify-center hover:bg-surface-800 rounded-border text-surface-300 hover:text-white duration-150 transition-colors" class="nav-item"
to="/"> to="/">
<i class="pi pi-home mr-2 lg:mr-0 mb-0 lg:mb-2 text-base lg:text-lg" /> <i class="pi pi-home nav-icon" />
<span class="font-medium inline text-base lg:text-xs lg:block">Home</span> <span>Home</span>
</RouterLink> </RouterLink>
</li> </li>
<li> <li>
<a <a class="nav-item">
class="flex flex-row lg:flex-col items-center cursor-pointer p-4 lg:justify-center hover:bg-surface-800 rounded-border text-surface-300 hover:text-white duration-150 transition-colors" <i class="pi pi-search nav-icon" />
> <span>Search</span>
<i class="pi pi-search mr-2 lg:mr-0 mb-0 lg:mb-2 text-base lg:text-lg" />
<span class="font-medium inline text-base lg:text-xs lg:block">Search</span>
</a> </a>
</li> </li>
<li> <li>
<a <a class="nav-item">
class="flex flex-row lg:flex-col items-center cursor-pointer p-4 lg:justify-center hover:bg-surface-800 rounded-border text-surface-300 hover:text-white duration-150 transition-colors" <i class="pi pi-users nav-icon" />
> <span>Team</span>
<i class="pi pi-users mr-2 lg:mr-0 mb-0 lg:mb-2 text-base lg:text-lg" />
<span class="font-medium inline text-base lg:text-xs lg:block">Team</span>
</a> </a>
</li> </li>
<li class="relative">
<a
v-styleclass="{
selector: '@next',
enterFromClass: 'hidden',
leaveToClass: 'hidden',
hideOnOutsideClick: true
}"
class="flex flex-row lg:flex-col items-center cursor-pointer p-4 lg:justify-center hover:bg-surface-800 rounded-border text-surface-300 hover:text-white duration-150 transition-colors"
>
<span class="font-medium inline text-base lg:text-xs lg:block">Reports</span>
<i class="pi pi-chevron-down ml-auto lg:hidden" />
</a>
<ul
class="list-none pl-4 pr-0 py-0 lg:p-4 m-0 lg:ml-4 hidden overflow-y-hidden transition-all duration-[400ms] ease-in-out static rounded-r lg:absolute left-full top-0 z-10 bg-surface-900 shadow-none lg:shadow w-full lg:w-60"
>
<li>
<a
v-styleclass="{
selector: '@next',
toggleClass: 'hidden'
}"
class="flex items-center cursor-pointer p-4 hover:bg-surface-800 rounded-border text-surface-300 hover:text-white duration-150 transition-colors"
>
<i class="pi pi-chart-line mr-2" />
<span class="font-medium">Revenue</span>
<i class="pi pi-chevron-down ml-auto" />
</a>
<ul class="list-none py-0 pl-4 pr-0 m-0 hidden overflow-y-hidden transition-all duration-[400ms] ease-in-out">
<li>
<a class="flex items-center cursor-pointer p-4 hover:bg-surface-800 rounded-border text-surface-300 hover:text-white duration-150 transition-colors">
<i class="pi pi-table mr-2" />
<span class="font-medium">View</span>
</a>
</li>
<li>
<a class="flex items-center cursor-pointer p-4 hover:bg-surface-800 rounded-border text-surface-300 hover:text-white duration-150 transition-colors">
<i class="pi pi-search mr-2" />
<span class="font-medium">Search</span>
</a>
</li>
</ul>
</li>
<li>
<a class="flex items-center cursor-pointer p-4 hover:bg-surface-800 rounded-border text-surface-300 hover:text-white duration-150 transition-colors">
<i class="pi pi-chart-line mr-2" />
<span class="font-medium">Expenses</span>
</a>
</li>
</ul>
</li>
<li> <li>
<a <a class="nav-item">
class="flex flex-row lg:flex-col items-center cursor-pointer p-4 lg:justify-center hover:bg-surface-800 rounded-border text-surface-300 hover:text-white duration-150 transition-colors" <i class="pi pi-calendar nav-icon" />
> <span>Events</span>
<i class="pi pi-calendar mr-2 lg:mr-0 mb-0 lg:mb-2 text-base lg:text-lg" />
<span class="font-medium inline text-base lg:text-xs lg:block">Events</span>
</a> </a>
</li> </li>
<li> <li>
<RouterLink <RouterLink
class="flex flex-row lg:flex-col items-center cursor-pointer p-4 lg:justify-center hover:bg-surface-800 rounded-border text-surface-300 hover:text-white duration-150 transition-colors" class="nav-item"
to="/about"> to="/about">
<i class="pi pi-info-circle mr-2 lg:mr-0 mb-0 lg:mb-2 text-base lg:text-lg" /> <i class="pi pi-info-circle nav-icon" />
<span class="font-medium inline text-base lg:text-xs lg:block">About</span> <span>About</span>
</RouterLink> </RouterLink>
</li> </li>
</ul> </ul>
</div> </nav>
<div class="mt-auto"> <div class="mt-auto">
<hr class="mb-4 mx-4 border-t border-0 border-surface-800" /> <hr class="mb-4 mx-4 border-t border-0 border-surface-800" />
<a <a class="m-4 nav-item">
class="m-4 flex flex-row lg:flex-col items-center cursor-pointer p-4 lg:justify-center hover:bg-surface-800 rounded-border text-surface-300 hover:text-white duration-150 transition-colors" <img
> alt="user avatar"
<img src="https://fqjltiegiezfetthbags.supabase.co/storage/v1/render/image/public/block.images/blocks/avatars/circle/avatar-f-1.png" class="mr-2 lg:mr-0 w-8 h-8" /> src="https://fqjltiegiezfetthbags.supabase.co/storage/v1/render/image/public/block.images/blocks/avatars/circle/avatar-f-1.png" class="mr-2 lg:mr-0 w-8 h-8" />
<span class="font-medium inline lg:hidden">Amy Elsner</span> <span class="font-medium inline lg:hidden">Amy Elsner</span>
</a> </a>
</div> </div>
@ -142,11 +75,7 @@ import OverlayBadge from 'primevue/overlaybadge';
> >
<i class="pi pi-bars text-4xl" /> <i class="pi pi-bars text-4xl" />
</a> </a>
<span class="title">Page Title</span>
<IconField icon-position="left">
<InputIcon class="pi pi-search text-surface-700 dark:text-surface-100" />
<InputText type="text" class="border-0 w-40 sm:w-80" placeholder="Search" />
</IconField>
</div> </div>
<a <a
v-styleclass="{ v-styleclass="{
@ -163,28 +92,27 @@ import OverlayBadge from 'primevue/overlaybadge';
</a> </a>
<ul <ul
class="list-none p-0 m-0 hidden lg:flex lg:items-center select-none lg:flex-row bg-surface-0 dark:bg-surface-950 border lg:border-0 border-surface right-0 top-full z-10 shadow lg:shadow-none absolute lg:static" class="list-none p-0 m-0 hidden lg:flex lg:items-center select-none lg:flex-row bg-surface-0 dark:bg-surface-950 border lg:border-0 border-surface right-0 top-full z-10 shadow lg:shadow-none absolute lg:static"
id="header-icons"
> >
<li> <li>
<a <a>
class="flex p-4 lg:px-4 lg:py-2 items-center text-surface-600 dark:text-surface-200 hover:text-surface-900 dark:hover:text-surface-0 hover:bg-surface-100 dark:hover:bg-surface-700 font-medium rounded-border cursor-pointer duration-150 transition-colors" <i class="pi pi-inbox mr-2 lg:mr-0" />
>
<i class="pi pi-inbox text-base lg:!text-2xl leading-none mr-2 lg:mr-0" />
<span class="block lg:hidden font-medium">Inbox</span> <span class="block lg:hidden font-medium">Inbox</span>
</a> </a>
</li> </li>
<li> <li>
<a <a>
class="flex p-4 lg:px-4 lg:py-2 items-center text-surface-600 dark:text-surface-200 hover:text-surface-900 dark:hover:text-surface-0 hover:bg-surface-100 dark:hover:bg-surface-700 font-medium rounded-border cursor-pointer duration-150 transition-colors"
>
<OverlayBadge severity="danger" class="mr-2 lg:mr-0"> <OverlayBadge severity="danger" class="mr-2 lg:mr-0">
<i class="pi pi-bell text-base lg:!text-2xl leading-none" /> <i class="pi pi-bell" />
</OverlayBadge> </OverlayBadge>
<span class="block lg:hidden font-medium">Notifications</span> <span class="block lg:hidden font-medium">Notifications</span>
</a> </a>
</li> </li>
<li class="border-t border-surface lg:border-t-0"> <li class="border-t border-surface lg:border-t-0">
<a class="flex p-4 lg:px-4 lg:py-2 items-center hover:bg-surface-100 dark:hover:bg-surface-700 font-medium rounded-border cursor-pointer duration-150 transition-colors"> <a class="flex p-4 lg:px-4 lg:py-2 items-center hover:bg-surface-100 dark:hover:bg-surface-700 font-medium rounded-border cursor-pointer duration-150 transition-colors">
<img src="https://fqjltiegiezfetthbags.supabase.co/storage/v1/render/image/public/block.images/blocks/avatars/circle/avatar-f-1.png" class="mr-4 lg:mr-0 w-8 h-8" /> <img
alt="user avatar"
src="https://fqjltiegiezfetthbags.supabase.co/storage/v1/render/image/public/block.images/blocks/avatars/circle/avatar-f-1.png" class="mr-4 lg:mr-0 w-8 h-8" />
<div class="block lg:hidden"> <div class="block lg:hidden">
<div class="text-surface-900 dark:text-surface-0 font-medium">Josephine Lillard</div> <div class="text-surface-900 dark:text-surface-0 font-medium">Josephine Lillard</div>
<span class="text-surface-600 dark:text-surface-200 font-medium text-sm">Marketing Specialist</span> <span class="text-surface-600 dark:text-surface-200 font-medium text-sm">Marketing Specialist</span>
@ -202,5 +130,23 @@ import OverlayBadge from 'primevue/overlaybadge';
</div> </div>
</template> </template>
<style scoped> <style scoped lang="scss">
.nav-icon {
@apply mr-2 lg:mr-0 mb-0 lg:mb-2 text-base lg:text-lg;
}
.nav-item {
@apply flex flex-row lg:flex-col items-center cursor-pointer p-4 lg:justify-center hover:bg-surface-800 rounded-border text-surface-300 hover:text-white duration-150 transition-colors;
span {
@apply font-medium inline text-base lg:text-xs lg:block;
}
}
.title {
font-size: 160%;
}
#header-icons li a {
@apply flex p-4 lg:px-4 lg:py-2 items-center text-surface-600 dark:text-surface-200 hover:text-surface-900 dark:hover:text-surface-0 hover:bg-surface-100 dark:hover:bg-surface-700 font-medium rounded-border cursor-pointer duration-150 transition-colors;
i {
@apply text-base lg:!text-2xl leading-none;
}
}
</style> </style>

6
src/router/index.ts
View file

@ -1,5 +1,6 @@
import { createRouter, createWebHistory } from 'vue-router' import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue' import HomeView from '../views/HomeView.vue'
import AboutView from '../views/AboutView.vue'
const router = createRouter({ const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL), history: createWebHistory(import.meta.env.BASE_URL),
@ -12,10 +13,7 @@ const router = createRouter({
{ {
path: '/about', path: '/about',
name: 'about', name: 'about',
// route level code-splitting component: AboutView,
// this generates a separate chunk (About.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import('../views/AboutView.vue'),
}, },
], ],
}) })