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!