diff --git a/static/src/js/app.js b/static/src/js/app.js index 617e092..67b9754 100644 --- a/static/src/js/app.js +++ b/static/src/js/app.js @@ -7,6 +7,7 @@ import ProjectImagesTypes from './components/index/project-images-types'; import ProjectImagesMain from './components/index/project-images-main'; import NavBar from './components/navbar/navbar'; +import Breadcrumbs from './components/breadcrumbs'; if ($('body').hasClass('index')) { // Render components on index React.render(, document.getElementById('project-images-types')); @@ -16,3 +17,7 @@ if ($('body').hasClass('index')) { // Render components on index if ($('navbar')) { React.render(, $('navbar')[0]); } + +if ($('#breadcrumbs')) { + React.render(, $('#breadcrumbs')[0]); +} diff --git a/static/src/js/components/breadcrumbs.js b/static/src/js/components/breadcrumbs.js new file mode 100644 index 0000000..1224430 --- /dev/null +++ b/static/src/js/components/breadcrumbs.js @@ -0,0 +1,40 @@ +import React from 'react'; + +let { + Breadcrumb, + BreadcrumbItem +} = require('react-bootstrap'); + +export default class Breadcrumbs extends React.Component { + render() { + const parts = location.pathname.split('/').slice(1, -1); + var elements = []; + for (var i = 0; i < parts.length; i++) { + var dirs = []; + for (var j = 0; j <= i; j++) { + dirs.push(parts[j]); + } + if (i === (parts.length - 1)) { + elements.push( +
  • + {parts[i]} +
  • + ); + } else { + var url = '/' + dirs.join('/') + '/'; + elements.push( +
  • + + {parts[i]} + +
  • + ); + } + } + return ( +
      + { elements } +
    + ); + } +} diff --git a/templates/content_base.html b/templates/content_base.html index 1aa9f18..20b71dc 100644 --- a/templates/content_base.html +++ b/templates/content_base.html @@ -9,6 +9,9 @@

    {% block pageTitle %}{% endblock %}

    +
    + +
    {% block content %}{% endblock %}