Czy jest to poprawnie zaimplementowany fixed header i sidebar layout?

Chciałbym stworzyć taki layout. W React'cie dróg prowadzących do tego jest co najmniej tuzin. Moją implementację można podejrzeć tutaj.

W podkatalogu react-holy-grail-layout/src/layout znajdują się pliki layout'u. W react-holy-grail-layout/src/components/app.js znajduje się przykład wykorzystania.

Moje wątpliwości to m.in.:

• jeżeli chcę móc dodać customowe style do poszczególnych komponentów layout'u, to czy prawidłowym rozwiązaniem jest zrobienie:

import Header from '../layout/Header'
import CSSModules from 'react-css-modules'
import styles from './Header.css'

// Not sure if this is the right way to add custom styles ...
export default CSSModules(Header, styles)

• czy uzycie kontekstu, żeby przekazać do dowolnego elementu wewnątrz layout'u funkcji otwierającej/zamykającej sidenav jest dobrym rozwiązaniem? Czy są jakieś inne?

import React, { PropTypes } from 'react'

const Button = (props, { onSideNavToggle }) => (
  <button onClick={onSideNavToggle}>Toggle</button>
)

// not sure if this is the right way to pass this function here ...
Button.contextTypes = {
  onSideNavToggle: PropTypes.func.isRequired
}

export default Button

1. Nie wiem, unikam zabawy w importowane style, bo więcej miałem z tego problemów niż korzyści (ale to może tylko nieznajomość kolejnego super-narzędzia rozwiązującego wszystkie problemy ludzkości)
2. Wydaje się ok. Jest to raczej globalna rzecz, którą ciężko by było przerzucać po wszystkich komponentach, a alternatywne rozwiązania wydają się tylko gorsze (niestety React bywa czasem nadskomplikowany). Nie podoba mi się tylko nazwa "onToggle" kojarzy się z callbackiem wykonywanym już PO togglu. Button powinien wywołać AKCJĘ, więc bardziej toggleSideNav.

@dzek69 Co do pierwszego punktu to też chyba to oleję i zostanę przy starym dobrym scss. Próbowałem wczoraj zaimplementować theaming i jest to nie lada wyzwanie.

Co do drugiego punktu to stworzyłem sobie HOC i trochę wzorując się na connect redux'a możemy sobie wybrać które rzeczy z contextu chcemy, a funkcja zrobi resztę za nas (co by manualnie nie trzeba było contextTypes wypisywać). Wyszło całkiem fajnie. Spróbuję zaimplementować caly layout w ReactJS i wrzucę gotowy kod :)

Trochę czasu mi zajmie doprowadzenie kodu do producton-ready ale gdyby ktoś potrzebował to prototyp jest tutaj https://github.com/3amprogrammer/react-holy-grail-layout
Dodałem również theming z użyciem CSSModules.

Theming lepiej jednak pozostawić scssowi. Konieczne jest tworzenie n + 1 plików css, gdzie n to ilość theme + jeden na style współdzielone. Straszny burdel się przez to robi czasami, bo dla głupiego buttona mamy 1 plik .js i 5 .css... Póki co nie widzę lepszego rozwiązania niż stary dobry scss. W końcu KISS? W tym wypadku dodajemy klasę o nazwię theme do topowego komponentu i problem z głowy. Według mnie łatwiej to będzie utrzymać i przede wszystkim będzie czytelniej.

/* syntactic sugar */
@mixin theme($name) {
  :global(.#{$name}) {
    @content
  }
}

@import '../../styles/utils';

%common {
  position: fixed;
  top: 60px;
  left: 0;
  width: 60px;
  height: 100%;
  padding: 10px;
}

%open {
  width: 260px;
}

@include theme('eerie-black') {
  .side-nav {
    @extend %common;
    background-color: #242424;
    color: #a3a3a3;

    &--open {
      @extend .side-nav;
      @extend %open;
    }
  }
}

@include theme('midnight-blue') {
  .side-nav {
    @extend %common;
    background-color: #32475c;
    color: #ffffff;

    &--open {
      @extend .side-nav;
      @extend %open;
    }
  }
}