Skip to content

Commit 1970d4e

Browse files
author
Yeliazar
committed
updated Sidebar and NavBar colors schema
1 parent a30bf4f commit 1970d4e

File tree

5 files changed

+73
-35
lines changed

5 files changed

+73
-35
lines changed

‎src/assets/sidebar/Fill/Menu.svg

Lines changed: 4 additions & 4 deletions
Loading

‎src/components/Header/Header.vue

Lines changed: 23 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,21 @@
22
<b-navbar class="app-header d-print-none" :class="[navbarTypeClass, 'header-' + navbarColorScheme]">
33
<b-nav>
44
<b-nav-item id="v-step-0">
5-
<a class="d-md-down-none px-2" href="#" @click="toggleSidebarMethod">
5+
<a class="d-md-down-none px-1" href="#" @click="toggleSidebarMethod">
66
<img
77
:src="Menu"
88
alt="menu"
99
/>
1010
</a>
11-
<a class="fs-lg d-lg-none" href="#" @click="switchSidebarMethod">
11+
<a class="fs-lg d-md-none" href="#" @click="switchSidebarMethod">
1212
<img
1313
:src="Menu"
1414
alt="menu"
1515
/>
1616
</a>
1717
</b-nav-item>
1818
<b-nav-item class="d-md-down-none">
19-
<a href="#" class="px-2">
19+
<a href="#" class="px-1">
2020
<img
2121
:src="Exchange"
2222
alt="exchange"
@@ -33,29 +33,31 @@
3333
</b-nav-item>
3434
</b-nav>
3535
<b-nav>
36-
<b-form class="d-sm-down-none ms-5 my-auto" inline>
36+
<b-form class="d-md-down-none ms-5 my-auto" inline>
3737
<b-form-group>
3838
<b-input-group class="input-group-no-border search-input">
39-
<template v-slot:prepend>
40-
<b-input-group-text>
41-
<div>
42-
<img
43-
:src="Search"
44-
alt="search"
45-
/>
39+
<template v-slot:prepend>
40+
<div class="headerSvgFlipColor">
41+
<b-input-group-text>
42+
<div>
43+
<img
44+
:src="Search"
45+
alt="search"
46+
/>
47+
</div>
48+
</b-input-group-text>
4649
</div>
47-
</b-input-group-text>
48-
</template>
50+
</template>
4951
<b-form-input id="search-input" placeholder="Search Dashboard" />
5052
</b-input-group>
5153
</b-form-group>
5254
</b-form>
5355
</b-nav>
5456
<a class="navbarBrand d-md-none">
55-
<i class="fa fa-circle text-primary me-sm-1" />
57+
<i class="fa fa-circle text-primary me-1" />
5658
<i class="fa fa-circle text-danger" />
5759
sing
58-
<i class="fa fa-circle text-danger me-sm-1" />
60+
<i class="fa fa-circle text-danger me-1" />
5961
<i class="fa fa-circle text-primary" />
6062
</a>
6163
<b-nav class="ms-auto">
@@ -67,7 +69,7 @@
6769
menu-class="notificationsWrapper py-0 animate__animated animate__animated-fast animate__fadeIn"
6870
right>
6971
<template slot="button-content">
70-
<span class="avatar rounded-circle thumb-sm float-left me-2">
72+
<span class="avatar rounded-circle thumb-sm float-start me-2">
7173
<img
7274
v-if="user.avatar || user.email === '[email protected]'"
7375
class="rounded-circle"
@@ -77,7 +79,7 @@
7779
<span v-else>{{firstUserLetter}}</span>
7880
</span>
7981
<span>{{user.name || user.email || 'Philip smith'}}</span>
80-
<span class="mx-2 circle bg-dark text-white fw-bold" style="padding: 13px 13px;">9</span>
82+
<span class="mx-2 circle bg-danger text-white fw-bold" style="padding: 13px 13px;">9</span>
8183
<!-- <i :class="['fi flaticon-arrow-down px-2 dropdown-arrow', {active: dropdown}]" />-->
8284
<img class="px-2 dropdown-arrow"
8385
:class="{active: dropdown}"
@@ -97,22 +99,22 @@
9799
</template>
98100
<b-dropdown-item>
99101
<img :src="User"
100-
class="px-2 mr-3"
102+
class="px-2 me-3"
101103
alt="user"
102104
/>
103105
My Account
104106
</b-dropdown-item>
105107
<b-dropdown-divider />
106108
<b-dropdown-item>
107109
<img :src="Document"
108-
class="px-2 mr-2"
110+
class="px-2 me-2"
109111
alt="document"
110112
/>
111113
Calendar
112114
</b-dropdown-item>
113115
<b-dropdown-item href="/inbox">
114116
<img :src="Envelope"
115-
class="px-2 mr-2"
117+
class="px-2 me-2"
116118
alt="envelope"
117119
/>
118120
Inbox &nbsp;&nbsp;
@@ -121,7 +123,7 @@
121123
<b-dropdown-divider />
122124
<b-dropdown-item-button @click="logoutUser">
123125
<img :src="Cancel"
124-
class="px-2 mr-2"
126+
class="px-2 me-2"
125127
alt="cancel"
126128
/>
127129
Log Out

‎src/components/Sidebar/Sidebar.vue

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -304,11 +304,10 @@
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';
308307
309308
export default {
310309
name: 'Sidebar',
311-
components: { NavLink, Bank },
310+
components: { NavLink},
312311
data() {
313312
return {
314313
alerts: [
@@ -326,8 +325,7 @@ export default {
326325
footer: 'Provide required notes',
327326
color: 'primary',
328327
},
329-
],
330-
Bank
328+
]
331329
};
332330
},
333331
methods: {

‎src/store/layout.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ export default {
4646
state: {
4747
sidebarClose: false,
4848
sidebarStatic: false,
49-
sidebarColorName: config.app.sidebarColors[0][0],
49+
sidebarColorName: config.app.sidebarColors[3][0],
5050
navbarColorName: config.app.navbarColors[1][0],
5151
navbarColorScheme: NavbarColorSchemes.LIGHT,
5252
navbarType: NavbarTypes.STATIC,

‎src/styles/_theme-variables.scss

Lines changed: 43 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@
4444
&.sidebar-first {
4545
--sidebar-bg-color: #3D3D3D;
4646
--logo-color: #5CB0FF;
47-
--sidebar-item-active: #F6F6E9;
47+
//--sidebar-item-active: #F6F6E9;
4848
--sidebar-action-bg: #2D2D2D;
4949
--sidebar-item-active-bg: #5CB0FF;
5050
--sidebar-color: #F6F6E9;
@@ -57,16 +57,16 @@
5757
--sidebar-bg-color: #4B505F;
5858
--sidebar-action-bg: #373C4D;
5959
--sidebar-item-active-bg: #dedede;
60-
--sidebar-item-active: #F6F6E9;
60+
//--sidebar-item-active: #F6F6E9;
6161
}
6262

6363
&.sidebar-third {
6464
--sidebar-item-active-bg: #5CB0FF;
6565
--logo-color: #fff;
66-
--sidebar-item-active: #F6F6E9;
66+
//--sidebar-item-active: #F6F6E9;
6767
--important-notification-color: #fd5f00;
6868
--sidebar-bg-color: #483CB6;
69-
--sidebar-color: #F6F6E9 !important;
69+
--sidebar-color: #F6F6E9;
7070
--sidebar-action-bg: #332A87;
7171
}
7272

@@ -84,7 +84,7 @@
8484
--logo-color: #0D2B47;
8585
--sidebar-bg-color: #20AE8C;
8686
--sidebar-action-bg: #119475;
87-
--sidebar-item-active: #F6F6E9;
87+
//--sidebar-item-active: #F6F6E9;
8888
--sidebar-item-active-bg: #0D2B47;
8989
--sidebar-color: #F6F6E9;
9090
}
@@ -95,4 +95,42 @@
9595
--sidebar-color: #6c757d;
9696
}
9797
}
98+
99+
.header-ffffff {
100+
--input-bg: #F4F4F5;
101+
--input-color: #0C2236;
102+
--navbar-bg: #FFFFFF;
103+
--navbar-icon-bg: #0C2236;
104+
}
105+
.header-E2E7EC {
106+
--input-bg: #F4F4F5;
107+
--input-color: #0C2236;
108+
--navbar-bg: #E2E7EC;
109+
--navbar-icon-bg: #0C2236;
110+
}
111+
.header-C9D1FB {
112+
--input-bg: rgba(255, 255, 255, 0.5);;
113+
--input-color: #0C2236;
114+
--navbar-bg: #C9D1FB;
115+
--navbar-icon-bg: #0C2236;
116+
}
117+
.header-C1C3CF {
118+
--input-bg: rgba(255, 255, 255, 0.5);
119+
--input-color: #0C2236;
120+
--navbar-bg: #C1C3CF;
121+
--navbar-icon-bg: #0C2236;
122+
}
123+
.header-0C2236 {
124+
--input-bg: rgba(255, 255, 255, 0.3);
125+
--input-color: #0C2236;
126+
--navbar-bg: #0C2236;
127+
--navbar-icon-bg: #C1C3CF;
128+
}
129+
.header-6FB0F9 {
130+
--input-bg: rgba(255, 255, 255, 0.3);
131+
--input-color: #0C2236;
132+
--navbar-bg: rgba(111, 176, 249, 0.4);
133+
--navbar-icon-bg: #0C2236;
134+
}
135+
98136
}

0 commit comments

Comments
 (0)