AdminLTE: Using with React and FlowRouter breaks Control-Sidebar and height bug

521 views Asked by At

I've tried implementing the AdminLTE Control Panel Bootstrap Template (AdminLTE) with my Meteor + React Project and everything is working perfectly (except one thing - see below) using the code below for my MasterPage:

import React from 'react'

import { Header } from './masterpage/Header'
import { MainSideBar } from './masterpage/MainSideBar'
import { ControlSideBar } from './masterpage/ControlSideBar'
import { Footer } from './masterpage/Footer'

export const MasterPage = ({content}) =>
    <div className="hold-transition skin-green sidebar-mini">
        <div className="wrapper">
            <Header />
            <MainSideBar />
            {content}
            <Footer />
            <ControlSideBar />
            <div className="control-sidebar-bg"></div>
        </div>
    </div>

Here is what happens with my routing:

import { FlowRouter } from 'meteor/kadira:flow-router'
import React from 'react'
import { mount } from 'react-mounter'

//Layouts and Pages
import { MasterPage } from '../../ui/layouts/MasterPage'
import { HomePage } from '../../ui/pages/HomePage'

FlowRouter.route('/', {
    name: 'homepage',
    action() {
        mount(MasterPage, {
            content: <HomePage />
        })
    }
})

After implementing this everything works great except the Control Sidebar doesn't open upon clicking the toggle button:

<li>
    <a href="#" data-toggle="control-sidebar">
        <i className="fa fa-gears"></i>
    </a>
</li>

I've tried opening it via CSS and that seems to work fine. Another issue I have is that now it doesn't stretch the full width of the window. There is a ton of white-space at the bottom that's just gone unused and it doesn't look good.

All these issues began the moment I implemented FlowRouter (it worked great before that). Am I implementing FlowRouter incorrectly? If so, what should I do?

Any help would be much appreciated!

0

There are 0 answers