* #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
|
public function share(Request $request): array
|
||||||
{
|
{
|
||||||
return array_merge(parent::share($request), [
|
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() => [
|
"flash" => fn() => [
|
||||||
"success" => $request->session()->get("success"),
|
"success" => $request->session()->get("success"),
|
||||||
"error" => $request->session()->get("error"),
|
"error" => $request->session()->get("error"),
|
||||||
|
|||||||
38
composer.lock
generated
38
composer.lock
generated
@ -290,32 +290,28 @@
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "doctrine/lexer",
|
"name": "doctrine/lexer",
|
||||||
"version": "1.2.1",
|
"version": "1.2.2",
|
||||||
"source": {
|
"source": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
"url": "https://github.com/doctrine/lexer.git",
|
"url": "https://github.com/doctrine/lexer.git",
|
||||||
"reference": "e864bbf5904cb8f5bb334f99209b48018522f042"
|
"reference": "9c50f840f257bbb941e6f4a0e94ccf5db5c3f76c"
|
||||||
},
|
},
|
||||||
"dist": {
|
"dist": {
|
||||||
"type": "zip",
|
"type": "zip",
|
||||||
"url": "https://api.github.com/repos/doctrine/lexer/zipball/e864bbf5904cb8f5bb334f99209b48018522f042",
|
"url": "https://api.github.com/repos/doctrine/lexer/zipball/9c50f840f257bbb941e6f4a0e94ccf5db5c3f76c",
|
||||||
"reference": "e864bbf5904cb8f5bb334f99209b48018522f042",
|
"reference": "9c50f840f257bbb941e6f4a0e94ccf5db5c3f76c",
|
||||||
"shasum": ""
|
"shasum": ""
|
||||||
},
|
},
|
||||||
"require": {
|
"require": {
|
||||||
"php": "^7.2 || ^8.0"
|
"php": "^7.1 || ^8.0"
|
||||||
},
|
},
|
||||||
"require-dev": {
|
"require-dev": {
|
||||||
"doctrine/coding-standard": "^6.0",
|
"doctrine/coding-standard": "^9.0",
|
||||||
"phpstan/phpstan": "^0.11.8",
|
"phpstan/phpstan": "1.3",
|
||||||
"phpunit/phpunit": "^8.2"
|
"phpunit/phpunit": "^7.5 || ^8.5 || ^9.5",
|
||||||
|
"vimeo/psalm": "^4.11"
|
||||||
},
|
},
|
||||||
"type": "library",
|
"type": "library",
|
||||||
"extra": {
|
|
||||||
"branch-alias": {
|
|
||||||
"dev-master": "1.2.x-dev"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"autoload": {
|
"autoload": {
|
||||||
"psr-4": {
|
"psr-4": {
|
||||||
"Doctrine\\Common\\Lexer\\": "lib/Doctrine/Common/Lexer"
|
"Doctrine\\Common\\Lexer\\": "lib/Doctrine/Common/Lexer"
|
||||||
@ -350,7 +346,7 @@
|
|||||||
],
|
],
|
||||||
"support": {
|
"support": {
|
||||||
"issues": "https://github.com/doctrine/lexer/issues",
|
"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": [
|
"funding": [
|
||||||
{
|
{
|
||||||
@ -366,7 +362,7 @@
|
|||||||
"type": "tidelift"
|
"type": "tidelift"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"time": "2020-05-25T17:44:05+00:00"
|
"time": "2022-01-12T08:27:12+00:00"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "dragonmantank/cron-expression",
|
"name": "dragonmantank/cron-expression",
|
||||||
@ -6854,16 +6850,16 @@
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "nunomaduro/collision",
|
"name": "nunomaduro/collision",
|
||||||
"version": "v5.10.0",
|
"version": "v5.11.0",
|
||||||
"source": {
|
"source": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
"url": "https://github.com/nunomaduro/collision.git",
|
"url": "https://github.com/nunomaduro/collision.git",
|
||||||
"reference": "3004cfa49c022183395eabc6d0e5207dfe498d00"
|
"reference": "8b610eef8582ccdc05d8f2ab23305e2d37049461"
|
||||||
},
|
},
|
||||||
"dist": {
|
"dist": {
|
||||||
"type": "zip",
|
"type": "zip",
|
||||||
"url": "https://api.github.com/repos/nunomaduro/collision/zipball/3004cfa49c022183395eabc6d0e5207dfe498d00",
|
"url": "https://api.github.com/repos/nunomaduro/collision/zipball/8b610eef8582ccdc05d8f2ab23305e2d37049461",
|
||||||
"reference": "3004cfa49c022183395eabc6d0e5207dfe498d00",
|
"reference": "8b610eef8582ccdc05d8f2ab23305e2d37049461",
|
||||||
"shasum": ""
|
"shasum": ""
|
||||||
},
|
},
|
||||||
"require": {
|
"require": {
|
||||||
@ -6925,7 +6921,7 @@
|
|||||||
},
|
},
|
||||||
"funding": [
|
"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"
|
"type": "custom"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -6937,7 +6933,7 @@
|
|||||||
"type": "patreon"
|
"type": "patreon"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"time": "2021-09-20T15:06:32+00:00"
|
"time": "2022-01-10T16:22:52+00:00"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "nunomaduro/larastan",
|
"name": "nunomaduro/larastan",
|
||||||
|
|||||||
16
package-lock.json
generated
16
package-lock.json
generated
@ -8451,9 +8451,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/tailwindcss": {
|
"node_modules/tailwindcss": {
|
||||||
"version": "3.0.12",
|
"version": "3.0.13",
|
||||||
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.0.12.tgz",
|
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.0.13.tgz",
|
||||||
"integrity": "sha512-VqhF86z2c34sJyS5ZS8Q2nYuN0KzqZw1GGsuQQO9kJ3mY1oG7Fsag0vICkxUVXk6P+1sUkTkjMjKWCjEF0hNHw==",
|
"integrity": "sha512-raRPGFwQSGXn/3h0ttHND9jyPYfqk/ur2NXtlQuK25+ZnrCjlH1s1j4/oPswHGMoZzGNykUVycZ/LcROanUE0A==",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"arg": "^5.0.1",
|
"arg": "^5.0.1",
|
||||||
"chalk": "^4.1.2",
|
"chalk": "^4.1.2",
|
||||||
@ -8474,7 +8474,7 @@
|
|||||||
"postcss-selector-parser": "^6.0.8",
|
"postcss-selector-parser": "^6.0.8",
|
||||||
"postcss-value-parser": "^4.2.0",
|
"postcss-value-parser": "^4.2.0",
|
||||||
"quick-lru": "^5.1.1",
|
"quick-lru": "^5.1.1",
|
||||||
"resolve": "^1.20.0"
|
"resolve": "^1.21.0"
|
||||||
},
|
},
|
||||||
"bin": {
|
"bin": {
|
||||||
"tailwind": "lib/cli.js",
|
"tailwind": "lib/cli.js",
|
||||||
@ -15646,9 +15646,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"tailwindcss": {
|
"tailwindcss": {
|
||||||
"version": "3.0.12",
|
"version": "3.0.13",
|
||||||
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.0.12.tgz",
|
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.0.13.tgz",
|
||||||
"integrity": "sha512-VqhF86z2c34sJyS5ZS8Q2nYuN0KzqZw1GGsuQQO9kJ3mY1oG7Fsag0vICkxUVXk6P+1sUkTkjMjKWCjEF0hNHw==",
|
"integrity": "sha512-raRPGFwQSGXn/3h0ttHND9jyPYfqk/ur2NXtlQuK25+ZnrCjlH1s1j4/oPswHGMoZzGNykUVycZ/LcROanUE0A==",
|
||||||
"requires": {
|
"requires": {
|
||||||
"arg": "^5.0.1",
|
"arg": "^5.0.1",
|
||||||
"chalk": "^4.1.2",
|
"chalk": "^4.1.2",
|
||||||
@ -15669,7 +15669,7 @@
|
|||||||
"postcss-selector-parser": "^6.0.8",
|
"postcss-selector-parser": "^6.0.8",
|
||||||
"postcss-value-parser": "^4.2.0",
|
"postcss-value-parser": "^4.2.0",
|
||||||
"quick-lru": "^5.1.1",
|
"quick-lru": "^5.1.1",
|
||||||
"resolve": "^1.20.0"
|
"resolve": "^1.21.0"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"glob-parent": {
|
"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,262 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="min-h-full">
|
<InertiaHead title="Strona główna" />
|
||||||
<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>
|
|
||||||
<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 }"
|
|
||||||
>
|
|
||||||
<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>
|
|
||||||
</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">
|
|
||||||
<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>
|
|
||||||
</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">
|
<div class="grid grid-cols-1 gap-4 items-start lg:grid-cols-3 lg:gap-8">
|
||||||
<!-- Left column -->
|
<!-- Left column -->
|
||||||
<div class="grid grid-cols-1 gap-4 lg:col-span-2">
|
<div class="grid grid-cols-1 gap-4 lg:col-span-2">
|
||||||
@ -292,12 +35,12 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-5 flex justify-center sm:mt-0">
|
<div class="mt-5 flex justify-center sm:mt-0">
|
||||||
<a
|
<InertiaLink
|
||||||
href="#"
|
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"
|
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
|
View profile
|
||||||
</a>
|
</InertiaLink>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -346,7 +89,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="mt-8">
|
<div class="mt-8">
|
||||||
<h3 class="text-lg font-medium">
|
<h3 class="text-lg font-medium">
|
||||||
<a
|
<InertiaLink
|
||||||
:href="action.href"
|
:href="action.href"
|
||||||
class="focus:outline-none"
|
class="focus:outline-none"
|
||||||
>
|
>
|
||||||
@ -356,7 +99,7 @@
|
|||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
/>
|
/>
|
||||||
{{ action.name }}
|
{{ action.name }}
|
||||||
</a>
|
</InertiaLink>
|
||||||
</h3>
|
</h3>
|
||||||
<p class="mt-2 text-sm text-gray-500">
|
<p class="mt-2 text-sm text-gray-500">
|
||||||
Doloribus dolores nostrum quia qui natus officia quod et dolorem. Sit
|
Doloribus dolores nostrum quia qui natus officia quod et dolorem. Sit
|
||||||
@ -373,7 +116,9 @@
|
|||||||
fill="currentColor"
|
fill="currentColor"
|
||||||
viewBox="0 0 24 24"
|
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" />
|
<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>
|
</svg>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@ -405,7 +150,7 @@
|
|||||||
>
|
>
|
||||||
<div class="relative focus-within:ring-2 focus-within:ring-cyan-500">
|
<div class="relative focus-within:ring-2 focus-within:ring-cyan-500">
|
||||||
<h3 class="text-sm font-semibold text-gray-800">
|
<h3 class="text-sm font-semibold text-gray-800">
|
||||||
<a
|
<InertiaLink
|
||||||
:href="announcement.href"
|
:href="announcement.href"
|
||||||
class="hover:underline focus:outline-none"
|
class="hover:underline focus:outline-none"
|
||||||
>
|
>
|
||||||
@ -415,7 +160,7 @@
|
|||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
/>
|
/>
|
||||||
{{ announcement.title }}
|
{{ announcement.title }}
|
||||||
</a>
|
</InertiaLink>
|
||||||
</h3>
|
</h3>
|
||||||
<p class="mt-1 text-sm text-gray-600 line-clamp-2">
|
<p class="mt-1 text-sm text-gray-600 line-clamp-2">
|
||||||
{{ announcement.preview }}
|
{{ announcement.preview }}
|
||||||
@ -425,12 +170,12 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-6">
|
<div class="mt-6">
|
||||||
<a
|
<InertiaLink
|
||||||
href="#"
|
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"
|
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
|
View all
|
||||||
</a>
|
</InertiaLink>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -473,95 +218,54 @@
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<a
|
<InertiaLink
|
||||||
:href="person.href"
|
: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"
|
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
|
View
|
||||||
</a>
|
</InertiaLink>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-6">
|
<div class="mt-6">
|
||||||
<a
|
<InertiaLink
|
||||||
href="#"
|
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"
|
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
|
View all
|
||||||
</a>
|
</InertiaLink>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</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>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import {
|
|
||||||
Menu,
|
|
||||||
MenuButton,
|
|
||||||
MenuItem,
|
|
||||||
MenuItems,
|
|
||||||
Popover,
|
|
||||||
PopoverButton,
|
|
||||||
PopoverOverlay,
|
|
||||||
PopoverPanel,
|
|
||||||
TransitionChild,
|
|
||||||
TransitionRoot,
|
|
||||||
} from '@headlessui/vue';
|
|
||||||
import {
|
import {
|
||||||
AcademicCapIcon,
|
AcademicCapIcon,
|
||||||
BadgeCheckIcon,
|
BadgeCheckIcon,
|
||||||
BellIcon,
|
|
||||||
CashIcon,
|
CashIcon,
|
||||||
ClockIcon,
|
ClockIcon,
|
||||||
MenuIcon,
|
|
||||||
ReceiptRefundIcon,
|
ReceiptRefundIcon,
|
||||||
UsersIcon,
|
UsersIcon,
|
||||||
XIcon,
|
|
||||||
} from '@heroicons/vue/outline';
|
} from '@heroicons/vue/outline';
|
||||||
import {SearchIcon} from '@heroicons/vue/solid';
|
import {computed} from 'vue';
|
||||||
|
import {usePage} from '@inertiajs/inertia-vue3';
|
||||||
|
|
||||||
const user = {
|
export default {
|
||||||
name: 'Chelsea Hagon',
|
name: 'Dashboard',
|
||||||
email: 'chelseahagon@example.com',
|
setup() {
|
||||||
role: 'Human Resources Manager',
|
const user = computed(() => usePage().props.value.auth.user);
|
||||||
imageUrl:
|
const stats = [
|
||||||
'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: 'Vacation days left', value: 12},
|
||||||
{label: 'Sick days left', value: 4},
|
{label: 'Sick days left', value: 4},
|
||||||
{label: 'Personal days left', value: 2},
|
{label: 'Personal days left', value: 2},
|
||||||
];
|
];
|
||||||
const actions = [
|
const actions = [
|
||||||
{
|
{
|
||||||
icon: ClockIcon,
|
icon: ClockIcon,
|
||||||
name: 'Request time off',
|
name: 'Request time off',
|
||||||
@ -583,7 +287,13 @@ const actions = [
|
|||||||
iconForeground: 'text-sky-700',
|
iconForeground: 'text-sky-700',
|
||||||
iconBackground: 'bg-sky-50',
|
iconBackground: 'bg-sky-50',
|
||||||
},
|
},
|
||||||
{icon: CashIcon, name: 'Payroll', href: '#', iconForeground: 'text-yellow-700', iconBackground: 'bg-yellow-50'},
|
{
|
||||||
|
icon: CashIcon,
|
||||||
|
name: 'Payroll',
|
||||||
|
href: '#',
|
||||||
|
iconForeground: 'text-yellow-700',
|
||||||
|
iconBackground: 'bg-yellow-50'
|
||||||
|
},
|
||||||
{
|
{
|
||||||
icon: ReceiptRefundIcon,
|
icon: ReceiptRefundIcon,
|
||||||
name: 'Submit an expense',
|
name: 'Submit an expense',
|
||||||
@ -598,8 +308,8 @@ const actions = [
|
|||||||
iconForeground: 'text-indigo-700',
|
iconForeground: 'text-indigo-700',
|
||||||
iconBackground: 'bg-indigo-50',
|
iconBackground: 'bg-indigo-50',
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
const recentHires = [
|
const recentHires = [
|
||||||
{
|
{
|
||||||
name: 'Leonard Krasner',
|
name: 'Leonard Krasner',
|
||||||
handle: 'leonardkrasner',
|
handle: 'leonardkrasner',
|
||||||
@ -628,8 +338,8 @@ const recentHires = [
|
|||||||
'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',
|
'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: '#',
|
href: '#',
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
const announcements = [
|
const announcements = [
|
||||||
{
|
{
|
||||||
id: 1,
|
id: 1,
|
||||||
title: 'Office closed on July 2nd',
|
title: 'Office closed on July 2nd',
|
||||||
@ -651,31 +361,10 @@ const announcements = [
|
|||||||
preview:
|
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.',
|
'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.',
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'Dashboard',
|
|
||||||
components: {
|
|
||||||
Menu,
|
|
||||||
MenuButton,
|
|
||||||
MenuItem,
|
|
||||||
MenuItems,
|
|
||||||
Popover,
|
|
||||||
PopoverButton,
|
|
||||||
PopoverOverlay,
|
|
||||||
PopoverPanel,
|
|
||||||
TransitionChild,
|
|
||||||
TransitionRoot,
|
|
||||||
BellIcon,
|
|
||||||
MenuIcon,
|
|
||||||
SearchIcon,
|
|
||||||
XIcon,
|
|
||||||
},
|
|
||||||
setup() {
|
|
||||||
return {
|
return {
|
||||||
user,
|
user,
|
||||||
navigation,
|
|
||||||
userNavigation,
|
|
||||||
stats,
|
stats,
|
||||||
actions,
|
actions,
|
||||||
recentHires,
|
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 {createApp, h} from 'vue';
|
||||||
import {createInertiaApp} from '@inertiajs/inertia-vue3';
|
import {createInertiaApp, Head, Link} from '@inertiajs/inertia-vue3';
|
||||||
import {InertiaProgress} from '@inertiajs/progress';
|
import {InertiaProgress} from '@inertiajs/progress';
|
||||||
|
import Layout from '@/Shared/Layout';
|
||||||
|
|
||||||
createInertiaApp({
|
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}) {
|
setup({el, App, props, plugin}) {
|
||||||
createApp({render: () => h(App, props)})
|
createApp({render: () => h(App, props)})
|
||||||
.use(plugin)
|
.use(plugin)
|
||||||
|
.component('InertiaLink', Link)
|
||||||
|
.component('InertiaHead', Head)
|
||||||
.mount(el);
|
.mount(el);
|
||||||
},
|
},
|
||||||
|
title: title => `${title} - Toby`,
|
||||||
});
|
});
|
||||||
|
|
||||||
InertiaProgress.init();
|
InertiaProgress.init();
|
||||||
|
|||||||
@ -3,6 +3,7 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8"/>
|
<meta charset="utf-8"/>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
|
<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 rel="stylesheet" href="https://rsms.me/inter/inter.css">
|
||||||
<link href="{{ asset('/css/app.css') }}" rel="stylesheet"/>
|
<link href="{{ asset('/css/app.css') }}" rel="stylesheet"/>
|
||||||
<script src="{{ asset('/js/app.js') }}" defer></script>
|
<script src="{{ asset('/js/app.js') }}" defer></script>
|
||||||
|
|||||||
@ -9,6 +9,20 @@ module.exports = {
|
|||||||
fontFamily: {
|
fontFamily: {
|
||||||
sans: ['Inter var', ...defaultTheme.fontFamily.sans],
|
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: [
|
plugins: [
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user