Use PrimeBlocks layout and move navigation into it.
This commit is contained in:
parent
65534a4e55
commit
6e89752aaf
8 changed files with 1223 additions and 272 deletions
1071
package-lock.json
generated
1071
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -16,7 +16,9 @@
|
|||
"dependencies": {
|
||||
"@primevue/themes": "^4.2.2",
|
||||
"pinia": "^2.2.6",
|
||||
"primeicons": "^7.0.0",
|
||||
"primevue": "^4.2.2",
|
||||
"tailwindcss-primeui": "^0.3.4",
|
||||
"vue": "^3.5.12",
|
||||
"vue-router": "^4.4.5"
|
||||
},
|
||||
|
|
@ -30,11 +32,15 @@
|
|||
"@vue/eslint-config-typescript": "^14.1.3",
|
||||
"@vue/test-utils": "^2.4.6",
|
||||
"@vue/tsconfig": "^0.5.1",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"eslint": "^9.14.0",
|
||||
"eslint-plugin-vue": "^9.30.0",
|
||||
"jsdom": "^25.0.1",
|
||||
"npm-run-all2": "^7.0.1",
|
||||
"postcss": "^8.4.49",
|
||||
"prettier": "^3.3.3",
|
||||
"sass-embedded": "^1.81.0",
|
||||
"tailwindcss": "^3.4.15",
|
||||
"typescript": "~5.6.3",
|
||||
"vite": "^5.4.10",
|
||||
"vite-plugin-vue-devtools": "^7.5.4",
|
||||
|
|
|
|||
6
postcss.config.js
Normal file
6
postcss.config.js
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
274
src/App.vue
274
src/App.vue
|
|
@ -1,85 +1,209 @@
|
|||
<script setup lang="ts">
|
||||
import { RouterLink, RouterView } from 'vue-router'
|
||||
import HelloWorld from './components/HelloWorld.vue'
|
||||
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>
|
||||
<header>
|
||||
<img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
|
||||
|
||||
<div class="wrapper">
|
||||
<HelloWorld msg="You did it!" />
|
||||
|
||||
<nav>
|
||||
<RouterLink to="/">Home</RouterLink>
|
||||
<RouterLink to="/about">About</RouterLink>
|
||||
</nav>
|
||||
<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 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>
|
||||
</div>
|
||||
<div 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"
|
||||
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>
|
||||
</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>
|
||||
</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>
|
||||
</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"
|
||||
>
|
||||
<OverlayBadge severity="danger" class="mr-2 lg:mr-0 mb-0 lg:mb-2">
|
||||
<i class="pi pi-chart-line text-base lg:text-lg" />
|
||||
</OverlayBadge>
|
||||
<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>
|
||||
</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"
|
||||
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>
|
||||
</RouterLink>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<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" />
|
||||
<span class="font-medium inline lg:hidden">Amy Elsner</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="min-h-screen flex flex-col relative flex-auto">
|
||||
<div class="flex justify-between items-center px-8 bg-surface-0 dark:bg-surface-950 relative lg:static border-b border-surface h-[60px]">
|
||||
<div class="flex">
|
||||
<a
|
||||
v-styleclass="{
|
||||
selector: '#app-sidebar-5',
|
||||
enterFromClass: 'hidden',
|
||||
enterActiveClass: 'animate-fadeinleft',
|
||||
leaveToClass: 'hidden',
|
||||
leaveActiveClass: 'animate-fadeoutleft',
|
||||
hideOnOutsideClick: true
|
||||
}"
|
||||
class="cursor-pointer block lg:hidden text-surface-700 dark:text-surface-100 mr-4 mt-1"
|
||||
>
|
||||
<i class="pi pi-bars text-4xl" />
|
||||
</a>
|
||||
|
||||
<RouterView />
|
||||
<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>
|
||||
<a
|
||||
v-styleclass="{
|
||||
selector: '@next',
|
||||
enterFromClass: 'hidden',
|
||||
enterActiveClass: 'animate-fadein',
|
||||
leaveToClass: 'hidden',
|
||||
leaveActiveClass: 'animate-fadeout',
|
||||
hideOnOutsideClick: true
|
||||
}"
|
||||
class="cursor-pointer block lg:hidden text-surface-700 dark:text-surface-100"
|
||||
>
|
||||
<i class="pi pi-ellipsis-v text-2xl" />
|
||||
</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"
|
||||
>
|
||||
<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" />
|
||||
<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"
|
||||
>
|
||||
<OverlayBadge severity="danger" class="mr-2 lg:mr-0">
|
||||
<i class="pi pi-bell text-base lg:!text-2xl leading-none" />
|
||||
</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" />
|
||||
<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>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="p-8 flex flex-col flex-auto">
|
||||
<div class="border-2 border-dashed border-surface rounded-border bg-surface-0 dark:bg-surface-950 flex-auto">
|
||||
<RouterView />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
header {
|
||||
line-height: 1.5;
|
||||
max-height: 100vh;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: block;
|
||||
margin: 0 auto 2rem;
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
nav a.router-link-exact-active {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
nav a.router-link-exact-active:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
nav a {
|
||||
display: inline-block;
|
||||
padding: 0 1rem;
|
||||
border-left: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
nav a:first-of-type {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
header {
|
||||
display: flex;
|
||||
place-items: center;
|
||||
padding-right: calc(var(--section-gap) / 2);
|
||||
}
|
||||
|
||||
.logo {
|
||||
margin: 0 2rem 0 0;
|
||||
}
|
||||
|
||||
header .wrapper {
|
||||
display: flex;
|
||||
place-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
nav {
|
||||
text-align: left;
|
||||
margin-left: -1rem;
|
||||
font-size: 1rem;
|
||||
|
||||
padding: 1rem 0;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,86 +1,3 @@
|
|||
/* color palette from <https://github.com/vuejs/theme> */
|
||||
:root {
|
||||
--vt-c-white: #ffffff;
|
||||
--vt-c-white-soft: #f8f8f8;
|
||||
--vt-c-white-mute: #f2f2f2;
|
||||
|
||||
--vt-c-black: #181818;
|
||||
--vt-c-black-soft: #222222;
|
||||
--vt-c-black-mute: #282828;
|
||||
|
||||
--vt-c-indigo: #2c3e50;
|
||||
|
||||
--vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
|
||||
--vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
|
||||
--vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
|
||||
--vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
|
||||
|
||||
--vt-c-text-light-1: var(--vt-c-indigo);
|
||||
--vt-c-text-light-2: rgba(60, 60, 60, 0.66);
|
||||
--vt-c-text-dark-1: var(--vt-c-white);
|
||||
--vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
|
||||
}
|
||||
|
||||
/* semantic color variables for this project */
|
||||
:root {
|
||||
--color-background: var(--vt-c-white);
|
||||
--color-background-soft: var(--vt-c-white-soft);
|
||||
--color-background-mute: var(--vt-c-white-mute);
|
||||
|
||||
--color-border: var(--vt-c-divider-light-2);
|
||||
--color-border-hover: var(--vt-c-divider-light-1);
|
||||
|
||||
--color-heading: var(--vt-c-text-light-1);
|
||||
--color-text: var(--vt-c-text-light-1);
|
||||
|
||||
--section-gap: 160px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color-background: var(--vt-c-black);
|
||||
--color-background-soft: var(--vt-c-black-soft);
|
||||
--color-background-mute: var(--vt-c-black-mute);
|
||||
|
||||
--color-border: var(--vt-c-divider-dark-2);
|
||||
--color-border-hover: var(--vt-c-divider-dark-1);
|
||||
|
||||
--color-heading: var(--vt-c-text-dark-1);
|
||||
--color-text: var(--vt-c-text-dark-2);
|
||||
}
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
color: var(--color-text);
|
||||
background: var(--color-background);
|
||||
transition:
|
||||
color 0.5s,
|
||||
background-color 0.5s;
|
||||
line-height: 1.6;
|
||||
font-family:
|
||||
Inter,
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
'Segoe UI',
|
||||
Roboto,
|
||||
Oxygen,
|
||||
Ubuntu,
|
||||
Cantarell,
|
||||
'Fira Sans',
|
||||
'Droid Sans',
|
||||
'Helvetica Neue',
|
||||
sans-serif;
|
||||
font-size: 15px;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
|
|
|||
|
|
@ -1,35 +1,2 @@
|
|||
@import './base.css';
|
||||
|
||||
#app {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
a,
|
||||
.green {
|
||||
text-decoration: none;
|
||||
color: hsla(160, 100%, 37%, 1);
|
||||
transition: 0.4s;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
a:hover {
|
||||
background-color: hsla(160, 100%, 37%, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
body {
|
||||
display: flex;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
#app {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
}
|
||||
@import 'primeicons/primeicons.css';
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ h3 {
|
|||
@media (min-width: 1024px) {
|
||||
.item {
|
||||
margin-top: 0;
|
||||
padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
|
||||
padding: 0.4rem 0 1rem 80px;
|
||||
}
|
||||
|
||||
i {
|
||||
|
|
|
|||
12
tailwind.config.js
Normal file
12
tailwind.config.js
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: [
|
||||
"./index.html",
|
||||
"./src/**/*.{vue,js,ts,jsx,tsx}",
|
||||
],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [require('tailwindcss-primeui')],
|
||||
}
|
||||
|
||||
Loading…
Reference in a new issue