Skip to content

K
kiaisoft_tuananh_nuxt
Commit 38c8085a authored by vieanh's avatar vieanh
Browse files
Options

update navbar style

parent 06f32646
Hide whitespace changes
Inline Side-by-side
Showing with 286 additions and 198 deletions
components/LoginModal.vue
View file @ 38c8085a
<template> <template>
<v-row <v-dialog
justify="center" v-model="dialog"
width="450px"
@click:outside="closeDialog"
> >
<v-dialog <v-card-title class="justify-center">
v-model="dialog" <p class="font-weight-black" style="font-size: 35px">
width="450px" LOGIN
@click:outside="closeDialog" </p>
> </v-card-title>
<v-card-title class="justify-center"> <v-form ref="form" justify="center" class="formlogin">
<p class="font-weight-black" style="font-size: 35px"> <v-col cols="12" sm="6" md="12">
LOGIN <v-text-field
</p> v-model="email"
</v-card-title> variant="underlined"
<v-form ref="form" justify="center" class="formlogin"> label="Email"
<v-col cols="12" sm="6" md="12"> required
<v-text-field />
v-model="email" </v-col>
variant="underlined" <v-col cols="12" sm="6" md="12">
label="Email" <v-text-field
required v-model="password"
/> variant="underlined"
</v-col> label="Password"
<v-col cols="12" sm="6" md="12"> required
<v-text-field />
v-model="password"
variant="underlined"
label="Password"
required
/>
</v-col>
<v-col cols="12" sm="6" md="12" justify-content: space-between>
<v-checkbox
label="Remember me"
/>
</v-col>
<div class="d-flex flex-column">
<v-btn
color="primary"
class="mt-4"
block
@click="login"
>
Login
</v-btn>
<v-btn
color="primary"
class="mt-4"
block
@click="$emit('close')"
>
Close
</v-btn>
</div>
</v-form>
<v-col cols="12" style="display:flex">
<v-divider sm="6" /> login with <v-divider sm="6" />
</v-col> </v-col>
<v-col cols="12" style="text-align: center;"> <v-col cols="12" sm="6" md="12" justify-content: space-between>
<v-icon> <v-checkbox
mdi-twitter label="Remember me"
</v-icon> />
<v-icon>
mdi-facebook
</v-icon>
<v-icon>
mdi-instagram
</v-icon>
</v-col> </v-col>
</v-dialog>
</v-row> <div class="d-flex flex-column">
<v-btn
color="primary"
class="mt-4"
block
@click="login"
>
Login
</v-btn>
<v-btn
color="primary"
class="mt-4"
block
@click="$emit('close')"
>
Close
</v-btn>
</div>
</v-form>
<v-col cols="12" style="display:flex">
<v-divider sm="6" /> login with <v-divider sm="6" />
</v-col>
<v-col cols="12" style="text-align: center;">
<v-icon>
mdi-twitter
</v-icon>
<v-icon>
mdi-facebook
</v-icon>
<v-icon>
mdi-instagram
</v-icon>
</v-col>
</v-dialog>
</template> </template>
<script> <script>
......
components/PageCarousels.vue
View file @ 38c8085a
...@@ -42,7 +42,5 @@ export default { ...@@ -42,7 +42,5 @@ export default {
</script> </script>
<style> <style>
.v-window__container {
margin-top: 20px;
}
</style> </style>
components/RegisterModal.vue
View file @ 38c8085a
<template> <template>
<v-row justify="center"> <v-dialog
<v-dialog v-model="dialog"
v-model="dialog" width="450px"
width="450px" @click:outside="closeDialog"
@click:outside="closeDialog" >
> <v-card-title class="justify-center">
<v-card-title class="justify-center"> <p class="font-weight-black" style="font-size: 35px">
<p class="font-weight-black" style="font-size: 35px"> REGISTER
REGISTER </p>
</p> </v-card-title>
</v-card-title> <v-form ref="form" justify="center" class="formlogin">
<v-form ref="form" justify="center" class="formlogin"> <v-col cols="12" sm="6" md="12">
<v-col cols="12" sm="6" md="12"> <v-text-field
<v-text-field v-model="name"
v-model="name" variant="underlined"
variant="underlined" label="Name"
label="Name" :rules="requiredRules"
:rules="requiredRules" required
required />
/> </v-col>
</v-col> <v-col cols="12" sm="6" md="12">
<v-col cols="12" sm="6" md="12"> <v-text-field
<v-text-field v-model="email"
v-model="email" variant="underlined"
variant="underlined" label="Email"
label="Email" :rules="emailRules"
:rules="emailRules" required
required />
/> </v-col>
</v-col> <v-col cols="12" sm="6" md="12">
<v-col cols="12" sm="6" md="12"> <v-text-field
<v-text-field v-model="password"
v-model="password" variant="underlined"
variant="underlined" label="Password"
label="Password" type="password"
type="password" :rules="passwordRules"
:rules="passwordRules" required
required />
/>
</v-col>
<v-col cols="12" sm="6" md="12">
<v-text-field
v-model="password_confirmation"
variant="underlined"
label="Confirm your password"
type="password"
:rules="[passwordRules, passwordConfirmationRule]"
required
/>
</v-col>
<v-col cols="12" sm="6" md="12" justify-content: space-between>
<v-checkbox
v-model="checkbox"
label="I agree to the privacy policy"
/>
</v-col>
<div class="d-flex flex-column">
<v-btn
color="primary"
class="mt-4"
block
@click="signup"
>
Sign Up
</v-btn>
<v-btn
color="primary"
class="mt-4"
block
@click="$emit('close')"
>
Close
</v-btn>
</div>
</v-form>
<v-col cols="12" style="display:flex">
<v-divider sm="6" /> login with <v-divider sm="6" />
</v-col> </v-col>
<v-col cols="12" style="text-align: center;"> <v-col cols="12" sm="6" md="12">
<v-icon> <v-text-field
mdi-twitter v-model="password_confirmation"
</v-icon> variant="underlined"
<v-icon> label="Confirm your password"
mdi-facebook type="password"
</v-icon> :rules="[passwordRules, passwordConfirmationRule]"
<v-icon> required
mdi-instagram />
</v-icon>
</v-col> </v-col>
</v-dialog> <v-col cols="12" sm="6" md="12" justify-content: space-between>
</v-row> <v-checkbox
v-model="checkbox"
label="I agree to the privacy policy"
/>
</v-col>
<div class="d-flex flex-column">
<v-btn
color="primary"
class="mt-4"
block
@click="signup"
>
Sign Up
</v-btn>
<v-btn
color="primary"
class="mt-4"
block
@click="$emit('close')"
>
Close
</v-btn>
</div>
</v-form>
<v-col cols="12" style="display:flex">
<v-divider sm="6" /> login with <v-divider sm="6" />
</v-col>
<v-col cols="12" style="text-align: center;">
<v-icon>
mdi-twitter
</v-icon>
<v-icon>
mdi-facebook
</v-icon>
<v-icon>
mdi-instagram
</v-icon>
</v-col>
</v-dialog>
</template> </template>
<script> <script>
......
components/user/CategoryTree.vue 0 → 100644
View file @ 38c8085a
<template>
<ul class="dropdown-item">
<TreeNode v-for="(item, i) in categories" :key="i" :node="item" />
</ul>
</template>
<script>
import TreeNode from '~/components/user/TreeNode.vue'
export default {
name: 'CategoryTree',
components: {
TreeNode
},
props: {
categories: Object
},
data: () => ({
selectedItem: 1
})
}
</script>
<style>
.dropdown-item {
box-shadow: 0 2px 35px rgba(0,0,0,0.1);
}
li {
list-style: none;
line-height: 2rem;
padding: 0 1.5rem;
}
li span {
font-size: 15px;
}
li > ul {
position: absolute;
left: 100%;
box-shadow: 0 2px 35px rgba(0,0,0,0.1);
transition: transform 0.2s ease-out;
}
li:hover > ul {
transform: translate3d(0,0,0);
}
ul.dropdown-item {
padding: 10px 0;
}
</style>
components/user/NavBar.vue
View file @ 38c8085a
<template> <template>
<v-container> <v-container class="navbar-container">
<div class="navbar d-flex justify-space-between "> <div class="navbar">
<div class="d-flex justify-space-between col-md-7"> <div class="navbar-left">
<div> <div class="navbar-item">
<span> <span>
Home Home
</span> </span>
</div> </div>
<div class="dropdown"> <div class="navbar-item dropdown">
<span> <span>
Products Products
</span> </span>
<v-icon>mdi-chevron-down</v-icon> <v-icon>mdi-chevron-down</v-icon>
<div class="dropdown-content elevation-10" :elevation="2"> <div class="dropdown-content" :elevation="2">
<v-treeview <CategoryTree :categories="categories" />
:active.sync="active"
rounded
dense
hoverable
activatable
:items="categories"
@update:active="setCategory(item)"
>
<template #label="{ item }">
<nuxt-link :to="`/home-page/categories/${item.id}`" tag="div">
{{ item.name }}
</nuxt-link>
</template>
</v-treeview>
</div> </div>
</div> </div>
<div> <div class="navbar-item">
<span> <span>
Pages Pages
</span> </span>
</div> </div>
<div> <div class="navbar-item">
<span> <span>
Blogs Blogs
</span> </span>
</div> </div>
<div> <div class="navbar-item">
<span> <span>
About About
</span> </span>
</div> </div>
</div> </div>
<div class="none-tag align-center "> <div class="d-flex align-center none-tag">
<v-icon>mdi-tag</v-icon> <v-icon>mdi-tag</v-icon>
<span class="mx-2"> <span class="mx-2">
Special offer! Special offer!
...@@ -62,8 +48,13 @@ ...@@ -62,8 +48,13 @@
<script> <script>
import { mapActions, mapState } from 'vuex' import { mapActions, mapState } from 'vuex'
import CategoryTree from '~/components/user/CategoryTree.vue'
export default { export default {
name: 'NavBar', name: 'NavBar',
components: {
CategoryTree
},
data: () => ({ data: () => ({
active: [], active: [],
open: [], open: [],
...@@ -111,6 +102,14 @@ export default { ...@@ -111,6 +102,14 @@ export default {
</script> </script>
<style scoped> <style scoped>
.navbar-container {
padding-left: 0;
padding-right: 0;
}
.navbar {
display: flex;
justify-content: space-between;
}
.navbar span { .navbar span {
font-weight: bold; font-weight: bold;
cursor: pointer; cursor: pointer;
...@@ -119,10 +118,21 @@ export default { ...@@ -119,10 +118,21 @@ export default {
.navbar span:hover { .navbar span:hover {
color: #26c; color: #26c;
} }
.navbar-left {
width: 50%;
display: flex;
justify-content: space-between;
padding-left: 0;
padding-right: 0;
}
.dropdown { .dropdown {
position: relative; position: relative;
} }
.dropdown span {
font-size: 15px;
}
.dropdown:hover .dropdown-content { .dropdown:hover .dropdown-content {
transition: 0.3s;
display: block; display: block;
} }
.dropdown-content { .dropdown-content {
...@@ -130,8 +140,7 @@ export default { ...@@ -130,8 +140,7 @@ export default {
position: absolute; position: absolute;
z-index: 1; z-index: 1;
background-color: #ffffff; background-color: #ffffff;
min-width: 350px; min-width: 250px;
/* margin-top: 20px; */
} }
.none-tag { .none-tag {
display: flex; display: flex;
......
components/user/TreeNode.vue 0 → 100644
View file @ 38c8085a
<template>
<li class="dropdown">
<nuxt-link class="label" :to="`/home-page/categories/${node.id}`" tag="span">
{{ node.name }}
</nuxt-link>
<ul v-if="node.children && node.children.length" class="dropdown-item">
<TreeNode v-for="child in node.children" :key="child.id" :node="child" />
</ul>
</li>
</template>
<script>
export default {
name: 'TreeNode',
props: {
node: Object
}
}
</script>
<style scoped>
.dropdown {
position: relative;
cursor: pointer;
}
.dropdown-item {
display: none;
}
.dropdown:hover > .dropdown-item {
display: block;
}
.dropdown-item {
display: none;
position: absolute;
z-index: 1;
background-color: #ffffff;
min-width: 250px;
top: -10px;
}
li:hover > span {
color: #2266cc;
}
</style>
pages/login.vue
View file @ 38c8085a
...@@ -48,16 +48,12 @@ ...@@ -48,16 +48,12 @@
</v-app> </v-app>
</template> </template>
<script> <script>
export default {
// eslint-disable-next-line no-undef
components: { NuxtLogo }
}
</script>
<script>
import { validationMixin } from 'vuelidate' import { validationMixin } from 'vuelidate'
import { required, minLength, email } from 'vuelidate/lib/validators' import { required, minLength, email } from 'vuelidate/lib/validators'
import { NuxtLogo } from '@/components/NuxtLogo.vue'
export default { export default {
components: { NuxtLogo },
dark: false, dark: false,
mixins: [validationMixin], mixins: [validationMixin],
layout: 'empty', layout: 'empty',
...@@ -124,14 +120,14 @@ export default { ...@@ -124,14 +120,14 @@ export default {
this.$auth.$storage.setUniversal('loggedIn', 'true') this.$auth.$storage.setUniversal('loggedIn', 'true')
if (resp.status === 200) { if (resp.status === 200) {
this.$toast.success('Successfully authenticated', { this.$toast.success('Successfully authenticated', {
duration: 2000, duration: 2000
}); })
this.$router.push('home'); this.$router.push('home')
} }
} catch (e) { } catch (e) {
this.$toast.error('Username or Password not valid', { this.$toast.error('Username or Password not valid', {
duration: 2000 duration: 2000
}); })
this.$router.push('/login') this.$router.push('/login')
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment