Started working on navbar.

4 lat temu · 1e2c7387ae
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,6 +1,8 @@
 {
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.12.0",
    "bootstrap": "^4.4.1",
    "font-awesome": "^4.7.0",
    "jquery": "^3.4.1",
    "linkstate": "^1.1.1",
    "popper.js": "^1.16.1",
--- a/frontend/rollup.config.js
+++ b/frontend/rollup.config.js
@@ -24,6 +24,23 @@ export default {
      'node_modules/bootstrap/dist/css/bootstrap.min.css': 'dist/css/bootstrap.min.css',
      'node_modules/bootstrap/dist/js/bootstrap.min.js': 'dist/js/bootstrap.min.js',
      'node_modules/jquery/dist/jquery.min.js': 'dist/js/jquery.min.js',
      'node_modules/@fortawesome/fontawesome-free/js/fontawesome.min.js': 'dist/js/fontawesome.min.js',
      'node_modules/@fortawesome/fontawesome-free/css/all.min.css': 'dist/css/all.min.css',
      'node_modules/@fortawesome/fontawesome-free/webfonts/fa-regular-400.eot': 'dist/webfonts/fa-regular-400.eot',
      'node_modules/@fortawesome/fontawesome-free/webfonts/fa-regular-400.svg': 'dist/webfonts/fa-regular-400.svg',
      'node_modules/@fortawesome/fontawesome-free/webfonts/fa-regular-400.ttf': 'dist/webfonts/fa-regular-400.ttf',
      'node_modules/@fortawesome/fontawesome-free/webfonts/fa-regular-400.woff': 'dist/webfonts/fa-regular-400.woff',
      'node_modules/@fortawesome/fontawesome-free/webfonts/fa-regular-400.woff2': 'dist/webfonts/fa-regular-400.woff2',
      'node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.eot': 'dist/webfonts/fa-solid-900.eot',
      'node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.svg': 'dist/webfonts/fa-solid-900.svg',
      'node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.ttf': 'dist/webfonts/fa-solid-900.ttf',
      'node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff': 'dist/webfonts/fa-solid-900.woff',
      'node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff2': 'dist/webfonts/fa-solid-900.woff2',
      'node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.eot': 'dist/webfonts/fa-brands-400.eot',
      'node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.svg': 'dist/webfonts/fa-brands-400.svg',
      'node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.ttf': 'dist/webfonts/fa-brands-400.ttf',
      'node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.woff': 'dist/webfonts/fa-brands-400.woff',
      'node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.woff2': 'dist/webfonts/fa-brands-400.woff2',
      verbose: true
    }),
    buble({jsx: 'h'}),
--- a/frontend/src/html/index.html
+++ b/frontend/src/html/index.html
@@ -2,8 +2,10 @@
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="/css/all.min.css" />
    <script language="javascript" src="/js/jquery.min.js"></script>
    <script language="javascript" src="/js/bootstrap.min.js"></script>
    <script language="javascript" src="/js/fontawesome.min.js"></script>
  </head>
  <body>
    <script language="javascript" src="/js/app.min.js"></script>
--- a/frontend/src/js/component/wb-app.js
+++ b/frontend/src/js/component/wb-app.js
@@ -3,12 +3,14 @@ import WBTabs from 'wb-tabs';
 import WBTable from 'wb-table';
 import WBPagination from 'wb-pagination';
 import WBProjectListing from 'wb-project-listing';
 import WBNavbar from 'wb-navbar';

 class WBApp extends Component {
  render({}, { activePage }) {
    return (
      <div>
        <h1>WBApp</h1>
        <h1>WBApp <i class="fab fa-adobe"></i></h1>
        <WBNavbar />
        <WBProjectListing arvHost="api.arkau.roche.com"
          arvToken="v2/arkau-gj3su-uf4hnu2o2qkvm8j/15kla38mafzq6b31d5t74ynhk6iuy32v1ticslodr0obvvhde9"
          itemsPerPage="5" />
--- a/frontend/src/js/component/wb-navbar.js
+++ b/frontend/src/js/component/wb-navbar.js
@@ -0,0 +1,49 @@
 import { h, Component } from 'preact';

 class WBNavbar extends Component {
  render() {
    return (
      <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">Workbench Advanced</a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#"><i class="fas fa-user"></i> Log In</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Dropdown
              </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled" href="#">Disabled</a>
            </li>
          </ul>
          <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
          </form>
        </div>
      </nav>
    );
  }
 }

 export default WBNavbar;