RhenCloud/Cloud-Blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor layout

Browse Source 
Signed-off-by: nurRiyad <asadnurriyad@gmail.com>
This commit is contained in:
nurRiyad
2023-01-07 13:14:43 +06:00
parent fddfe6bb3e
commit d8fa745c56
3 changed files with 30 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/main/footer.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<nav class="bg-gray-900 text-white py-5 border-b border-gray-700"> <nav class="py-5 border-t">
<div class="container flex justify-between mx-auto"> <div class="container flex justify-between mx-auto">
<NuxtLink to="/" class="text-2xl font-medium"> Elon's Blog </NuxtLink> <NuxtLink to="/" class="text-2xl font-medium"> Elon's Blog </NuxtLink>
<ul class="nav flex space-x-5"> <ul class="nav flex space-x-5">

17
components/main/header.vue
View File

@@ -3,16 +3,23 @@ let x = ref('10')
</script> </script>
<template> <template>
<nav class="py-5 border-b border-gray-700"> <nav class="py-5 border-b">
<div class="container flex justify-between mx-auto"> <div class="container flex justify-between mx-auto items-baseline">
<NuxtLink to="/" class="text-2xl font-medium"> Riyad's Blog </NuxtLink> <ul class="flex items-baseline space-x-5">
<ul class="nav flex space-x-5">
<li> <li>
<NuxtLink to="/categories"> Categories </NuxtLink> <NuxtLink to="/" class="text-2xl font-medium"> Home </NuxtLink>
</li> </li>
<li>
<NuxtLink to="/categories" class="font-medium"> Categories </NuxtLink>
</li>
</ul>
<ul class="flex space-x-3">
<li> <li>
<NuxtLink to="/blogs"> Blogs </NuxtLink> <NuxtLink to="/blogs"> Blogs </NuxtLink>
</li> </li>
<li>
<NuxtLink to="/blogs"> Icon </NuxtLink>
</li>
</ul> </ul>
</div> </div>
</nav> </nav>

18
layouts/default.vue
View File

@@ -1,9 +1,21 @@
<template> <template>
<div> <div class="gd-container">
<header class="fixed w-full backdrop-blur-3xl">
<MainHeader /> <MainHeader />
<div class="h-full"> </header>
<main class="mt-20">
<slot /> <slot />
</div> </main>
<footer>
<MainFooter /> <MainFooter />
</footer>
</div> </div>
</template> </template>
<style scoped>
.gd-container {
display: grid;
grid-template-rows: 1fr auto;
min-height: 100vh;
}
</style>