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

desing navbar

Browse Source 
Signed-off-by: nurRiyad <asadnurriyad@gmail.com>
This commit is contained in:
nurRiyad
2022-12-09 01:35:55 +06:00
parent 7fc5639e55
commit c560b4be74
11 changed files with 337 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
components/NavbarCom.vue
View File

@@ -1,5 +1,53 @@
<script setup lang="ts">
const theme = ref("light");
</script>
<template>
<div>
<h1>Navbar Component</h1>
</div>
<header class="sticky top-0 p-6 bg-[#a2d9ff]">
<div class="container mx-auto max-w-6xl flex justify-between items-center">
<ul class="flex space-x-8">
<li>
<nuxt-link to="/">Home</nuxt-link>
</li>
<li>
<nuxt-link to="/latest">Latest</nuxt-link>
</li>
<li class="space-x-2">
<nuxt-link to="/category">Category</nuxt-link>
<nuxt-link to="#">^</nuxt-link>
</li>
<li>
<nuxt-link to="/archive">Archive</nuxt-link>
</li>
</ul>
<ul class="flex space-x-4">
<li>
<nuxt-link to="/">
<icon size="2em" name="uil:github" />
</nuxt-link>
</li>
<li>
<nuxt-link to="/">
<icon size="2em" name="uil:linkedin" />
</nuxt-link>
</li>
<li>
<nuxt-link to="/">
<icon size="2em" name="mdi:stackoverflow" />
</nuxt-link>
</li>
<li v-if="theme === 'light'" @click="theme = 'dark'">
<nuxt-link to="/">
<icon size="2em" name="ph:sun-dim" />
</nuxt-link>
</li>
<li v-if="theme === 'dark'" @click="theme = 'light'">
<nuxt-link to="/">
<icon size="2em" name="ph:moon-stars" />
</nuxt-link>
</li>
</ul>
</div>
</header>
</template>

9
components/svg/Wave.vue Normal file
View File

@@ -0,0 +1,9 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path
fill="#a2d9ff"
fill-opacity="1"
d="M0,224L60,208C120,192,240,160,360,138.7C480,117,600,107,720,122.7C840,139,960,181,1080,197.3C1200,213,1320,203,1380,197.3L1440,192L1440,0L1380,0C1320,0,1200,0,1080,0C960,0,840,0,720,0C600,0,480,0,360,0C240,0,120,0,60,0L0,0Z"
></path>
</svg>
</template>