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">
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';
</script>
<template>
<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 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">
<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>
Designer
</div>
<div class="mt-4">
<nav class="mt-4">
<ul class="list-none p-4 m-0">
<li>
<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="/">
<i class="pi pi-home 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">Home</span>
<i class="pi pi-home nav-icon" />
<span>Home</span>
</RouterLink>
</li>
<li>
<a
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 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 class="nav-item">
<i class="pi pi-search nav-icon" />
<span>Search</span>
</a>
</li>
<li>
<a
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 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 class="nav-item">
<i class="pi pi-users nav-icon" />
<span>Team</span>
</a>
</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>
<a
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 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 class="nav-item">
<i class="pi pi-calendar nav-icon" />
<span>Events</span>
</a>
</li>
<li>
<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">
<i class="pi pi-info-circle 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">About</span>
<i class="pi pi-info-circle nav-icon" />
<span>About</span>
</RouterLink>
</li>
</ul>
</div>
</nav>
<div class="mt-auto">
<hr class="mb-4 mx-4 border-t border-0 border-surface-800" />
<a
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 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" />
<a class="m-4 nav-item">
<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-2 lg:mr-0 w-8 h-8" />
<span class="font-medium inline lg:hidden">Amy Elsner</span>
</a>
</div>
@ -142,11 +75,7 @@ import OverlayBadge from 'primevue/overlaybadge';
>
<i class="pi pi-bars text-4xl" />
</a>
<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>
<span class="title">Page Title</span>
</div>
<a
v-styleclass="{
@ -163,28 +92,27 @@ import OverlayBadge from 'primevue/overlaybadge';
</a>
<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"
id="header-icons"
>
<li>
<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 text-base lg:!text-2xl leading-none mr-2 lg:mr-0" />
<a>
<i class="pi pi-inbox mr-2 lg:mr-0" />
<span class="block lg:hidden font-medium">Inbox</span>
</a>
</li>
<li>
<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"
>
<a>
<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>
<span class="block lg:hidden font-medium">Notifications</span>
</a>
</li>
<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">
<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="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>
@ -202,5 +130,23 @@ import OverlayBadge from 'primevue/overlaybadge';
</div>
</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>

6
src/router/index.ts
View file

@ -1,5 +1,6 @@
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import AboutView from '../views/AboutView.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
@ -12,10 +13,7 @@ const router = createRouter({
{
path: '/about',
name: 'about',
// route level code-splitting
// 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'),
component: AboutView,
},
],
})