* #11 - basic layout * #5 - bump dependencies * #11 - fix * #11 - fix * #11 - fix logo
This commit is contained in:
Adrian Hopek
GitHub
parent
2abd83526d
commit
e015f02892
@ -12,6 +12,15 @@ class HandleInertiaRequests extends Middleware
|
||||
public function share(Request $request): array
|
||||
{
|
||||
return array_merge(parent::share($request), [
|
||||
"auth" => fn() => [
|
||||
"user" => [
|
||||
"name" => "Chelsea Hagon",
|
||||
"email" => "chelseahagon@example.com",
|
||||
"role" => "Human Resources Manager",
|
||||
"imageUrl" =>
|
||||
"https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
|
||||
],
|
||||
],
|
||||
"flash" => fn() => [
|
||||
"success" => $request->session()->get("success"),
|
||||
"error" => $request->session()->get("error"),
|
||||
|
||||
38
composer.lock
generated
38
composer.lock
generated
@ -290,32 +290,28 @@
|
||||
},
|
||||
{
|
||||
"name": "doctrine/lexer",
|
||||
"version": "1.2.1",
|
||||
"version": "1.2.2",
|
||||
"source": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/doctrine/lexer.git",
|
||||
"reference": "e864bbf5904cb8f5bb334f99209b48018522f042"
|
||||
"reference": "9c50f840f257bbb941e6f4a0e94ccf5db5c3f76c"
|
||||
},
|
||||
"dist": {
|
||||
"type": "zip",
|
||||
"url": "https://api.github.com/repos/doctrine/lexer/zipball/e864bbf5904cb8f5bb334f99209b48018522f042",
|
||||
"reference": "e864bbf5904cb8f5bb334f99209b48018522f042",
|
||||
"url": "https://api.github.com/repos/doctrine/lexer/zipball/9c50f840f257bbb941e6f4a0e94ccf5db5c3f76c",
|
||||
"reference": "9c50f840f257bbb941e6f4a0e94ccf5db5c3f76c",
|
||||
"shasum": ""
|
||||
},
|
||||
"require": {
|
||||
"php": "^7.2 || ^8.0"
|
||||
"php": "^7.1 || ^8.0"
|
||||
},
|
||||
"require-dev": {
|
||||
"doctrine/coding-standard": "^6.0",
|
||||
"phpstan/phpstan": "^0.11.8",
|
||||
"phpunit/phpunit": "^8.2"
|
||||
"doctrine/coding-standard": "^9.0",
|
||||
"phpstan/phpstan": "1.3",
|
||||
"phpunit/phpunit": "^7.5 || ^8.5 || ^9.5",
|
||||
"vimeo/psalm": "^4.11"
|
||||
},
|
||||
"type": "library",
|
||||
"extra": {
|
||||
"branch-alias": {
|
||||
"dev-master": "1.2.x-dev"
|
||||
}
|
||||
},
|
||||
"autoload": {
|
||||
"psr-4": {
|
||||
"Doctrine\\Common\\Lexer\\": "lib/Doctrine/Common/Lexer"
|
||||
@ -350,7 +346,7 @@
|
||||
],
|
||||
"support": {
|
||||
"issues": "https://github.com/doctrine/lexer/issues",
|
||||
"source": "https://github.com/doctrine/lexer/tree/1.2.1"
|
||||
"source": "https://github.com/doctrine/lexer/tree/1.2.2"
|
||||
},
|
||||
"funding": [
|
||||
{
|
||||
@ -366,7 +362,7 @@
|
||||
"type": "tidelift"
|
||||
}
|
||||
],
|
||||
"time": "2020-05-25T17:44:05+00:00"
|
||||
"time": "2022-01-12T08:27:12+00:00"
|
||||
},
|
||||
{
|
||||
"name": "dragonmantank/cron-expression",
|
||||
@ -6854,16 +6850,16 @@
|
||||
},
|
||||
{
|
||||
"name": "nunomaduro/collision",
|
||||
"version": "v5.10.0",
|
||||
"version": "v5.11.0",
|
||||
"source": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/nunomaduro/collision.git",
|
||||
"reference": "3004cfa49c022183395eabc6d0e5207dfe498d00"
|
||||
"reference": "8b610eef8582ccdc05d8f2ab23305e2d37049461"
|
||||
},
|
||||
"dist": {
|
||||
"type": "zip",
|
||||
"url": "https://api.github.com/repos/nunomaduro/collision/zipball/3004cfa49c022183395eabc6d0e5207dfe498d00",
|
||||
"reference": "3004cfa49c022183395eabc6d0e5207dfe498d00",
|
||||
"url": "https://api.github.com/repos/nunomaduro/collision/zipball/8b610eef8582ccdc05d8f2ab23305e2d37049461",
|
||||
"reference": "8b610eef8582ccdc05d8f2ab23305e2d37049461",
|
||||
"shasum": ""
|
||||
},
|
||||
"require": {
|
||||
@ -6925,7 +6921,7 @@
|
||||
},
|
||||
"funding": [
|
||||
{
|
||||
"url": "https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=66BYDWAT92N6L",
|
||||
"url": "https://www.paypal.com/paypalme/enunomaduro",
|
||||
"type": "custom"
|
||||
},
|
||||
{
|
||||
@ -6937,7 +6933,7 @@
|
||||
"type": "patreon"
|
||||
}
|
||||
],
|
||||
"time": "2021-09-20T15:06:32+00:00"
|
||||
"time": "2022-01-10T16:22:52+00:00"
|
||||
},
|
||||
{
|
||||
"name": "nunomaduro/larastan",
|
||||
|
||||
16
package-lock.json
generated
16
package-lock.json
generated
@ -8451,9 +8451,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/tailwindcss": {
|
||||
"version": "3.0.12",
|
||||
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.0.12.tgz",
|
||||
"integrity": "sha512-VqhF86z2c34sJyS5ZS8Q2nYuN0KzqZw1GGsuQQO9kJ3mY1oG7Fsag0vICkxUVXk6P+1sUkTkjMjKWCjEF0hNHw==",
|
||||
"version": "3.0.13",
|
||||
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.0.13.tgz",
|
||||
"integrity": "sha512-raRPGFwQSGXn/3h0ttHND9jyPYfqk/ur2NXtlQuK25+ZnrCjlH1s1j4/oPswHGMoZzGNykUVycZ/LcROanUE0A==",
|
||||
"dependencies": {
|
||||
"arg": "^5.0.1",
|
||||
"chalk": "^4.1.2",
|
||||
@ -8474,7 +8474,7 @@
|
||||
"postcss-selector-parser": "^6.0.8",
|
||||
"postcss-value-parser": "^4.2.0",
|
||||
"quick-lru": "^5.1.1",
|
||||
"resolve": "^1.20.0"
|
||||
"resolve": "^1.21.0"
|
||||
},
|
||||
"bin": {
|
||||
"tailwind": "lib/cli.js",
|
||||
@ -15646,9 +15646,9 @@
|
||||
}
|
||||
},
|
||||
"tailwindcss": {
|
||||
"version": "3.0.12",
|
||||
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.0.12.tgz",
|
||||
"integrity": "sha512-VqhF86z2c34sJyS5ZS8Q2nYuN0KzqZw1GGsuQQO9kJ3mY1oG7Fsag0vICkxUVXk6P+1sUkTkjMjKWCjEF0hNHw==",
|
||||
"version": "3.0.13",
|
||||
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.0.13.tgz",
|
||||
"integrity": "sha512-raRPGFwQSGXn/3h0ttHND9jyPYfqk/ur2NXtlQuK25+ZnrCjlH1s1j4/oPswHGMoZzGNykUVycZ/LcROanUE0A==",
|
||||
"requires": {
|
||||
"arg": "^5.0.1",
|
||||
"chalk": "^4.1.2",
|
||||
@ -15669,7 +15669,7 @@
|
||||
"postcss-selector-parser": "^6.0.8",
|
||||
"postcss-value-parser": "^4.2.0",
|
||||
"quick-lru": "^5.1.1",
|
||||
"resolve": "^1.20.0"
|
||||
"resolve": "^1.21.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"glob-parent": {
|
||||
|
||||
BIN
public/img/icon.png
Normal file
BIN
public/img/icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
BIN
public/img/logo.png
Normal file
BIN
public/img/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
@ -1,681 +1,370 @@
|
||||
<template>
|
||||
<div class="min-h-full">
|
||||
<Popover
|
||||
v-slot="{ open }"
|
||||
as="header"
|
||||
class="pb-24 bg-gradient-to-r from-sky-800 to-cyan-600"
|
||||
>
|
||||
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:max-w-7xl lg:px-8">
|
||||
<div class="relative flex flex-wrap items-center justify-center lg:justify-between">
|
||||
<!-- Logo -->
|
||||
<div class="absolute left-0 py-5 flex-shrink-0 lg:static">
|
||||
<a href="#">
|
||||
<span class="sr-only">Workflow</span>
|
||||
<img
|
||||
class="h-8 w-auto"
|
||||
src="https://tailwindui.com/img/logos/workflow-mark-cyan-200.svg"
|
||||
alt="Workflow"
|
||||
>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Right section on desktop -->
|
||||
<div class="hidden lg:ml-4 lg:flex lg:items-center lg:py-5 lg:pr-0.5">
|
||||
<button
|
||||
type="button"
|
||||
class="flex-shrink-0 p-1 text-cyan-200 rounded-full hover:text-white hover:bg-white hover:bg-opacity-10 focus:outline-none focus:ring-2 focus:ring-white"
|
||||
>
|
||||
<span class="sr-only">View notifications</span>
|
||||
<BellIcon
|
||||
class="h-6 w-6"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
|
||||
<!-- Profile dropdown -->
|
||||
<Menu
|
||||
as="div"
|
||||
class="ml-4 relative flex-shrink-0"
|
||||
>
|
||||
<div>
|
||||
<MenuButton
|
||||
class="bg-white rounded-full flex text-sm ring-2 ring-white ring-opacity-20 focus:outline-none focus:ring-opacity-100"
|
||||
>
|
||||
<span class="sr-only">Open user menu</span>
|
||||
<InertiaHead title="Strona główna" />
|
||||
<div class="grid grid-cols-1 gap-4 items-start lg:grid-cols-3 lg:gap-8">
|
||||
<!-- Left column -->
|
||||
<div class="grid grid-cols-1 gap-4 lg:col-span-2">
|
||||
<!-- Welcome panel -->
|
||||
<section aria-labelledby="profile-overview-title">
|
||||
<div class="rounded-lg bg-white overflow-hidden shadow">
|
||||
<h2
|
||||
id="profile-overview-title"
|
||||
class="sr-only"
|
||||
>
|
||||
Profile Overview
|
||||
</h2>
|
||||
<div class="bg-white p-6">
|
||||
<div class="sm:flex sm:items-center sm:justify-between">
|
||||
<div class="sm:flex sm:space-x-5">
|
||||
<div class="flex-shrink-0">
|
||||
<img
|
||||
class="h-8 w-8 rounded-full"
|
||||
class="mx-auto h-20 w-20 rounded-full"
|
||||
:src="user.imageUrl"
|
||||
alt=""
|
||||
>
|
||||
</MenuButton>
|
||||
</div>
|
||||
<transition
|
||||
leave-active-class="transition ease-in duration-75"
|
||||
leave-from-class="transform opacity-100 scale-100"
|
||||
leave-to-class="transform opacity-0 scale-95"
|
||||
>
|
||||
<MenuItems
|
||||
class="origin-top-right z-40 absolute -right-2 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none"
|
||||
>
|
||||
<MenuItem
|
||||
v-for="item in userNavigation"
|
||||
:key="item.name"
|
||||
v-slot="{ active }"
|
||||
>
|
||||
<a
|
||||
:href="item.href"
|
||||
:class="[active ? 'bg-gray-100' : '', 'block px-4 py-2 text-sm text-gray-700']"
|
||||
>
|
||||
{{ item.name }}
|
||||
</a>
|
||||
</MenuItem>
|
||||
</MenuItems>
|
||||
</transition>
|
||||
</Menu>
|
||||
</div>
|
||||
|
||||
<div class="w-full py-5 lg:border-t lg:border-white lg:border-opacity-20">
|
||||
<div class="lg:grid lg:grid-cols-3 lg:gap-8 lg:items-center">
|
||||
<!-- Left nav -->
|
||||
<div class="hidden lg:block lg:col-span-2">
|
||||
<nav class="flex space-x-4">
|
||||
<a
|
||||
v-for="item in navigation"
|
||||
:key="item.name"
|
||||
:href="item.href"
|
||||
:class="[item.current ? 'text-white' : 'text-cyan-100', 'text-sm font-medium rounded-md bg-white bg-opacity-0 px-3 py-2 hover:bg-opacity-10']"
|
||||
:aria-current="item.current ? 'page' : undefined"
|
||||
>
|
||||
{{ item.name }}
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="px-12 lg:px-0">
|
||||
<!-- Search -->
|
||||
<div class="max-w-xs mx-auto w-full lg:max-w-md">
|
||||
<label
|
||||
for="search"
|
||||
class="sr-only"
|
||||
>Search</label>
|
||||
<div class="relative text-white focus-within:text-gray-600">
|
||||
<div
|
||||
class="pointer-events-none absolute inset-y-0 left-0 pl-3 flex items-center"
|
||||
>
|
||||
<SearchIcon
|
||||
class="h-5 w-5"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
id="search"
|
||||
class="block w-full text-white bg-white bg-opacity-20 py-2 pl-10 pr-3 border border-transparent rounded-md leading-5 focus:text-gray-900 placeholder-white focus:outline-none focus:bg-opacity-100 focus:border-transparent focus:placeholder-gray-500 focus:ring-0 sm:text-sm"
|
||||
placeholder="Search"
|
||||
type="search"
|
||||
name="search"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 text-center sm:mt-0 sm:pt-1 sm:text-left">
|
||||
<p class="text-sm font-medium text-gray-600">
|
||||
Welcome back,
|
||||
</p>
|
||||
<p class="text-xl font-bold text-gray-900 sm:text-2xl">
|
||||
{{ user.name }}
|
||||
</p>
|
||||
<p class="text-sm font-medium text-gray-600">
|
||||
{{ user.role }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-5 flex justify-center sm:mt-0">
|
||||
<InertiaLink
|
||||
href="#"
|
||||
class="flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
|
||||
>
|
||||
View profile
|
||||
</InertiaLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Menu button -->
|
||||
<div class="absolute right-0 flex-shrink-0 lg:hidden">
|
||||
<!-- Mobile menu button -->
|
||||
<PopoverButton
|
||||
class="bg-transparent p-2 rounded-md inline-flex items-center justify-center text-cyan-200 hover:text-white hover:bg-white hover:bg-opacity-10 focus:outline-none focus:ring-2 focus:ring-white"
|
||||
<div
|
||||
class="border-t border-gray-200 bg-gray-50 grid grid-cols-1 divide-y divide-gray-200 sm:grid-cols-3 sm:divide-y-0 sm:divide-x"
|
||||
>
|
||||
<div
|
||||
v-for="stat in stats"
|
||||
:key="stat.label"
|
||||
class="px-6 py-5 text-sm font-medium text-center"
|
||||
>
|
||||
<span class="sr-only">Open main menu</span>
|
||||
<MenuIcon
|
||||
v-if="!open"
|
||||
class="block h-6 w-6"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<XIcon
|
||||
v-else
|
||||
class="block h-6 w-6"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</PopoverButton>
|
||||
<span class="text-gray-900">{{ stat.value }}</span>
|
||||
{{ ' ' }}
|
||||
<span class="text-gray-600">{{ stat.label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<TransitionRoot
|
||||
as="template"
|
||||
:show="open"
|
||||
>
|
||||
<div class="lg:hidden">
|
||||
<TransitionChild
|
||||
as="template"
|
||||
enter="duration-150 ease-out"
|
||||
enter-from="opacity-0"
|
||||
enter-to="opacity-100"
|
||||
leave="duration-150 ease-in"
|
||||
leave-from="opacity-100"
|
||||
leave-to="opacity-0"
|
||||
<!-- Actions panel -->
|
||||
<section aria-labelledby="quick-links-title">
|
||||
<div
|
||||
class="rounded-lg bg-gray-200 overflow-hidden shadow divide-y divide-gray-200 sm:divide-y-0 sm:grid sm:grid-cols-2 sm:gap-px"
|
||||
>
|
||||
<h2
|
||||
id="quick-links-title"
|
||||
class="sr-only"
|
||||
>
|
||||
<PopoverOverlay class="z-20 fixed inset-0 bg-black bg-opacity-25" />
|
||||
</TransitionChild>
|
||||
|
||||
<TransitionChild
|
||||
as="template"
|
||||
enter="duration-150 ease-out"
|
||||
enter-from="opacity-0 scale-95"
|
||||
enter-to="opacity-100 scale-100"
|
||||
leave="duration-150 ease-in"
|
||||
leave-from="opacity-100 scale-100"
|
||||
leave-to="opacity-0 scale-95"
|
||||
Quick links
|
||||
</h2>
|
||||
<div
|
||||
v-for="(action, actionIdx) in actions"
|
||||
:key="action.name"
|
||||
:class="[actionIdx === 0 ? 'rounded-tl-lg rounded-tr-lg sm:rounded-tr-none' : '', actionIdx === 1 ? 'sm:rounded-tr-lg' : '', actionIdx === actions.length - 2 ? 'sm:rounded-bl-lg' : '', actionIdx === actions.length - 1 ? 'rounded-bl-lg rounded-br-lg sm:rounded-bl-none' : '', 'relative group bg-white p-6 focus-within:ring-2 focus-within:ring-inset focus-within:ring-cyan-500']"
|
||||
>
|
||||
<PopoverPanel
|
||||
focus
|
||||
class="z-30 absolute top-0 inset-x-0 max-w-3xl mx-auto w-full p-2 transition transform origin-top"
|
||||
<div>
|
||||
<span
|
||||
:class="[action.iconBackground, action.iconForeground, 'rounded-lg inline-flex p-3 ring-4 ring-white']"
|
||||
>
|
||||
<component
|
||||
:is="action.icon"
|
||||
class="h-6 w-6"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div class="mt-8">
|
||||
<h3 class="text-lg font-medium">
|
||||
<InertiaLink
|
||||
:href="action.href"
|
||||
class="focus:outline-none"
|
||||
>
|
||||
<!-- Extend touch target to entire panel -->
|
||||
<span
|
||||
class="absolute inset-0"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{{ action.name }}
|
||||
</InertiaLink>
|
||||
</h3>
|
||||
<p class="mt-2 text-sm text-gray-500">
|
||||
Doloribus dolores nostrum quia qui natus officia quod et dolorem. Sit
|
||||
repellendus qui ut at blanditiis et quo et molestiae.
|
||||
</p>
|
||||
</div>
|
||||
<span
|
||||
class="pointer-events-none absolute top-6 right-6 text-gray-300 group-hover:text-gray-400"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<div
|
||||
class="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 bg-white divide-y divide-gray-200"
|
||||
<svg
|
||||
class="h-6 w-6"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<div class="pt-3 pb-2">
|
||||
<div class="flex items-center justify-between px-4">
|
||||
<div>
|
||||
<img
|
||||
class="h-8 w-auto"
|
||||
src="https://tailwindui.com/img/logos/workflow-mark-cyan-600.svg"
|
||||
alt="Workflow"
|
||||
>
|
||||
</div>
|
||||
<div class="-mr-2">
|
||||
<PopoverButton
|
||||
class="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-cyan-500"
|
||||
>
|
||||
<span class="sr-only">Close menu</span>
|
||||
<XIcon
|
||||
class="h-6 w-6"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</PopoverButton>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 px-2 space-y-1">
|
||||
<a
|
||||
v-for="item in navigation"
|
||||
:key="item.name"
|
||||
:href="item.href"
|
||||
class="block rounded-md px-3 py-2 text-base text-gray-900 font-medium hover:bg-gray-100 hover:text-gray-800"
|
||||
>
|
||||
{{ item.name }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-4 pb-2">
|
||||
<div class="flex items-center px-5">
|
||||
<div class="flex-shrink-0">
|
||||
<img
|
||||
class="h-10 w-10 rounded-full"
|
||||
:src="user.imageUrl"
|
||||
alt=""
|
||||
>
|
||||
</div>
|
||||
<div class="ml-3 min-w-0 flex-1">
|
||||
<div class="text-base font-medium text-gray-800 truncate">
|
||||
{{ user.name }}
|
||||
</div>
|
||||
<div class="text-sm font-medium text-gray-500 truncate">
|
||||
{{ user.email }}
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="ml-auto flex-shrink-0 bg-white p-1 text-gray-400 rounded-full hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500"
|
||||
>
|
||||
<span class="sr-only">View notifications</span>
|
||||
<BellIcon
|
||||
class="h-6 w-6"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div class="mt-3 px-2 space-y-1">
|
||||
<a
|
||||
v-for="item in userNavigation"
|
||||
:key="item.name"
|
||||
:href="item.href"
|
||||
class="block rounded-md px-3 py-2 text-base text-gray-900 font-medium hover:bg-gray-100 hover:text-gray-800"
|
||||
>
|
||||
{{ item.name }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</PopoverPanel>
|
||||
</TransitionChild>
|
||||
<path
|
||||
d="M20 4h1a1 1 0 00-1-1v1zm-1 12a1 1 0 102 0h-2zM8 3a1 1 0 000 2V3zM3.293 19.293a1 1 0 101.414 1.414l-1.414-1.414zM19 4v12h2V4h-2zm1-1H8v2h12V3zm-.707.293l-16 16 1.414 1.414 16-16-1.414-1.414z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</TransitionRoot>
|
||||
</Popover>
|
||||
<main class="-mt-24 pb-8">
|
||||
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:max-w-7xl lg:px-8">
|
||||
<h1 class="sr-only">
|
||||
Profile
|
||||
</h1>
|
||||
<!-- Main 3 column grid -->
|
||||
<div class="grid grid-cols-1 gap-4 items-start lg:grid-cols-3 lg:gap-8">
|
||||
<!-- Left column -->
|
||||
<div class="grid grid-cols-1 gap-4 lg:col-span-2">
|
||||
<!-- Welcome panel -->
|
||||
<section aria-labelledby="profile-overview-title">
|
||||
<div class="rounded-lg bg-white overflow-hidden shadow">
|
||||
<h2
|
||||
id="profile-overview-title"
|
||||
class="sr-only"
|
||||
>
|
||||
Profile Overview
|
||||
</h2>
|
||||
<div class="bg-white p-6">
|
||||
<div class="sm:flex sm:items-center sm:justify-between">
|
||||
<div class="sm:flex sm:space-x-5">
|
||||
<div class="flex-shrink-0">
|
||||
<img
|
||||
class="mx-auto h-20 w-20 rounded-full"
|
||||
:src="user.imageUrl"
|
||||
alt=""
|
||||
>
|
||||
</div>
|
||||
<div class="mt-4 text-center sm:mt-0 sm:pt-1 sm:text-left">
|
||||
<p class="text-sm font-medium text-gray-600">
|
||||
Welcome back,
|
||||
</p>
|
||||
<p class="text-xl font-bold text-gray-900 sm:text-2xl">
|
||||
{{ user.name }}
|
||||
</p>
|
||||
<p class="text-sm font-medium text-gray-600">
|
||||
{{ user.role }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-5 flex justify-center sm:mt-0">
|
||||
<a
|
||||
href="#"
|
||||
class="flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
|
||||
>
|
||||
View profile
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="border-t border-gray-200 bg-gray-50 grid grid-cols-1 divide-y divide-gray-200 sm:grid-cols-3 sm:divide-y-0 sm:divide-x"
|
||||
>
|
||||
<div
|
||||
v-for="stat in stats"
|
||||
:key="stat.label"
|
||||
class="px-6 py-5 text-sm font-medium text-center"
|
||||
>
|
||||
<span class="text-gray-900">{{ stat.value }}</span>
|
||||
{{ ' ' }}
|
||||
<span class="text-gray-600">{{ stat.label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Actions panel -->
|
||||
<section aria-labelledby="quick-links-title">
|
||||
<div
|
||||
class="rounded-lg bg-gray-200 overflow-hidden shadow divide-y divide-gray-200 sm:divide-y-0 sm:grid sm:grid-cols-2 sm:gap-px"
|
||||
<!-- Right column -->
|
||||
<div class="grid grid-cols-1 gap-4">
|
||||
<!-- Announcements -->
|
||||
<section aria-labelledby="announcements-title">
|
||||
<div class="rounded-lg bg-white overflow-hidden shadow">
|
||||
<div class="p-6">
|
||||
<h2
|
||||
id="announcements-title"
|
||||
class="text-base font-medium text-gray-900"
|
||||
>
|
||||
Announcements
|
||||
</h2>
|
||||
<div class="flow-root mt-6">
|
||||
<ul
|
||||
role="list"
|
||||
class="-my-5 divide-y divide-gray-200"
|
||||
>
|
||||
<h2
|
||||
id="quick-links-title"
|
||||
class="sr-only"
|
||||
<li
|
||||
v-for="announcement in announcements"
|
||||
:key="announcement.id"
|
||||
class="py-5"
|
||||
>
|
||||
Quick links
|
||||
</h2>
|
||||
<div
|
||||
v-for="(action, actionIdx) in actions"
|
||||
:key="action.name"
|
||||
:class="[actionIdx === 0 ? 'rounded-tl-lg rounded-tr-lg sm:rounded-tr-none' : '', actionIdx === 1 ? 'sm:rounded-tr-lg' : '', actionIdx === actions.length - 2 ? 'sm:rounded-bl-lg' : '', actionIdx === actions.length - 1 ? 'rounded-bl-lg rounded-br-lg sm:rounded-bl-none' : '', 'relative group bg-white p-6 focus-within:ring-2 focus-within:ring-inset focus-within:ring-cyan-500']"
|
||||
>
|
||||
<div>
|
||||
<span
|
||||
:class="[action.iconBackground, action.iconForeground, 'rounded-lg inline-flex p-3 ring-4 ring-white']"
|
||||
>
|
||||
<component
|
||||
:is="action.icon"
|
||||
class="h-6 w-6"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div class="mt-8">
|
||||
<h3 class="text-lg font-medium">
|
||||
<a
|
||||
:href="action.href"
|
||||
class="focus:outline-none"
|
||||
<div class="relative focus-within:ring-2 focus-within:ring-cyan-500">
|
||||
<h3 class="text-sm font-semibold text-gray-800">
|
||||
<InertiaLink
|
||||
:href="announcement.href"
|
||||
class="hover:underline focus:outline-none"
|
||||
>
|
||||
<!-- Extend touch target to entire panel -->
|
||||
<span
|
||||
class="absolute inset-0"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{{ action.name }}
|
||||
</a>
|
||||
{{ announcement.title }}
|
||||
</InertiaLink>
|
||||
</h3>
|
||||
<p class="mt-2 text-sm text-gray-500">
|
||||
Doloribus dolores nostrum quia qui natus officia quod et dolorem. Sit
|
||||
repellendus qui ut at blanditiis et quo et molestiae.
|
||||
<p class="mt-1 text-sm text-gray-600 line-clamp-2">
|
||||
{{ announcement.preview }}
|
||||
</p>
|
||||
</div>
|
||||
<span
|
||||
class="pointer-events-none absolute top-6 right-6 text-gray-300 group-hover:text-gray-400"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<svg
|
||||
class="h-6 w-6"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M20 4h1a1 1 0 00-1-1v1zm-1 12a1 1 0 102 0h-2zM8 3a1 1 0 000 2V3zM3.293 19.293a1 1 0 101.414 1.414l-1.414-1.414zM19 4v12h2V4h-2zm1-1H8v2h12V3zm-.707.293l-16 16 1.414 1.414 16-16-1.414-1.414z" />
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Right column -->
|
||||
<div class="grid grid-cols-1 gap-4">
|
||||
<!-- Announcements -->
|
||||
<section aria-labelledby="announcements-title">
|
||||
<div class="rounded-lg bg-white overflow-hidden shadow">
|
||||
<div class="p-6">
|
||||
<h2
|
||||
id="announcements-title"
|
||||
class="text-base font-medium text-gray-900"
|
||||
>
|
||||
Announcements
|
||||
</h2>
|
||||
<div class="flow-root mt-6">
|
||||
<ul
|
||||
role="list"
|
||||
class="-my-5 divide-y divide-gray-200"
|
||||
>
|
||||
<li
|
||||
v-for="announcement in announcements"
|
||||
:key="announcement.id"
|
||||
class="py-5"
|
||||
>
|
||||
<div class="relative focus-within:ring-2 focus-within:ring-cyan-500">
|
||||
<h3 class="text-sm font-semibold text-gray-800">
|
||||
<a
|
||||
:href="announcement.href"
|
||||
class="hover:underline focus:outline-none"
|
||||
>
|
||||
<!-- Extend touch target to entire panel -->
|
||||
<span
|
||||
class="absolute inset-0"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{{ announcement.title }}
|
||||
</a>
|
||||
</h3>
|
||||
<p class="mt-1 text-sm text-gray-600 line-clamp-2">
|
||||
{{ announcement.preview }}
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mt-6">
|
||||
<a
|
||||
href="#"
|
||||
class="w-full flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
|
||||
>
|
||||
View all
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Recent Hires -->
|
||||
<section aria-labelledby="recent-hires-title">
|
||||
<div class="rounded-lg bg-white overflow-hidden shadow">
|
||||
<div class="p-6">
|
||||
<h2
|
||||
id="recent-hires-title"
|
||||
class="text-base font-medium text-gray-900"
|
||||
>
|
||||
Recent Hires
|
||||
</h2>
|
||||
<div class="flow-root mt-6">
|
||||
<ul
|
||||
role="list"
|
||||
class="-my-5 divide-y divide-gray-200"
|
||||
>
|
||||
<li
|
||||
v-for="person in recentHires"
|
||||
:key="person.handle"
|
||||
class="py-4"
|
||||
>
|
||||
<div class="flex items-center space-x-4">
|
||||
<div class="flex-shrink-0">
|
||||
<img
|
||||
class="h-8 w-8 rounded-full"
|
||||
:src="person.imageUrl"
|
||||
alt=""
|
||||
>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-sm font-medium text-gray-900 truncate">
|
||||
{{ person.name }}
|
||||
</p>
|
||||
<p class="text-sm text-gray-500 truncate">
|
||||
{{ '@' + person.handle }}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<a
|
||||
:href="person.href"
|
||||
class="inline-flex items-center shadow-sm px-2.5 py-0.5 border border-gray-300 text-sm leading-5 font-medium rounded-full text-gray-700 bg-white hover:bg-gray-50"
|
||||
>
|
||||
View
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mt-6">
|
||||
<a
|
||||
href="#"
|
||||
class="w-full flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
|
||||
>
|
||||
View all
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mt-6">
|
||||
<InertiaLink
|
||||
href="#"
|
||||
class="w-full flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
|
||||
>
|
||||
View all
|
||||
</InertiaLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 lg:max-w-7xl">
|
||||
<div class="border-t border-gray-200 py-8 text-sm text-gray-500 text-center sm:text-left">
|
||||
<span
|
||||
class="block sm:inline"
|
||||
>© 2021 Tailwind Labs Inc.</span> <span class="block sm:inline">All rights reserved.</span>
|
||||
</section>
|
||||
|
||||
<!-- Recent Hires -->
|
||||
<section aria-labelledby="recent-hires-title">
|
||||
<div class="rounded-lg bg-white overflow-hidden shadow">
|
||||
<div class="p-6">
|
||||
<h2
|
||||
id="recent-hires-title"
|
||||
class="text-base font-medium text-gray-900"
|
||||
>
|
||||
Recent Hires
|
||||
</h2>
|
||||
<div class="flow-root mt-6">
|
||||
<ul
|
||||
role="list"
|
||||
class="-my-5 divide-y divide-gray-200"
|
||||
>
|
||||
<li
|
||||
v-for="person in recentHires"
|
||||
:key="person.handle"
|
||||
class="py-4"
|
||||
>
|
||||
<div class="flex items-center space-x-4">
|
||||
<div class="flex-shrink-0">
|
||||
<img
|
||||
class="h-8 w-8 rounded-full"
|
||||
:src="person.imageUrl"
|
||||
alt=""
|
||||
>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-sm font-medium text-gray-900 truncate">
|
||||
{{ person.name }}
|
||||
</p>
|
||||
<p class="text-sm text-gray-500 truncate">
|
||||
{{ '@' + person.handle }}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<InertiaLink
|
||||
:href="person.href"
|
||||
class="inline-flex items-center shadow-sm px-2.5 py-0.5 border border-gray-300 text-sm leading-5 font-medium rounded-full text-gray-700 bg-white hover:bg-gray-50"
|
||||
>
|
||||
View
|
||||
</InertiaLink>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mt-6">
|
||||
<InertiaLink
|
||||
href="#"
|
||||
class="w-full flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
|
||||
>
|
||||
View all
|
||||
</InertiaLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
Menu,
|
||||
MenuButton,
|
||||
MenuItem,
|
||||
MenuItems,
|
||||
Popover,
|
||||
PopoverButton,
|
||||
PopoverOverlay,
|
||||
PopoverPanel,
|
||||
TransitionChild,
|
||||
TransitionRoot,
|
||||
} from '@headlessui/vue';
|
||||
import {
|
||||
AcademicCapIcon,
|
||||
BadgeCheckIcon,
|
||||
BellIcon,
|
||||
CashIcon,
|
||||
ClockIcon,
|
||||
MenuIcon,
|
||||
ReceiptRefundIcon,
|
||||
UsersIcon,
|
||||
XIcon,
|
||||
} from '@heroicons/vue/outline';
|
||||
import {SearchIcon} from '@heroicons/vue/solid';
|
||||
|
||||
const user = {
|
||||
name: 'Chelsea Hagon',
|
||||
email: 'chelseahagon@example.com',
|
||||
role: 'Human Resources Manager',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
|
||||
};
|
||||
const navigation = [
|
||||
{name: 'Home', href: '#', current: true},
|
||||
{name: 'Profile', href: '#', current: false},
|
||||
{name: 'Resources', href: '#', current: false},
|
||||
{name: 'Company Directory', href: '#', current: false},
|
||||
{name: 'Openings', href: '#', current: false},
|
||||
];
|
||||
const userNavigation = [
|
||||
{name: 'Your Profile', href: '#'},
|
||||
{name: 'Settings', href: '#'},
|
||||
{name: 'Sign out', href: '#'},
|
||||
];
|
||||
const stats = [
|
||||
{label: 'Vacation days left', value: 12},
|
||||
{label: 'Sick days left', value: 4},
|
||||
{label: 'Personal days left', value: 2},
|
||||
];
|
||||
const actions = [
|
||||
{
|
||||
icon: ClockIcon,
|
||||
name: 'Request time off',
|
||||
href: '#',
|
||||
iconForeground: 'text-teal-700',
|
||||
iconBackground: 'bg-teal-50',
|
||||
},
|
||||
{
|
||||
icon: BadgeCheckIcon,
|
||||
name: 'Benefits',
|
||||
href: '#',
|
||||
iconForeground: 'text-purple-700',
|
||||
iconBackground: 'bg-purple-50',
|
||||
},
|
||||
{
|
||||
icon: UsersIcon,
|
||||
name: 'Schedule a one-on-one',
|
||||
href: '#',
|
||||
iconForeground: 'text-sky-700',
|
||||
iconBackground: 'bg-sky-50',
|
||||
},
|
||||
{icon: CashIcon, name: 'Payroll', href: '#', iconForeground: 'text-yellow-700', iconBackground: 'bg-yellow-50'},
|
||||
{
|
||||
icon: ReceiptRefundIcon,
|
||||
name: 'Submit an expense',
|
||||
href: '#',
|
||||
iconForeground: 'text-rose-700',
|
||||
iconBackground: 'bg-rose-50',
|
||||
},
|
||||
{
|
||||
icon: AcademicCapIcon,
|
||||
name: 'Training',
|
||||
href: '#',
|
||||
iconForeground: 'text-indigo-700',
|
||||
iconBackground: 'bg-indigo-50',
|
||||
},
|
||||
];
|
||||
const recentHires = [
|
||||
{
|
||||
name: 'Leonard Krasner',
|
||||
handle: 'leonardkrasner',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1519345182560-3f2917c472ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
|
||||
href: '#',
|
||||
},
|
||||
{
|
||||
name: 'Floyd Miles',
|
||||
handle: 'floydmiles',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1463453091185-61582044d556?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
|
||||
href: '#',
|
||||
},
|
||||
{
|
||||
name: 'Emily Selman',
|
||||
handle: 'emilyselman',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
|
||||
href: '#',
|
||||
},
|
||||
{
|
||||
name: 'Kristin Watson',
|
||||
handle: 'kristinwatson',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1500917293891-ef795e70e1f6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
|
||||
href: '#',
|
||||
},
|
||||
];
|
||||
const announcements = [
|
||||
{
|
||||
id: 1,
|
||||
title: 'Office closed on July 2nd',
|
||||
href: '#',
|
||||
preview:
|
||||
'Cum qui rem deleniti. Suscipit in dolor veritatis sequi aut. Vero ut earum quis deleniti. Ut a sunt eum cum ut repudiandae possimus. Nihil ex tempora neque cum consectetur dolores.',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'New password policy',
|
||||
href: '#',
|
||||
preview:
|
||||
'Alias inventore ut autem optio voluptas et repellendus. Facere totam quaerat quam quo laudantium cumque eaque excepturi vel. Accusamus maxime ipsam reprehenderit rerum id repellendus rerum. Culpa cum vel natus. Est sit autem mollitia.',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'Office closed on July 2nd',
|
||||
href: '#',
|
||||
preview:
|
||||
'Tenetur libero voluptatem rerum occaecati qui est molestiae exercitationem. Voluptate quisquam iure assumenda consequatur ex et recusandae. Alias consectetur voluptatibus. Accusamus a ab dicta et. Consequatur quis dignissimos voluptatem nisi.',
|
||||
},
|
||||
];
|
||||
import {computed} from 'vue';
|
||||
import {usePage} from '@inertiajs/inertia-vue3';
|
||||
|
||||
export default {
|
||||
name: 'Dashboard',
|
||||
components: {
|
||||
Menu,
|
||||
MenuButton,
|
||||
MenuItem,
|
||||
MenuItems,
|
||||
Popover,
|
||||
PopoverButton,
|
||||
PopoverOverlay,
|
||||
PopoverPanel,
|
||||
TransitionChild,
|
||||
TransitionRoot,
|
||||
BellIcon,
|
||||
MenuIcon,
|
||||
SearchIcon,
|
||||
XIcon,
|
||||
},
|
||||
setup() {
|
||||
const user = computed(() => usePage().props.value.auth.user);
|
||||
const stats = [
|
||||
{label: 'Vacation days left', value: 12},
|
||||
{label: 'Sick days left', value: 4},
|
||||
{label: 'Personal days left', value: 2},
|
||||
];
|
||||
const actions = [
|
||||
{
|
||||
icon: ClockIcon,
|
||||
name: 'Request time off',
|
||||
href: '#',
|
||||
iconForeground: 'text-teal-700',
|
||||
iconBackground: 'bg-teal-50',
|
||||
},
|
||||
{
|
||||
icon: BadgeCheckIcon,
|
||||
name: 'Benefits',
|
||||
href: '#',
|
||||
iconForeground: 'text-purple-700',
|
||||
iconBackground: 'bg-purple-50',
|
||||
},
|
||||
{
|
||||
icon: UsersIcon,
|
||||
name: 'Schedule a one-on-one',
|
||||
href: '#',
|
||||
iconForeground: 'text-sky-700',
|
||||
iconBackground: 'bg-sky-50',
|
||||
},
|
||||
{
|
||||
icon: CashIcon,
|
||||
name: 'Payroll',
|
||||
href: '#',
|
||||
iconForeground: 'text-yellow-700',
|
||||
iconBackground: 'bg-yellow-50'
|
||||
},
|
||||
{
|
||||
icon: ReceiptRefundIcon,
|
||||
name: 'Submit an expense',
|
||||
href: '#',
|
||||
iconForeground: 'text-rose-700',
|
||||
iconBackground: 'bg-rose-50',
|
||||
},
|
||||
{
|
||||
icon: AcademicCapIcon,
|
||||
name: 'Training',
|
||||
href: '#',
|
||||
iconForeground: 'text-indigo-700',
|
||||
iconBackground: 'bg-indigo-50',
|
||||
},
|
||||
];
|
||||
const recentHires = [
|
||||
{
|
||||
name: 'Leonard Krasner',
|
||||
handle: 'leonardkrasner',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1519345182560-3f2917c472ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
|
||||
href: '#',
|
||||
},
|
||||
{
|
||||
name: 'Floyd Miles',
|
||||
handle: 'floydmiles',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1463453091185-61582044d556?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
|
||||
href: '#',
|
||||
},
|
||||
{
|
||||
name: 'Emily Selman',
|
||||
handle: 'emilyselman',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
|
||||
href: '#',
|
||||
},
|
||||
{
|
||||
name: 'Kristin Watson',
|
||||
handle: 'kristinwatson',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1500917293891-ef795e70e1f6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
|
||||
href: '#',
|
||||
},
|
||||
];
|
||||
const announcements = [
|
||||
{
|
||||
id: 1,
|
||||
title: 'Office closed on July 2nd',
|
||||
href: '#',
|
||||
preview:
|
||||
'Cum qui rem deleniti. Suscipit in dolor veritatis sequi aut. Vero ut earum quis deleniti. Ut a sunt eum cum ut repudiandae possimus. Nihil ex tempora neque cum consectetur dolores.',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'New password policy',
|
||||
href: '#',
|
||||
preview:
|
||||
'Alias inventore ut autem optio voluptas et repellendus. Facere totam quaerat quam quo laudantium cumque eaque excepturi vel. Accusamus maxime ipsam reprehenderit rerum id repellendus rerum. Culpa cum vel natus. Est sit autem mollitia.',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'Office closed on July 2nd',
|
||||
href: '#',
|
||||
preview:
|
||||
'Tenetur libero voluptatem rerum occaecati qui est molestiae exercitationem. Voluptate quisquam iure assumenda consequatur ex et recusandae. Alias consectetur voluptatibus. Accusamus a ab dicta et. Consequatur quis dignissimos voluptatem nisi.',
|
||||
},
|
||||
];
|
||||
|
||||
return {
|
||||
user,
|
||||
navigation,
|
||||
userNavigation,
|
||||
stats,
|
||||
actions,
|
||||
recentHires,
|
||||
|
||||
19
resources/js/Shared/Layout.vue
Normal file
19
resources/js/Shared/Layout.vue
Normal file
@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<div class="min-h-full">
|
||||
<MainMenu />
|
||||
<main class="-mt-24 pb-8">
|
||||
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:max-w-7xl lg:px-8">
|
||||
<slot />
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MainMenu from '@/Shared/MainMenu';
|
||||
|
||||
export default {
|
||||
name: 'Layout',
|
||||
components: {MainMenu},
|
||||
};
|
||||
</script>
|
||||
285
resources/js/Shared/MainMenu.vue
Normal file
285
resources/js/Shared/MainMenu.vue
Normal file
@ -0,0 +1,285 @@
|
||||
<template>
|
||||
<Popover
|
||||
v-slot="{ open }"
|
||||
as="header"
|
||||
class="pb-24 bg-gradient-to-r from-blumilk-500 to-blumilk-600"
|
||||
>
|
||||
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:max-w-7xl lg:px-8">
|
||||
<div class="relative flex flex-wrap items-center justify-center lg:justify-between">
|
||||
<!-- Logo -->
|
||||
<div class="absolute left-0 py-5 flex-shrink-0 lg:static">
|
||||
<InertiaLink href="/">
|
||||
<img
|
||||
class="h-8 w-auto"
|
||||
src="/img/logo.png"
|
||||
alt="Workflow"
|
||||
>
|
||||
</InertiaLink>
|
||||
</div>
|
||||
|
||||
<!-- Right section on desktop -->
|
||||
<div class="hidden lg:ml-4 lg:flex lg:items-center lg:py-5 lg:pr-0.5">
|
||||
<button
|
||||
type="button"
|
||||
class="flex-shrink-0 p-1 text-cyan-200 rounded-full hover:text-white hover:bg-white hover:bg-opacity-10 focus:outline-none focus:ring-2 focus:ring-white"
|
||||
>
|
||||
<span class="sr-only">View notifications</span>
|
||||
<BellIcon
|
||||
class="h-6 w-6"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
|
||||
<!-- Profile dropdown -->
|
||||
<Menu
|
||||
as="div"
|
||||
class="ml-4 relative flex-shrink-0"
|
||||
>
|
||||
<div>
|
||||
<MenuButton
|
||||
class="bg-white rounded-full flex text-sm ring-2 ring-white ring-opacity-20 focus:outline-none focus:ring-opacity-100"
|
||||
>
|
||||
<span class="sr-only">Open user menu</span>
|
||||
<img
|
||||
class="h-8 w-8 rounded-full"
|
||||
:src="user.imageUrl"
|
||||
alt=""
|
||||
>
|
||||
</MenuButton>
|
||||
</div>
|
||||
<transition
|
||||
leave-active-class="transition ease-in duration-75"
|
||||
leave-from-class="transform opacity-100 scale-100"
|
||||
leave-to-class="transform opacity-0 scale-95"
|
||||
>
|
||||
<MenuItems
|
||||
class="origin-top-right z-40 absolute -right-2 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none"
|
||||
>
|
||||
<MenuItem
|
||||
v-for="item in userNavigation"
|
||||
:key="item.name"
|
||||
v-slot="{ active }"
|
||||
>
|
||||
<InertiaLink
|
||||
:href="item.href"
|
||||
:class="[active ? 'bg-gray-100' : '', 'block px-4 py-2 text-sm text-gray-700']"
|
||||
>
|
||||
{{ item.name }}
|
||||
</InertiaLink>
|
||||
</MenuItem>
|
||||
</MenuItems>
|
||||
</transition>
|
||||
</Menu>
|
||||
</div>
|
||||
|
||||
<div class="w-full py-5 lg:border-t lg:border-white lg:border-opacity-20">
|
||||
<div class="lg:items-center">
|
||||
<div class="hidden lg:block">
|
||||
<nav class="flex space-x-4">
|
||||
<InertiaLink
|
||||
v-for="item in navigation"
|
||||
:key="item.name"
|
||||
:href="item.href"
|
||||
:class="[item.current ? 'text-white' : 'text-cyan-100', 'text-sm font-medium rounded-md bg-white bg-opacity-0 px-3 py-2 hover:bg-opacity-10']"
|
||||
:aria-current="item.current ? 'page' : undefined"
|
||||
>
|
||||
{{ item.name }}
|
||||
</InertiaLink>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Menu button -->
|
||||
<div class="absolute right-0 flex-shrink-0 lg:hidden">
|
||||
<!-- Mobile menu button -->
|
||||
<PopoverButton
|
||||
class="bg-transparent p-2 rounded-md inline-flex items-center justify-center text-cyan-200 hover:text-white hover:bg-white hover:bg-opacity-10 focus:outline-none focus:ring-2 focus:ring-white"
|
||||
>
|
||||
<span class="sr-only">Open main menu</span>
|
||||
<MenuIcon
|
||||
v-if="!open"
|
||||
class="block h-6 w-6"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<XIcon
|
||||
v-else
|
||||
class="block h-6 w-6"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</PopoverButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<TransitionRoot
|
||||
as="template"
|
||||
:show="open"
|
||||
>
|
||||
<div class="lg:hidden">
|
||||
<TransitionChild
|
||||
as="template"
|
||||
enter="duration-150 ease-out"
|
||||
enter-from="opacity-0"
|
||||
enter-to="opacity-100"
|
||||
leave="duration-150 ease-in"
|
||||
leave-from="opacity-100"
|
||||
leave-to="opacity-0"
|
||||
>
|
||||
<PopoverOverlay class="z-20 fixed inset-0 bg-black bg-opacity-25" />
|
||||
</TransitionChild>
|
||||
|
||||
<TransitionChild
|
||||
as="template"
|
||||
enter="duration-150 ease-out"
|
||||
enter-from="opacity-0 scale-95"
|
||||
enter-to="opacity-100 scale-100"
|
||||
leave="duration-150 ease-in"
|
||||
leave-from="opacity-100 scale-100"
|
||||
leave-to="opacity-0 scale-95"
|
||||
>
|
||||
<PopoverPanel
|
||||
focus
|
||||
class="z-30 absolute top-0 inset-x-0 max-w-3xl mx-auto w-full p-2 transition transform origin-top"
|
||||
>
|
||||
<div
|
||||
class="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 bg-white divide-y divide-gray-200"
|
||||
>
|
||||
<div class="pt-3 pb-2">
|
||||
<div class="flex items-center justify-between px-4">
|
||||
<div>
|
||||
<img
|
||||
class="h-8 w-auto"
|
||||
src="https://tailwindui.com/img/logos/workflow-mark-cyan-600.svg"
|
||||
alt="Workflow"
|
||||
>
|
||||
</div>
|
||||
<div class="-mr-2">
|
||||
<PopoverButton
|
||||
class="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-cyan-500"
|
||||
>
|
||||
<span class="sr-only">Close menu</span>
|
||||
<XIcon
|
||||
class="h-6 w-6"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</PopoverButton>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 px-2 space-y-1">
|
||||
<InertiaLink
|
||||
v-for="item in navigation"
|
||||
:key="item.name"
|
||||
:href="item.href"
|
||||
class="block rounded-md px-3 py-2 text-base text-gray-900 font-medium hover:bg-gray-100 hover:text-gray-800"
|
||||
>
|
||||
{{ item.name }}
|
||||
</InertiaLink>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-4 pb-2">
|
||||
<div class="flex items-center px-5">
|
||||
<div class="flex-shrink-0">
|
||||
<img
|
||||
class="h-10 w-10 rounded-full"
|
||||
:src="user.imageUrl"
|
||||
alt=""
|
||||
>
|
||||
</div>
|
||||
<div class="ml-3 min-w-0 flex-1">
|
||||
<div class="text-base font-medium text-gray-800 truncate">
|
||||
{{ user.name }}
|
||||
</div>
|
||||
<div class="text-sm font-medium text-gray-500 truncate">
|
||||
{{ user.email }}
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="ml-auto flex-shrink-0 bg-white p-1 text-gray-400 rounded-full hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500"
|
||||
>
|
||||
<span class="sr-only">View notifications</span>
|
||||
<BellIcon
|
||||
class="h-6 w-6"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div class="mt-3 px-2 space-y-1">
|
||||
<InertiaLink
|
||||
v-for="item in userNavigation"
|
||||
:key="item.name"
|
||||
:href="item.href"
|
||||
class="block rounded-md px-3 py-2 text-base text-gray-900 font-medium hover:bg-gray-100 hover:text-gray-800"
|
||||
>
|
||||
{{ item.name }}
|
||||
</InertiaLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</PopoverPanel>
|
||||
</TransitionChild>
|
||||
</div>
|
||||
</TransitionRoot>
|
||||
</Popover>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
Menu,
|
||||
MenuButton,
|
||||
MenuItem,
|
||||
MenuItems,
|
||||
Popover,
|
||||
PopoverButton,
|
||||
PopoverOverlay,
|
||||
PopoverPanel,
|
||||
TransitionChild,
|
||||
TransitionRoot
|
||||
} from '@headlessui/vue';
|
||||
import {BellIcon, MenuIcon, XIcon} from '@heroicons/vue/outline';
|
||||
import {computed} from 'vue';
|
||||
import {usePage} from '@inertiajs/inertia-vue3';
|
||||
|
||||
export default {
|
||||
name: 'MainMenu',
|
||||
components: {
|
||||
Menu,
|
||||
MenuButton,
|
||||
MenuItem,
|
||||
MenuItems,
|
||||
Popover,
|
||||
PopoverButton,
|
||||
PopoverOverlay,
|
||||
PopoverPanel,
|
||||
TransitionChild,
|
||||
TransitionRoot,
|
||||
BellIcon,
|
||||
MenuIcon,
|
||||
XIcon,
|
||||
},
|
||||
setup() {
|
||||
const user = computed(() => usePage().props.value.auth.user);
|
||||
const navigation = [
|
||||
{name: 'Home', href: '/', current: true},
|
||||
{name: 'Profile', href: '#', current: false},
|
||||
{name: 'Resources', href: '#', current: false},
|
||||
{name: 'Company Directory', href: '#', current: false},
|
||||
{name: 'Openings', href: '#', current: false},
|
||||
];
|
||||
const userNavigation = [
|
||||
{name: 'Your Profile', href: '#'},
|
||||
{name: 'Settings', href: '#'},
|
||||
{name: 'Sign out', href: '#'},
|
||||
];
|
||||
|
||||
return {
|
||||
user,
|
||||
navigation,
|
||||
userNavigation,
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
@ -1,14 +1,24 @@
|
||||
import {createApp, h} from 'vue';
|
||||
import {createInertiaApp} from '@inertiajs/inertia-vue3';
|
||||
import {createInertiaApp, Head, Link} from '@inertiajs/inertia-vue3';
|
||||
import {InertiaProgress} from '@inertiajs/progress';
|
||||
import Layout from '@/Shared/Layout';
|
||||
|
||||
createInertiaApp({
|
||||
resolve: name => require(`./Pages/${name}`),
|
||||
resolve: name => {
|
||||
const page = require(`./Pages/${name}`).default;
|
||||
|
||||
page.layout = page.layout || Layout;
|
||||
|
||||
return page;
|
||||
},
|
||||
setup({el, App, props, plugin}) {
|
||||
createApp({render: () => h(App, props)})
|
||||
.use(plugin)
|
||||
.component('InertiaLink', Link)
|
||||
.component('InertiaHead', Head)
|
||||
.mount(el);
|
||||
},
|
||||
title: title => `${title} - Toby`,
|
||||
});
|
||||
|
||||
InertiaProgress.init();
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
|
||||
<link rel="icon" href="/img/icon.png">
|
||||
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
|
||||
<link href="{{ asset('/css/app.css') }}" rel="stylesheet"/>
|
||||
<script src="{{ asset('/js/app.js') }}" defer></script>
|
||||
|
||||
@ -9,6 +9,20 @@ module.exports = {
|
||||
fontFamily: {
|
||||
sans: ['Inter var', ...defaultTheme.fontFamily.sans],
|
||||
},
|
||||
colors: {
|
||||
'blumilk': {
|
||||
'50': '#D5DFEE',
|
||||
'100': '#C7D4E9',
|
||||
'200': '#AABDDD',
|
||||
'300': '#8CA7D1',
|
||||
'400': '#6F90C6',
|
||||
'500': '#527ABA',
|
||||
'600': '#3C5F97',
|
||||
'700': '#2C466F',
|
||||
'800': '#1C2D47',
|
||||
'900': '#0C141F'
|
||||
},
|
||||
}
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user