From 0503887629c57d6d1c6674c935d15c79640c8796 Mon Sep 17 00:00:00 2001
From: Hillel Coren <hillelcoren@gmail.com>
Date: Thu, 4 Oct 2018 22:53:38 +0300
Subject: [PATCH] Navigation

---
 config/app.php                    |   2 +-
 resources/views/header.blade.php  |  94 +++++++++++++++
 resources/views/master.blade.php  | 191 +++++++++++++++++++++++++++++-
 resources/views/sidebar.blade.php |  36 ++++++
 4 files changed, 320 insertions(+), 3 deletions(-)
 create mode 100644 resources/views/header.blade.php
 create mode 100644 resources/views/sidebar.blade.php

diff --git a/config/app.php b/config/app.php
index 01081dcaabfb..d62adfa81d3d 100644
--- a/config/app.php
+++ b/config/app.php
@@ -13,7 +13,7 @@ return [
     |
     */
 
-    'name' => env('APP_NAME', 'Laravel'),
+    'name' => env('APP_NAME', 'Invoice Ninja'),
 
     /*
     |--------------------------------------------------------------------------
diff --git a/resources/views/header.blade.php b/resources/views/header.blade.php
new file mode 100644
index 000000000000..6dd5ea552f67
--- /dev/null
+++ b/resources/views/header.blade.php
@@ -0,0 +1,94 @@
+
+<script>
+
+// https://bulma.io/documentation/components/navbar/
+document.addEventListener('DOMContentLoaded', () => {
+
+    // Get all "navbar-burger" elements
+    const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
+
+    // Check if there are any navbar burgers
+    if ($navbarBurgers.length > 0) {
+
+        // Add a click event on each of them
+        $navbarBurgers.forEach( el => {
+            el.addEventListener('click', () => {
+
+                // Get the target from the "data-target" attribute
+                const target = el.dataset.target;
+                const $target = document.getElementById(target);
+
+                // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
+                el.classList.toggle('is-active');
+                $target.classList.toggle('is-active');
+
+            });
+        });
+    }
+});
+</script>
+
+<header class="hero is-light">
+    <div class="hero-head">
+        <nav class="navbar" role="navigation" aria-label="main navigation">
+            <div class="navbar-brand">
+                <a class="navbar-item" href="https://bulma.io">
+                    <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
+                </a>
+
+                <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
+                    <span aria-hidden="true"></span>
+                    <span aria-hidden="true"></span>
+                    <span aria-hidden="true"></span>
+                </a>
+            </div>
+
+            <div id="navbarBasicExample" class="navbar-menu">
+                <div class="navbar-start">
+                    <a class="navbar-item">
+                        Home
+                    </a>
+
+                    <a class="navbar-item">
+                        Documentation
+                    </a>
+
+                    <div class="navbar-item has-dropdown is-hoverable">
+                        <a class="navbar-link">
+                            More
+                        </a>
+
+                        <div class="navbar-dropdown">
+                            <a class="navbar-item">
+                                About
+                            </a>
+                            <a class="navbar-item">
+                                Jobs
+                            </a>
+                            <a class="navbar-item">
+                                Contact
+                            </a>
+                            <hr class="navbar-divider">
+                            <a class="navbar-item">
+                                Report an issue
+                            </a>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="navbar-end">
+                    <div class="navbar-item">
+                        <div class="buttons">
+                            <a class="button is-primary">
+                                <strong>Sign up</strong>
+                            </a>
+                            <a class="button is-light">
+                                Log in
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </nav>
+    </div>
+</header>
diff --git a/resources/views/master.blade.php b/resources/views/master.blade.php
index 0f5f8b1c0556..3cb571c7e431 100644
--- a/resources/views/master.blade.php
+++ b/resources/views/master.blade.php
@@ -27,7 +27,6 @@
     <meta name="description" content="@yield('meta_description')"/>
     <link href="{{ asset('favicon.png') }}" rel="shortcut icon" type="image/png">
 
-
     <!--
     TODO Setup social sharing info
     <meta property="og:site_name" content="Invoice Ninja"/>
@@ -64,8 +63,196 @@
     <meta name="csrf-token" content="{{ csrf_token() }}">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <link rel="canonical" href="{{ config('ninja.app_url') }}{{ request()->path() }}"/>
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css"/>
+    <script defer src="https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/core.js"></script>
+
 </head>
 <body>
-    Hey Dave :)
+
+    @include('header')
+
+    <div class="section">
+        <div class="columns">
+
+            @include('sidebar')
+
+            <main class="column">
+                <div class="level">
+                    <div class="level-left">
+                        <div class="level-item">
+                            <div class="title">Dashboard</div>
+                        </div>
+                    </div>
+                    <div class="level-right">
+                        <div class="level-item">
+                            <button type="button" class="button is-small">
+                                March 8, 2017 - April 6, 2017
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="columns is-multiline">
+                    <div class="column">
+                        <div class="box">
+                            <div class="heading">Top Seller Total</div>
+                            <div class="title">56,950</div>
+                            <div class="level">
+                                <div class="level-item">
+                                    <div class="">
+                                        <div class="heading">Sales $</div>
+                                        <div class="title is-5">250,000</div>
+                                    </div>
+                                </div>
+                                <div class="level-item">
+                                    <div class="">
+                                        <div class="heading">Overall $</div>
+                                        <div class="title is-5">750,000</div>
+                                    </div>
+                                </div>
+                                <div class="level-item">
+                                    <div class="">
+                                        <div class="heading">Sales %</div>
+                                        <div class="title is-5">25%</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="column">
+                        <div class="box">
+                            <div class="heading">Revenue / Expenses</div>
+                            <div class="title">55% / 45%</div>
+                            <div class="level">
+                                <div class="level-item">
+                                    <div class="">
+                                        <div class="heading">Rev Prod $</div>
+                                        <div class="title is-5">30%</div>
+                                    </div>
+                                </div>
+                                <div class="level-item">
+                                    <div class="">
+                                        <div class="heading">Rev Serv $</div>
+                                        <div class="title is-5">25%</div>
+                                    </div>
+                                </div>
+                                <div class="level-item">
+                                    <div class="">
+                                        <div class="heading">Exp %</div>
+                                        <div class="title is-5">45%</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="column">
+                        <div class="box">
+                            <div class="heading">Feedback Activity</div>
+                            <div class="title">78% &uarr;</div>
+                            <div class="level">
+                                <div class="level-item">
+                                    <div class="">
+                                        <div class="heading">Positive</div>
+                                        <div class="title is-5">1560</div>
+                                    </div>
+                                </div>
+                                <div class="level-item">
+                                    <div class="">
+                                        <div class="heading">Negative</div>
+                                        <div class="title is-5">368</div>
+                                    </div>
+                                </div>
+                                <div class="level-item">
+                                    <div class="">
+                                        <div class="heading">Pos/Neg %</div>
+                                        <div class="title is-5">77% / 23%</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="column">
+                        <div class="box">
+                            <div class="heading">Orders / Returns</div>
+                            <div class="title">75% / 25%</div>
+                            <div class="level">
+                                <div class="level-item">
+                                    <div class="">
+                                        <div class="heading">Orders $</div>
+                                        <div class="title is-5">425,000</div>
+                                    </div>
+                                </div>
+                                <div class="level-item">
+                                    <div class="">
+                                        <div class="heading">Returns $</div>
+                                        <div class="title is-5">106,250</div>
+                                    </div>
+                                </div>
+                                <div class="level-item">
+                                    <div class="">
+                                        <div class="heading">Success %</div>
+                                        <div class="title is-5">+ 28,5%</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="columns is-multiline">
+                    <div class="column is-6">
+                        <div class="panel">
+                            <p class="panel-heading">
+                                Expenses: Daily - $700
+                            </p>
+                            <div class="panel-block">
+                                <figure class="image is-16x9">
+                                    <img src="https://placehold.it/1280x720">
+                                </figure>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="column is-6">
+                        <div class="panel">
+                            <p class="panel-heading">
+                                Refunds: Daily - $200
+                            </p>
+                            <div class="panel-block">
+                                <figure class="image is-16x9">
+                                    <img src="https://placehold.it/1280x720">
+                                </figure>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="column is-6">
+                        <div class="panel">
+                            <p class="panel-heading">
+                                Something
+                            </p>
+                            <div class="panel-block">
+                                <figure class="image is-16x9">
+                                    <img src="https://placehold.it/1280x720">
+                                </figure>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="column is-6">
+                        <div class="panel">
+                            <p class="panel-heading">
+                                Something Else
+                            </p>
+                            <div class="panel-block">
+                                <figure class="image is-16x9">
+                                    <img src="https://placehold.it/1280x720">
+                                </figure>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </main>
+        </div>
+    </div>
 </body>
 </html>
diff --git a/resources/views/sidebar.blade.php b/resources/views/sidebar.blade.php
new file mode 100644
index 000000000000..e537e92b7d4a
--- /dev/null
+++ b/resources/views/sidebar.blade.php
@@ -0,0 +1,36 @@
+<aside class="column is-2">
+    <nav class="menu">
+        <p class="menu-label">
+            General
+        </p>
+        <ul class="menu-list">
+            <li><a class="is-active">Dashboard</a></li>
+            <li><a>Customers</a></li>
+        </ul>
+        <p class="menu-label">
+            Administration
+        </p>
+        <ul class="menu-list">
+            <li><a>Team Settings</a></li>
+            <li>
+                <a class="">Manage Your Team</a>
+                <ul>
+                    <li><a>Members</a></li>
+                    <li><a>Plugins</a></li>
+                    <li><a>Add a member</a></li>
+                </ul>
+            </li>
+            <li><a>Invitations</a></li>
+            <li><a>Cloud Storage Environment Settings</a></li>
+            <li><a>Authentication</a></li>
+        </ul>
+        <p class="menu-label">
+            Transactions
+        </p>
+        <ul class="menu-list">
+            <li><a>Payments</a></li>
+            <li><a>Transfers</a></li>
+            <li><a>Balance</a></li>
+        </ul>
+    </nav>
+</aside>