-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathapp.vue
81 lines (80 loc) · 6.04 KB
/
app.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<template>
<div>
<aside class="bg-white fixed max-lg:inset-x-0 lg:inset-y-0 z-50 lg:w-72 lg:h-screen overflow-hidden px-6 pt-2 lg:pt-8 max-lg:pb-2 max-lg:border-b lg:border-r max-lg:shadow-sm flex max-lg:justify-between lg:flex-col gap-12">
<a href="/" class="w-[140px] lg:w-3/4 h-auto">
<svg width="100%" height="100%" viewBox="0 0 370.30769230769226 65.10369641791941" class="looka-1j8o68f">
<defs id="SvgjsDefs3360"></defs>
<g id="SvgjsG3361" featurekey="symbolFeature-0"
transform="matrix(1.1708663609525596,0,0,1.1708663609525596,-4.69748355627457,-25.991525669927096)"
fill="#f8b500">
<g xmlns="http://www.w3.org/2000/svg">
<path
d="M28.596,55.417c-5.494,2.677-11.497,5.185-13.734,4.532c-0.582-0.168-1.535-0.657-2.353-0.959 c-1.702-0.622-3.8-0.377-6.158,1.42c-3.743,2.862-2.195,6.034-0.823,9.354c0.467-0.328,0.889-1.681,1.556-1.296 c1.633,2.928-3.404,6.881,0.497,8.956c2.649,1.41,5.964-1.402,9.421-3.938c4.817-3.529,10.315-5.052,15.181-6.212 c-0.953-1.332-1.791-2.996-2.45-4.934C29.028,60.268,28.515,57.719,28.596,55.417z">
</path>
<path
d="M95.759,46.991c0.201-1.12,0.225-2.209,0.229-3.336c0.013-1.561-0.196-3.115-0.59-4.622 c-0.828-3.158-2.328-6.271-4.393-8.806c-1-1.228-2.145-2.272-3.383-3.196c-1.702-1.262-3.587-2.297-5.531-3.251 c-4.2-2.06-8.84-1.741-13.339-1.082c-3.927,0.577-8.737,3.352-12.354,6.634c-4.685,4.247-7.898,10.14-11.749,14.156 c-2.616,2.724-10.572,7.27-11.771,7.756c-0.327,0.161-0.744,0.457-1.15,0.887c-0.005,0.006-0.008,0.013-0.013,0.018 c-1.353,1.503-1.344,5.502,0.019,9.51c1.187,3.489,3.055,6.054,4.889,6.8c0.041,0.005,0.074,0.009,0.097,0.01 c3.99-1.287,5.549-1.406,8.495-2.126c1.715-0.42,4.099-0.223,6.194-0.015c4.852,0.497,12.93-0.038,13.443-0.862 c0.617-0.704,0.426-0.426,0.358-1.868c-0.121-2.638,3.239-5.15,6.947-5.571c0.472-2.407,2.684-4.069,4.888-4.528 c1.631-0.34,3.125-0.045,4.217,0.757c0.346-0.531,0.822-0.997,1.433-1.366c1.061-0.64,2.511-1.002,4.088-1.018 c2.546-0.026,2.173,0.19,4.83,1.971C93.183,54.892,95.307,49.497,95.759,46.991z M64.312,30.1c-5.196,2.743-8.592,7.259-8.83,6.807 c-0.238-0.453,3.172-5.725,8.369-8.468c5.196-2.743,10.21-1.919,10.449-1.467C74.539,27.425,69.509,27.356,64.312,30.1z">
</path>
</g>
</g>
<g id="SvgjsG3362" featurekey="nameFeature-0"
transform="matrix(1.6416509640098238,0,0,1.6416509640098238,121.43339692676088,-10.699811568117887)"
fill="#634215">
<path
d="M20.4 40 l-13.6 -23 l-0.2 0 l0.4 5.2 l0 17.8 l-3 0 l0 -28 l3.2 0 l13.6 23 l0.2 0 l-0.4 -5.2 l0 -17.8 l3 0 l0 28 l-3.2 0 z M44.6 40.4 l-6 0 c-4.2 0 -7 -2.8 -7 -6.6 l0 -21.8 l3 0 l0 21.8 c0 2.2 1.8 4 4 4 l6 0 c2.2 0 4 -1.8 4 -4 l0 -21.8 l3 0 l0 21.8 c0 3.8 -2.8 6.6 -7 6.6 z M78.2 40 l-12.4 0 c-4.2 0 -7 -2.8 -7 -6.6 l0 -14.8 c0 -3.8 2.8 -6.6 7 -6.6 l11.6 0 l0 1.8 l-0.8 0.8 l-10.8 0 c-2.2 0 -4 1.8 -4 4 l0 14.8 c0 2.2 1.8 4 4 4 l9.4 0 l0 -12.6 l3 0 l0 15.2 z M104 40 l-12.4 0 c-4.2 0 -7 -2.8 -7 -6.6 l0 -14.8 c0 -3.8 2.8 -6.6 7 -6.6 l11.6 0 l0 1.8 l-0.8 0.8 l-10.8 0 c-2.2 0 -4 1.8 -4 4 l0 14.8 c0 2.2 1.8 4 4 4 l9.4 0 l0 -12.6 l3 0 l0 15.2 z M111.2 40 l0 -28 l18.2 0 l0 1.8 l-0.8 0.8 l-14.4 0 l0 9.8 l11.4 0 l0 2.6 l-11.4 0 l0 10.4 l15.2 0 l0 2.6 l-18.2 0 z M142.79999999999998 14.600000000000001 l0 25.4 l-3 0 l0 -25.4 l-8.8 0 l0 -2.6 l20.6 0 l0 1.8 l-0.8 0.8 l-8 0 z">
</path>
</g>
</svg>
</a>
<div class="flex lg:flex-col justify-between h-full">
<nav>
<ul class="flex lg:flex-col gap-2 font-semibold text-gray-700 -mx-3">
<li>
<a href="/"
class="group flex items-center gap-2 lg:gap-3 p-2 rounded-md hover:bg-orange-50 hover:text-orange-400 transition-color duration-300">
<Icon icon="ph:bowl-food-light"
class="max-sm:hidden w-6 h-6 text-gray-400 group-hover:text-orange-400 transition-color duration-300" />
Recipes
</a>
</li>
<li>
<a href="/ingredients"
class="group flex items-center gap-2 lg:gap-3 p-2 rounded-md hover:bg-orange-50 hover:text-orange-400 transition-color duration-300">
<Icon icon="fluent:food-carrot-20-regular"
class="max-sm:hidden w-6 h-6 text-gray-400 group-hover:text-orange-400 transition-color duration-300" />
Ingredients
</a>
</li>
</ul>
</nav>
<!-- <a href="#"
class="text-gray-900 font-semibold text-sm flex items-center gap-4 -mx-6 px-6 py-4 hover:bg-orange-50">
<img class="h-8 w-8 rounded-full"
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
alt="">
<span class="sr-only">Your profile</span>
<span aria-hidden="true">Peter Bay Bastian</span>
</a> -->
</div>
</aside>
<main class="lg:pl-72 relative lg:min-h-screen max-lg:pt-16">
<div class="px-8">
<form class="flex-1 relative border-b" action="#" method="GET">
<label for="search-field" class="sr-only">Search</label>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"
class="text-gray-400 w-5 h-full left-0 inset-y-0 absolute pointer-events-none">
<path fill-rule="evenodd"
d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
clip-rule="evenodd"></path>
</svg>
<input id="search-field" class="text-sm text-gray-900 pl-8 pr-0 py-4 border-none w-full h-full block outline-0"
placeholder="Search..." type="search" name="search">
</form>
</div>
<div class="px-8 py-6 sm:py-10 @container max-w-screen-xl mx-auto">
<NuxtPage />
</div>
</main>
</div></template>
<script setup>
import { Icon } from '@iconify/vue';
</script>