basic layout

This commit is contained in:
Ruidy 2024-04-27 01:15:55 +02:00
parent 7708d7dfe0
commit d35253be03
No known key found for this signature in database
GPG key ID: E00F51288CB857CC
6 changed files with 62 additions and 3 deletions

View file

@ -1,7 +1,7 @@
# TO DO
- [x] use bun package manager
- [ ] use nuxt framework
- [x] use nuxt framework
- [ ] rewrite the random page, the current landing page
- [ ] rewrite the recipe page
- [ ] deploy

View file

@ -1,5 +1,9 @@
<template>
<div data-theme="cupcake">
<button class="btn">test</button>
<div data-theme="cupcake" class="flex flex-col h-screen">
<Navbar />
<main class="flex-grow">
<NuxtPage />
</main>
<Footer />
</div>
</template>

7
components/footer.vue Normal file
View file

@ -0,0 +1,7 @@
<template>
<footer class="footer footer-center p-4 bg-base-300 text-base-content">
<aside>
<p>Copyright &copy; 2024 - Made with </p>
</aside>
</footer>
</template>

42
components/navbar.vue Normal file
View file

@ -0,0 +1,42 @@
<template>
<nav class="navbar bg-base-300">
<div class="navbar-start">
<div class="dropdown">
<div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h8m-8 6h16"
/>
</svg>
</div>
<ul
tabindex="0"
class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-200 rounded-box w-52"
>
<li><a>Categories</a></li>
</ul>
</div>
<nuxt-link to="/" class="btn btn-ghost text-xl">
<img src="/public/logo192.png" width="50" />
<span style="font-family: cursive"> Chefs </span>
</nuxt-link>
</div>
<div class="navbar-center hidden lg:flex">
<ul class="menu menu-horizontal px-1">
<li><a>Categories</a></li>
</ul>
</div>
<div class="navbar-end">
<nuxt-link to="/random" class="btn btn-primary">Random</nuxt-link>
</div>
</nav>
</template>

3
pages/index.vue Normal file
View file

@ -0,0 +1,3 @@
<template>
<div>index</div>
</template>

3
pages/random.vue Normal file
View file

@ -0,0 +1,3 @@
<template>
<div>random</div>
</template>