mohiit1502/PictureStory-v2
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixed sidebar bug

Browse Source
This commit is contained in:
vaasu
2019-11-01 14:21:44 +05:30
parent a3c377c18a
commit 7440c26a5c
1 changed files with 19 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
client/src/app/components/molecules/SideBar/SideBar.jsx
View File

@@ -1,15 +1,11 @@
import React, {useEffect} from 'react'; import React, {useEffect} from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import SideBarTab from './SideBarTab'; import SideBarTab from './SideBarTab';
import * as $ from 'jquery' import $ from 'jquery'
const SideBar = props => { const SideBar = props => {
useEffect(() => { useEffect(() => {
$('#sidebarCollapse').on('click', () => {
$('#sidebar').toggleClass('active');
$('.hideable').toggleClass('hide');
});
$('#sidebar.active > span').on('click', () => { $('#sidebar.active > span').on('click', () => {
$('#sidebar').css('transform', 'translateX(85px)'); $('#sidebar').css('transform', 'translateX(85px)');
$('#sidebar').css('box-shadow', 'rgb(224, 151, 32) 10px 10px 30px'); $('#sidebar').css('box-shadow', 'rgb(224, 151, 32) 10px 10px 30px');
@@ -17,7 +13,8 @@ const SideBar = props => {
}); });
$('*').on('click', (e) => { $('*').on('click', (e) => {
// e.stopPropagation(); // e.stopPropagation();
if(e.target.id !== 'pullOutButton' && e.target.id !== 'sidebar') { console.log($(e.target).closest('#sidebar'))
if($(e.target).closest('#sidebar').length === 0) {
$('#sidebar').css('transform', 'translateX(0px)'); $('#sidebar').css('transform', 'translateX(0px)');
$('#sidebar').css('box-shadow', ''); $('#sidebar').css('box-shadow', '');
$('.triangle').addClass('animation'); $('.triangle').addClass('animation');
@@ -25,6 +22,21 @@ const SideBar = props => {
}) })
}) })
const toggleSidebar = () => {
$('#sidebar').toggleClass('active');
$('.hideable').toggleClass('hide');
const position = $('#sidebar').css('transform').split(/[()]/)[1]
const currentX = +position.split(',')[4]
console.log(currentX)
console.log($('#sidebar').css('transform'))
console.log($('#sidebar').css('transform').split(/[()]/))
if (currentX && currentX === 255) {
$('#sidebar').css('transform', 'translateX(85px)');
} else if (currentX && currentX === 85) {
$('#sidebar').css('transform', 'translateX(255px)');
}
}
const tabsData = [ const tabsData = [
{'href': 'homeSubmenu', 'tabImage': 'fa-home', 'tabText': 'Home', 'activeClass': true, 'subList': false}, {'href': 'homeSubmenu', 'tabImage': 'fa-home', 'tabText': 'Home', 'activeClass': true, 'subList': false},
{'href': 'about', 'tabImage': 'fa-briefcase', 'tabText': 'About', 'activeClass': false, 'subList': false}, {'href': 'about', 'tabImage': 'fa-briefcase', 'tabText': 'About', 'activeClass': false, 'subList': false},
@@ -40,7 +52,7 @@ const SideBar = props => {
<nav id="sidebar" className="c-SideBar active"> <nav id="sidebar" className="c-SideBar active">
<span className="triangle animation" id="pullOutButton"></span> <span className="triangle animation" id="pullOutButton"></span>
<div className="sidebar-header"> <div className="sidebar-header">
<button type="button" id="sidebarCollapse" className="btn btn-info"> <button type="button" id="sidebarCollapse" className="btn btn-info" onClick={toggleSidebar}>
<i className="fas fa-align-justify"></i> <i className="fas fa-align-justify"></i>
</button> </button>
<h3 className="logotext">Ecstatica</h3> <h3 className="logotext">Ecstatica</h3>