Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit a30bf4f

Browse files
author
Yeliazar
committed
updated Sidebar, Navlink, add vue-inline-svg package, updated styles sidebar
1 parent b8b1cd4 commit a30bf4f

File tree

7 files changed

+44
-63
lines changed

7 files changed

+44
-63
lines changed

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@
5858
"vue-echarts": "^4.1.0",
5959
"vue-form-wizard": "^0.8.4",
6060
"vue-gallery": "^1.5.0",
61+
"vue-inline-svg": "^2.1.0",
6162
"vue-input-tag": "^2.0.7",
6263
"vue-router": "^3.5.4",
6364
"vue-select": "^2.6.4",

‎src/components/Sidebar/NavLink/NavLink.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@
8787
align-items: center;
8888
margin-left: auto;
8989
margin-right: 22px;
90-
color: var(--sidebar-item-active-bg);
90+
color: var(--sidebar-color);
9191

9292
i {
9393
@include transition(transform 0.3s ease-in-out);

‎src/components/Sidebar/NavLink/NavLink.vue

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,21 @@
22
<li v-if="!childrenLinks && isHeader" :class="{headerLink: true, className}">
33
<router-link :to="link" class="sidebar-link">
44
<span class="icon">
5-
<img v-if="iconImg" :src="require('@/assets/' + iconImg + '')" alt="img">
5+
<inline-svg v-if="iconImg" :src="require('@/assets/' + iconImg + '')" fill="currentColor"></inline-svg>
66
<i v-else :class="fullIconName"></i>
77
</span>
88
{{header}} <sup v-if="label" :class="'text-' + labelColor" class="headerLabel">{{label}}</sup>
9-
<b-badge v-if="badge" class="badge"variant="info"pill>{{badge}}</b-badge>
9+
<span v-if="badge" class="badge rounded-pill bg-danger">{{badge}}</span>
1010
</router-link>
1111
</li>
1212
<li v-else-if="childrenLinks" :class="{headerLink: true, className}">
1313
<div @click="() => togglePanelCollapse(link)">
1414
<router-link :to="link" event="" class="d-flex sidebar-link">
1515
<span class="icon">
16-
<img v-if="iconImg" :src="require('@/assets/' + iconImg + '')" alt="img">
16+
<inline-svg v-if="iconImg" :src="require('@/assets/' + iconImg + '')" fill="currentColor"> </inline-svg>
1717
<i v-else :class="fullIconName"></i>
1818
</span>
19-
{{header}} <sup v-if="label" :class="'text-' + labelColor" class="ml-1 headerLabel">{{label}}</sup>
19+
{{header}} <sup v-if="label" :class="'text-' + labelColor" class="ms-1 headerLabel">{{label}}</sup>
2020
<div :class="{caretWrapper: true, carretActive: isActive}">
2121
<i class="fa fa-angle-right" />
2222
</div>

‎src/components/Sidebar/Sidebar.vue

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
icon-img="sidebar/Outline/Chat.svg"
3737
index="chat"
3838
label="awesome"
39-
labelColor="info"
39+
labelColor="success"
4040
isHeader
4141
/>
4242
<NavLink
@@ -88,7 +88,7 @@
8888
icon-img="sidebar/Outline/Document.svg"
8989
index="documentation"
9090
label="new"
91-
labelColor="success"
91+
labelColor="info"
9292
isHeader
9393
/>
9494
<h5 class="navTitle">TEMPLATE</h5>
@@ -304,10 +304,11 @@
304304
import { mapState, mapActions } from 'vuex';
305305
import isScreen from '@/core/screenHelper';
306306
import NavLink from './NavLink/NavLink';
307+
import Bank from '../../assets/sidebar/Outline/Bank.svg';
307308
308309
export default {
309310
name: 'Sidebar',
310-
components: { NavLink },
311+
components: { NavLink, Bank },
311312
data() {
312313
return {
313314
alerts: [
@@ -326,6 +327,7 @@ export default {
326327
color: 'primary',
327328
},
328329
],
330+
Bank
329331
};
330332
},
331333
methods: {

‎src/main.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import CKEditor from '@ckeditor/ckeditor5-vue';
1919
import bFormSlider from 'vue-bootstrap-slider';
2020
import { component as VueCodeHighlight } from 'vue-code-highlight';
2121
import VueTour from 'vue-tour';
22+
import InlineSvg from 'vue-inline-svg';
2223

2324
import store from './store';
2425
import router from './Routes';
@@ -63,6 +64,7 @@ Vue.mixin(layoutMixin);
6364
Vue.mixin(AuthMixin);
6465
Vue.use(Toasted, {duration: 10000});
6566
Vue.use(VueTour);
67+
Vue.component('inline-svg', InlineSvg);
6668

6769
Vue.config.productionTip = false;
6870

‎src/styles/_theme-variables.scss

Lines changed: 26 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,12 @@
11
.root {
22
&.sing-dashboard {
3-
--logo-color: #6C757D;
43
--body-bg: #f9fbfd;
54
--light-color: #F6F6E9;
65

76
--sidebar-bg-color: #ffffff;
87
--sidebar-color: #6c757d;
98
--sidebar-action-bg: #f9fafe;
10-
--sidebar-item-active: #6C757D; //var(--light-color)
11-
--sidebar-item-active-bg: #5CB0FF;
12-
--sidebar-badge-bg: #1A86D0;
13-
14-
--sidebar-nav-title-color: #5287B999;
9+
--sidebar-item-active: #C1C3CF; //var(--light-color)
1510

1611
--widget-shadow-color: 75, 102, 171;
1712

@@ -23,31 +18,41 @@
2318
--sidebar-progress-bg-color: var(--sidebar-action-bg);
2419
--sidebar-icon-active: var(--sidebar-bg-color);
2520
--sidebar-item-hover-bg-color: var(--sidebar-action-bg);
26-
--widget-shadow: 4px 4px 30px rgba(var(--widget-shadow-color), 0.2);
21+
//--widget-shadow: 4px 4px 30px rgba(var(--widget-shadow-color), 0.2);
22+
23+
--input-bg-color: var(--input-bg);
24+
--badge-item-color: var(--badge-item);
25+
--important-notification: var(--important-notification-color);
26+
--update-notification: var(--update-notification-color);
27+
--sidebar-item-active-color: var(--sidebar-item-active);
28+
--chat-sidebar-bg-color: var(--sidebar-bg-color);
29+
--widget-shadow: 0 23px 20px -20px rgba(var(--widget-shadow-color), 0.1), 0 0 15px rgba(var(--widget-shadow-color), 0.06);
2730

2831
&.sidebar-white,
2932
&.sidebar-transparent {
33+
--sidebar-icon-bg: #4A5056;
3034
--sidebar-bg-color: #ffffff;
3135
--sidebar-color: #6c757d;
3236
--sidebar-action-bg: #f9fafe;
33-
--logo-color: #0D2B47;
34-
--sidebar-item-active: #14191D;
37+
--logo-color: #6C757D;
38+
--sidebar-item-active: #6C757D;
39+
--sidebar-item-active-color: #FFFFFF;
3540
--sidebar-item-active-bg: #4A5056;
3641
--sidebar-nav-title-color: #5287B9;
3742
}
3843

3944
&.sidebar-first {
40-
--sidebar-icon-bg: #5CB0FF;
4145
--sidebar-bg-color: #3D3D3D;
42-
--logo-color: #C1C3CF;
46+
--logo-color: #5CB0FF;
4347
--sidebar-item-active: #F6F6E9;
4448
--sidebar-action-bg: #2D2D2D;
49+
--sidebar-item-active-bg: #5CB0FF;
4550
--sidebar-color: #F6F6E9;
4651
--sidebar-nav-title-color: #F6F6E9;
4752
}
4853

4954
&.sidebar-second {
50-
--logo-color: #C1C3CF;
55+
--logo-color: #fff;
5156
--sidebar-color: #fff;
5257
--sidebar-bg-color: #4B505F;
5358
--sidebar-action-bg: #373C4D;
@@ -56,8 +61,8 @@
5661
}
5762

5863
&.sidebar-third {
59-
--sidebar-icon-bg: #fff;
60-
--logo-color: #0C2236;
64+
--sidebar-item-active-bg: #5CB0FF;
65+
--logo-color: #fff;
6166
--sidebar-item-active: #F6F6E9;
6267
--important-notification-color: #fd5f00;
6368
--sidebar-bg-color: #483CB6;
@@ -66,56 +71,22 @@
6671
}
6772

6873
&.sidebar-fourth {
69-
--logo-color: #0C2236;
74+
--sidebar-icon-bg: #6FB0F9;
75+
--logo-color: #6FB0F9;
76+
--sidebar-item-active: #5A5D76;
7077
--sidebar-bg-color: #EFF2F5;
7178
--sidebar-action-bg: #E2E7EC;
7279
--sidebar-item-active-bg: #6FB0F9;
7380
}
7481

7582
&.sidebar-fifth {
76-
--logo-color: $white;
83+
--sidebar-icon-bg: #0D2B47;
84+
--logo-color: #0D2B47;
7785
--sidebar-bg-color: #20AE8C;
7886
--sidebar-action-bg: #119475;
87+
--sidebar-item-active: #F6F6E9;
7988
--sidebar-item-active-bg: #0D2B47;
80-
--sidebar-color: #F6F6E9 !important;
81-
}
82-
83-
//&.sidebar-sixth {
84-
// --sidebar-bg-color: #13191d;
85-
// --sidebar-color: #f6f6e9;
86-
// --sidebar-action-bg: #080c0f;
87-
// --sidebar-item-active-bg: #5CB0FF;
88-
//}
89-
90-
&.sidebar-seventh {
91-
--sidebar-bg-color: #20ae8c;
92-
--sidebar-color: #f6f6e9;
93-
--sidebar-action-bg: #119375;
94-
--sidebar-item-active-bg: #0D2B47;
95-
--sidebar-badge-bg: #00395f;
96-
--logo-color: #0D2B47;
97-
}
98-
99-
&.sidebar-third,
100-
&.sidebar-fourth,
101-
&.sidebar-fifth,
102-
&.sidebar-sixth,
103-
&.sidebar-seventh {
104-
--sidebar-color: #004472;
105-
--sidebar-item-active: var(--sidebar-color);
106-
}
107-
&.sidebar-second,
108-
&.sidebar-third,
109-
&.sidebar-fourth,
110-
&.sidebar-fifth,
111-
&.sidebar-seventh,
112-
&.sidebar-transparent {
113-
--sidebar-nav-title-color: rgba(82,135,185, 0.6);
114-
}
115-
116-
&.sidebar-sixth,
117-
&.sidebar-seventh {
118-
--sidebar-color: #f6f6e9;
89+
--sidebar-color: #F6F6E9;
11990
}
12091

12192
&.sidebar-transparent {

‎yarn.lock

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8641,6 +8641,11 @@ vue-hot-reload-api@^2.3.0:
86418641
version "2.3.4"
86428642
resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"
86438643

8644+
vue-inline-svg@^2.1.0:
8645+
version "2.1.0"
8646+
resolved "https://registry.yarnpkg.com/vue-inline-svg/-/vue-inline-svg-2.1.0.tgz#45f20a34d458636c5caea5da28eef6cad9a87fcb"
8647+
integrity sha512-80u/BGtjOzXp31yFahXsfvkBrHKHEHKyrkZ42MGoAbD6jHzWpMJLijsyRj66pps7IyKxZcnYkO3ijsJhr4zXsg==
8648+
86448649
vue-input-tag@^2.0.7:
86458650
version "2.0.7"
86468651
resolved "https://registry.yarnpkg.com/vue-input-tag/-/vue-input-tag-2.0.7.tgz#daea4db750df34a8c87605f88455dc5f64e1052b"

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /