Skip to content

Commit a26c16a

Browse files
spektra2147spektra2147
committed
update sidebar
1 parent e4443d8 commit a26c16a

File tree

6 files changed

+374
-58
lines changed

6 files changed

+374
-58
lines changed

‎resources/css/ocify-sidebar.css‎

Lines changed: 281 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,281 @@
1+
#wrapper {
2+
padding-left: 0;
3+
margin-top: 61px;
4+
-webkit-transition: all 0.5s ease;
5+
-moz-transition: all 0.5s ease;
6+
-o-transition: all 0.5s ease;
7+
transition: all 0.5s ease;
8+
overflow: hidden;
9+
position: fixed;
10+
z-index: 1;
11+
}
12+
13+
#wrapper.toggled {
14+
padding-left: 240px;
15+
overflow: hidden;
16+
}
17+
18+
#sidebar-wrapper {
19+
z-index: 1000;
20+
position: fixed;
21+
left: 240px;
22+
width: 0;
23+
height: 100%;
24+
margin-left: -240px;
25+
overflow-y: auto;
26+
background: #30426A;
27+
-webkit-transition: all 0.5s ease;
28+
-moz-transition: all 0.5s ease;
29+
-o-transition: all 0.5s ease;
30+
transition: all 0.5s ease;
31+
}
32+
33+
#wrapper.toggled #sidebar-wrapper {
34+
width: 240px;
35+
}
36+
37+
#page-content-wrapper {
38+
position: absolute;
39+
padding: 15px;
40+
width: 100%;
41+
overflow-x: hidden;
42+
}
43+
44+
.xyz {
45+
min-width: 360px;
46+
}
47+
48+
#wrapper.toggled #page-content-wrapper {
49+
position: relative;
50+
margin-right: 0px;
51+
}
52+
53+
.fixed-brand {
54+
width: auto;
55+
}
56+
57+
/* Sidebar Styles */
58+
59+
.sidebar-nav {
60+
position: absolute;
61+
top: 0;
62+
width: 70px;
63+
margin: 0;
64+
padding: 0;
65+
background-color: #273759 !important;
66+
list-style: none;
67+
height: 95vh;
68+
}
69+
70+
.sidebar-nav .fa-stack {
71+
font-size: 22px;
72+
color: #BFD3E9;
73+
line-height: 39px;
74+
}
75+
76+
.sidebar-nav .sidebar-items {
77+
position: absolute;
78+
width: 170px;
79+
top: 0;
80+
margin-left: 67px;
81+
background-color: transparent !important;
82+
padding-left: 0;
83+
}
84+
85+
.sidebar-nav .sidebar-items li.active {
86+
background-color: #273759 !important;
87+
}
88+
89+
.sidebar-nav .sidebar-icon {
90+
text-align: center;
91+
float: left;
92+
font-size: 22px;
93+
width: 70px;
94+
}
95+
96+
.sidebar-nav .sidebar-title {
97+
padding-left: 20px;
98+
font-size: 18px;
99+
font-weight: 400;
100+
}
101+
102+
.sidebar-nav .sidebar-title.active {
103+
color: #BFD3E9 !important;
104+
}
105+
106+
.sidebar-nav li {
107+
line-height: 40px;
108+
height: auto;
109+
display: flex;
110+
}
111+
112+
.sidebar-nav .sidebar-main.active {
113+
background-color: #30426A !important;
114+
border-left: 3px solid #4eb6a2 !important;
115+
padding-right: 3px;
116+
}
117+
118+
.sidebar-nav li a {
119+
display: block;
120+
cursor: pointer;
121+
text-decoration: none;
122+
color: #788BAA !important;
123+
background-color: transparent !important;
124+
}
125+
126+
.sidebar-nav li a:active,
127+
.sidebar-nav li a:focus {
128+
text-decoration: none;
129+
}
130+
131+
.sidebar-nav > .sidebar-brand {
132+
height: 65px;
133+
font-size: 18px;
134+
line-height: 60px;
135+
}
136+
137+
.sidebar-nav > .sidebar-brand a {
138+
color: #999999;
139+
}
140+
141+
.sidebar-nav > .sidebar-brand a:hover {
142+
color: #fff;
143+
background: none;
144+
}
145+
146+
.no-margin {
147+
margin: 0;
148+
}
149+
150+
@media (min-width: 768px) {
151+
.top-bar {
152+
width: calc(100% - 240px) !important;
153+
}
154+
155+
.web-sidebar-btn {
156+
display: inline-block !important;
157+
}
158+
159+
.mobile-sidebar-btn {
160+
display: none;
161+
}
162+
163+
#wrapper {
164+
padding-left: 240px;
165+
}
166+
167+
.fixed-brand {
168+
width: 240px;
169+
}
170+
171+
#wrapper.toggled {
172+
padding-left: 0;
173+
}
174+
175+
#sidebar-wrapper {
176+
width: 240px;
177+
}
178+
179+
#wrapper.toggled #sidebar-wrapper {
180+
width: 240px;
181+
}
182+
183+
#wrapper.toggled-2 #sidebar-wrapper {
184+
width: 70px;
185+
}
186+
187+
#wrapper.toggled-2 #sidebar-wrapper:hover {
188+
width: 240px;
189+
}
190+
191+
192+
#page-content-wrapper {
193+
padding: 20px;
194+
position: relative;
195+
-webkit-transition: all 0.5s ease;
196+
-moz-transition: all 0.5s ease;
197+
-o-transition: all 0.5s ease;
198+
transition: all 0.5s ease;
199+
}
200+
201+
#wrapper.toggled #page-content-wrapper {
202+
position: relative;
203+
margin-right: 0;
204+
padding-left: 240px;
205+
}
206+
207+
#wrapper.toggled-2 #page-content-wrapper {
208+
position: relative;
209+
margin-right: 0;
210+
margin-left: -200px;
211+
-webkit-transition: all 0.5s ease;
212+
-moz-transition: all 0.5s ease;
213+
-o-transition: all 0.5s ease;
214+
transition: all 0.5s ease;
215+
width: auto;
216+
217+
}
218+
219+
#main.wide-content {
220+
margin-left: 70px;
221+
}
222+
}
223+
224+
.logo-bar {
225+
height: 61px;
226+
}
227+
228+
.logo-bar .logo-bar-cell {
229+
width: 50px;
230+
padding-top: 8px;
231+
}
232+
233+
.logo-bar-table {
234+
height: 61px;
235+
}
236+
237+
.logo-bar .logo-bar-cell .button-menu-mobile {
238+
border: 0;
239+
}
240+
241+
#main {
242+
-webkit-transition: all 0.5s ease;
243+
-moz-transition: all 0.5s ease;
244+
-o-transition: all 0.5s ease;
245+
transition: all 0.5s ease;
246+
}
247+
248+
.web-sidebar-btn {
249+
display: none;
250+
}
251+
252+
.top-bar {
253+
height: 61px;
254+
width: calc(100% - 70px);
255+
}
256+
257+
.sidebar-nav .sub-item {
258+
display: block;
259+
}
260+
261+
.sidebar-nav .sub-item svg {
262+
margin-bottom: 2px;
263+
margin-right: 11px;
264+
}
265+
266+
.sidebar-nav .nav-item .nav {
267+
padding-left: 8px;
268+
}
269+
270+
.sidebar-nav .nav-item:hover,.sidebar-nav .nav-item:focus,.sidebar-nav .nav-item:active,.sidebar-nav .nav-item:focus-visible {
271+
background: #273759 !important;
272+
}
273+
274+
275+
.sidebar-nav .sub-item .sidebar-title {
276+
padding-left: 0;
277+
}
278+
279+
.nav-stacked .nav-item + .nav-item {
280+
margin-top:0;
281+
}

‎resources/img/menu-icon.svg‎

Lines changed: 8 additions & 0 deletions
Loading

‎resources/img/submenu-icon.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎resources/js/ocify-sidebar.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
$("#menu-toggle").click(function(e) {
2+
e.preventDefault();
3+
$("#wrapper").toggleClass("toggled");
4+
});
5+
$("#menu-toggle-2").click(function(e) {
6+
e.preventDefault();
7+
$("#wrapper").toggleClass("toggled-2");
8+
$("#main").toggleClass("wide-content");
9+
});
10+
11+
function initMenu() {
12+
$('#ocify-menu li a').click(
13+
function() {
14+
var checkElement = $(this).next();
15+
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
16+
return false;
17+
}
18+
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
19+
$('#ocify-menu ul:visible').slideUp('normal');
20+
checkElement.slideDown('normal');
21+
return false;
22+
}
23+
}
24+
);
25+
}
26+
$(document).ready(function() {initMenu();});

0 commit comments

Comments
 (0)