Skip to content

Commit 457feef

Browse files
sajadevosajadevo
committed
Fix the navbar nd rtl page issue
1 parent dfc36ef commit 457feef

File tree

4 files changed

+628
-535
lines changed

4 files changed

+628
-535
lines changed

‎src/App.vue‎

Lines changed: 64 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,64 @@
1-
<template>
2-
<sidenav
3-
:custom_class="this.$store.state.mcolor"
4-
:class="[
5-
this.$store.state.isTransparent,
6-
this.$store.state.isRTL ? 'fixed-end' : 'fixed-start',
7-
]"
8-
v-if="this.$store.state.showSidenav"
9-
/>
10-
<main
11-
class="main-content position-relative max-height-vh-100 h-100 border-radius-lg"
12-
>
13-
<!-- nav -->
14-
<navbar
15-
:class="[navClasses]"
16-
:textWhite="this.$store.state.isAbsolute ? 'text-white opacity-8' : ''"
17-
:minNav="navbarMinimize"
18-
v-if="this.$store.state.showNavbar"
19-
/>
20-
<router-view />
21-
<app-footer v-show="this.$store.state.showFooter" />
22-
<configurator
23-
:toggle="toggleConfigurator"
24-
:class="[
25-
this.$store.state.showConfig ? 'show' : '',
26-
this.$store.state.hideConfigButton ? 'd-none' : '',
27-
]"
28-
/>
29-
</main>
30-
</template>
31-
<script>
32-
import Sidenav from "./examples/Sidenav";
33-
import Configurator from "@/examples/Configurator.vue";
34-
import Navbar from "@/examples/Navbars/Navbar.vue";
35-
import AppFooter from "@/examples/Footer.vue";
36-
import { mapMutations } from "vuex";
37-
export default {
38-
name: "App",
39-
components: {
40-
Sidenav,
41-
Configurator,
42-
Navbar,
43-
AppFooter,
44-
},
45-
methods: {
46-
...mapMutations(["toggleConfigurator", "navbarMinimize"]),
47-
},
48-
computed: {
49-
navClasses() {
50-
return {
51-
"position-sticky blur shadow-blur mt-4 left-auto top-1 z-index-sticky": this
52-
.$store.state.isNavFixed,
53-
"position-absolute px-4 mx-0 w-100 z-index-2": this.$store.state
54-
.isAbsolute,
55-
"px-0 mx-4 mt-4": !this.$store.state.isAbsolute,
56-
};
57-
},
58-
},
59-
beforeMount() {
60-
this.$store.state.isTransparent = "bg-transparent";
61-
},
62-
};
63-
</script>
1+
<template>
2+
<sidenav
3+
:custom_class="this.$store.state.mcolor"
4+
:class="[
5+
this.$store.state.isTransparent,
6+
this.$store.state.isRTL ? 'fixed-end' : 'fixed-start',
7+
]"
8+
v-if="this.$store.state.showSidenav"
9+
/>
10+
<main
11+
class="main-content position-relative max-height-vh-100 h-100 border-radius-lg"
12+
:style="this.$store.state.isRTL ? 'overflow-x: hidden' : ''"
13+
>
14+
<!-- nav -->
15+
<navbar
16+
:class="[navClasses]"
17+
:textWhite="this.$store.state.isAbsolute ? 'text-white opacity-8' : ''"
18+
:minNav="navbarMinimize"
19+
v-if="this.$store.state.showNavbar"
20+
/>
21+
<router-view />
22+
<app-footer v-show="this.$store.state.showFooter" />
23+
<configurator
24+
:toggle="toggleConfigurator"
25+
:class="[
26+
this.$store.state.showConfig ? 'show' : '',
27+
this.$store.state.hideConfigButton ? 'd-none' : '',
28+
]"
29+
/>
30+
</main>
31+
</template>
32+
<script>
33+
import Sidenav from "./examples/Sidenav";
34+
import Configurator from "@/examples/Configurator.vue";
35+
import Navbar from "@/examples/Navbars/Navbar.vue";
36+
import AppFooter from "@/examples/Footer.vue";
37+
import { mapMutations } from "vuex";
38+
export default {
39+
name: "App",
40+
components: {
41+
Sidenav,
42+
Configurator,
43+
Navbar,
44+
AppFooter,
45+
},
46+
methods: {
47+
...mapMutations(["toggleConfigurator", "navbarMinimize"]),
48+
},
49+
computed: {
50+
navClasses() {
51+
return {
52+
"position-sticky blur shadow-blur mt-4 left-auto top-1 z-index-sticky": this
53+
.$store.state.isNavFixed,
54+
"position-absolute px-4 mx-0 w-100 z-index-2": this.$store.state
55+
.isAbsolute,
56+
"px-0 mx-4 mt-4": !this.$store.state.isAbsolute,
57+
};
58+
},
59+
},
60+
beforeMount() {
61+
this.$store.state.isTransparent = "bg-transparent";
62+
},
63+
};
64+
</script>

‎src/examples/Configurator.vue‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,8 @@
9999
type="checkbox"
100100
id="navbarFixed"
101101
:checked="this.$store.state.isNavFixed"
102-
@click="setNavbarFixed"
102+
@change="setNavbarFixed"
103+
v-model="fixedKey"
103104
/>
104105
</div>
105106
<hr class="horizontal dark my-sm-4" />
@@ -154,6 +155,11 @@ import { mapMutations, mapActions } from "vuex";
154155
export default {
155156
name: "configurator",
156157
props: ["toggle"],
158+
data() {
159+
return {
160+
fixedKey: "",
161+
};
162+
},
157163
methods: {
158164
...mapMutations(["navbarMinimize", "sidebarType", "navbarFixed"]),
159165
...mapActions(["toggleSidebarColor"]),
@@ -168,14 +174,8 @@ export default {
168174
},
169175
170176
setNavbarFixed() {
171-
if (
172-
this.$route.name !== "Profile Overview" ||
173-
this.$route.name !== "Teams" ||
174-
this.$route.name !== "All Projects"
175-
) {
176-
// do nothing
177-
} else {
178-
this.$store.commit("navbarFixed");
177+
if (this.$route.name !== "Profile") {
178+
this.$store.state.isNavFixed = !this.$store.state.isNavFixed;
179179
}
180180
},
181181

‎src/examples/Navbars/Navbar.vue‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
<template>
22
<nav
33
class="shadow-none navbar navbar-main navbar-expand-lg border-radius-xl"
4-
:class="
5-
this.$store.state.isRTL ? 'top-1 position-sticky z-index-sticky' : ''
6-
"
74
v-bind="$attrs"
85
id="navbarBlur"
96
data-scroll="true"
@@ -235,5 +232,19 @@ export default {
235232
return this.$route.name;
236233
},
237234
},
235+
updated() {
236+
const navbar = document.getElementById("navbarBlur");
237+
window.addEventListener("scroll", () => {
238+
if (window.scrollY > 10 && this.$store.state.isNavFixed) {
239+
navbar.classList.add("blur");
240+
navbar.classList.add("position-sticky");
241+
navbar.classList.add("shadow-blur");
242+
} else {
243+
navbar.classList.remove("blur");
244+
navbar.classList.remove("position-sticky");
245+
navbar.classList.remove("shadow-blur");
246+
}
247+
});
248+
},
238249
};
239250
</script>

0 commit comments

Comments
 (0)