skeleton app

app/Http/Controllers/DashboardController.php

@@ -3,6 +3,7 @@
 namespace App\Http\Controllers;
 
 use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
 
 class DashboardController extends Controller
 {

resources/js/app.js

@@ -12,6 +12,5 @@ import './bootstrap';
  * or customize the JavaScript scaffolding to fit your unique needs.
  */
 
-import './components/Example';
 import './views/Dashboard';
 import './views/Bookslist';

resources/js/components/Example.jsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-
-function Example() {
-    return (
-        <div className="container">
-            <div className="row justify-content-center">
-                <div className="col-md-8">
-                    <div className="card">
-                        <div className="card-header">Example Component</div>
-
-                        <div className="card-body">I'm an example component!</div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
-}
-
-export default Example;
-
-if (document.getElementById('example')) {
-    const Index = ReactDOM.createRoot(document.getElementById("example"));
-
-    Index.render(
-        <React.StrictMode>
-            <Example/>
-        </React.StrictMode>
-    )
-}

resources/js/components/Sidebar.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+function Sidebar() {
+    return (
+        <div className="sidebar">
+            <ul>
+                <li><a href='/'><i className="fas fa-chart-line"></i></a></li>
+                <li><a href='/books'><i className="fas fa-book"></i></a></li>
+            </ul>
+        </div>
+    )
+};
+
+export default Sidebar;

resources/js/views/Bookslist.jsx

@@ -1,19 +1,24 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import Sidebar from '../components/Sidebar';
 
 const Bookslist = () => {
     return (
-        <div className="container">
+        <React.Fragment>
-            <div className="row justify-content-center">
+            <Sidebar/>
-                <div className="col-md-8">
-                    <div className="card">
-                        <div className="card-header">NovelMetrix</div>
 
-                        <div className="card-body">Bookslist</div>
+            <div className="container">
+                <div className="row justify-content-center">
+                    <div className="col-md-8">
+                        <div className="card">
+                            <div className="card-header">NovelMetrix</div>
+
+                            <div className="card-body">Bookslist</div>
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
+        </React.Fragment>
     );
 }
 

resources/js/views/Dashboard.jsx

@@ -1,19 +1,39 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import Sidebar from '../components/Sidebar';
 
 const Dashboard = () => {
     return (
-        <div className="container">
+        <React.Fragment>
-            <div className="row justify-content-center">
+            <Sidebar/>
-                <div className="col-md-8">
+            
-                    <div className="card">
+            <div className="content">
-                        <div className="card-header">NovelMetrix</div>
+                <div className="container-fluid">
+                    <div className="row">
+                        <div className="col-md-6">
+                            <div className="books-per-month">
+                                <span className="block_name">Boeken per maand per genre</span>
+                            </div>
+                        </div>
 
-                        <div className="card-body">Dashboard</div>
+                        <div className="col-md-3">
+                            <div className="genresPercent">
+                                <span className="block_name">Genres</span>
+                            </div>
+                        </div>
+                        <div className="col-md-3">
+                            <div className="ratings">
+                                <span className="block_name">Ratings</span>
+                            </div>
+
+                            <div className="ratings languages">
+                                <span className="block_name">Talen</span>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
+        </React.Fragment>
     );
 }
 

resources/sass/_login.scss

@@ -0,0 +1,79 @@
+$color_1: #aaa;
+
+.login_overlay {
+	background: #eee;
+	position: absolute;
+	z-index: 2;
+	width: 100%;
+	height: 100%;
+	top: 0;
+}
+
+.login {
+	width: 350px;
+	min-height: 300px;
+	position: absolute;
+	z-index: 3;
+	top: 50%;
+	left: 50%;
+	-ms-transform: translateX(-50%) translateY(-50%);
+	transform: translateX(-50%) translateY(-50%);
+	border-radius: 5px;
+
+	form {
+		background: #ffffff;
+		box-shadow: 1px 1px 1px rgba(0,0,0,.05);
+		padding: 30px;
+
+		input {
+			background: #f9f9f9;
+			border: none;
+			border-radius: 5px;
+			padding: 10px 15px;
+			font-size: 13px;
+		}
+
+		.icon {
+			position: absolute;
+			right: 44px;
+			margin-top: 7px;
+			i {
+				color: $color_1;
+				font-size: 13px;
+			}
+		}
+
+		button {
+			background: #364c67;
+			width: 100%;
+			border: none;
+			padding: 10px 15px;
+			font-size: 13px;
+			&:hover {
+				background: #122235;
+			}
+		}
+	}
+
+	img {
+		display: block;
+		width: 200px;
+		margin: auto;
+		margin-bottom: 30px;
+	}
+
+	.login_logo {
+		width: 120px;
+		margin: auto;
+		margin-top: -65px;
+		background: #ffffff;
+		border-radius: 50%;
+		img {
+			width: 100%;
+		}
+	}
+
+  .register{
+    width:450px;
+  }
+}

resources/sass/_sidebar.scss

@@ -0,0 +1,74 @@
+$color_1: rgba(255,255,255,0.25);
+$color_2: rgba(255,255,255,0.3);
+$color_3: rgba(255,255,255,0.5);
+$color_4: #ffffff;
+
+.sidebar {
+	background: #333333;
+	width: 70px;
+	height: 100vh;
+	position: fixed;
+	padding-top: 47px;
+
+	span {
+		color: $color_1;
+		padding: 20px 20px 10px 20px;
+		display: block;
+	}
+
+	h3 {
+		color: $color_2;
+		font-size: 12px;
+		padding-bottom: 5px;
+	}
+
+	ul {
+		padding: 0;
+		margin: 0;
+
+		li {
+			color: $color_3;
+			list-style-type: none;
+			font-weight: 300;
+			cursor: pointer;
+			font-size: 12px;
+			padding: 20px 0px;
+			text-align: center;
+
+			i {
+				margin-right: 5px;
+				color: $color_3;
+				width: 15px;
+				font-size: 15px;
+			}
+		}
+
+		.active {
+			li {
+				background: rgba(0,0,0,0.3);
+				color: $color_4;
+				background: rgba(0,0,0,0.3) !important;
+
+				i {
+					color: $color_4;
+				}
+			}
+		}
+
+		a {
+			text-decoration: none;
+		}
+	}
+    
+	button {
+		background: none;
+		border: none;
+	}
+
+	.bottom-menu {
+		position: absolute;
+		bottom: 0;
+		width: 100%;
+		border-top: solid 1px rgba(255,255,255,0.2);
+	}
+}

resources/sass/_topbar.scss

@@ -0,0 +1,71 @@
+$color_1: #ffffff;
+
+/* Topbar */
+
+.navbar.topbar {
+	background: #405181 !important;
+	width: 100%;
+	min-height: 50px;
+	padding-left: 10px;
+	position: fixed;
+	z-index: 1;
+
+	.logo {
+		width: 150px;
+		display: inline-block;
+	}
+}
+
+.topbar_right {
+	float: right;
+	padding: 23px 0;
+	margin-right: 30px;
+
+	ul {
+		margin: 0;
+
+		li {
+			list-style-type: none;
+			display: inline-block;
+			margin: 0 10px;
+			cursor: pointer;
+
+			i {
+				color: $color_1;
+				font-size: 14px;
+			}
+
+			&:hover {
+				i {
+					color: $color_1;
+				}
+			}
+		}
+	}
+}
+
+/* Choose Year */
+
+.chooseYear {
+	padding: 15px 15px;
+	color: $color_1;
+	display: inline-block;
+	span {
+		display: inline-block;
+		color: $color_1;
+	}
+	i {
+		color: $color_1;
+		font-size: 13px;
+	}
+	select {
+		font-size: 13px;
+		background: none;
+		color: $color_1;
+		padding: 5px;
+		&:focus-visible {
+			border: none !important;
+			outline: none !important;
+		}
+	}
+}

resources/sass/app.scss

@@ -1,8 +1,45 @@
 // Fonts
-@import url('https://fonts.bunny.net/css?family=Nunito');
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 
 // Variables
-@import 'variables';
+@import 'login';
+@import 'topbar';
+@import 'sidebar';
 
 // Bootstrap
 @import 'bootstrap/scss/bootstrap';
+
+html, body{
+    background:#fafdfb;
+    margin:0;
+    padding:0;
+    font-family: "Poppins", sans-serif;
+    letter-spacing: .3px;
+    font-weight: 400;
+    font-size: 14px;
+    color:#333;
+}
+
+.content{
+    padding: 80px 30px 30px 100px;
+}
+
+.books-per-month, .genresPercent, .books-per-country, .book, .ratings, .readed{
+    background: #ffffff;
+    padding: 20px;
+    box-shadow: 0 .15rem 1.75rem 0 rgba(58, 59, 69, .15);
+    margin-bottom: 20px;
+    border-radius: 10px;
+    padding:30px;
+  }
+
+  span.block_name {
+    color: #777;
+    font-weight: 300;
+    border-bottom: solid 1px #f5f6fa;
+    width: 100%;
+    display: block;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+    font-size: 14px;
+}

resources/views/auth/login.blade.php

@@ -1,73 +1,35 @@
 @extends('layouts.app')
 
 @section('content')
-<div class="container">
+<div class='login_overlay'></div>
-    <div class="row justify-content-center">
+    <div class='login'>
-        <div class="col-md-8">
+        <img class="logo_text" src="/images/logo.png" />
-            <div class="card">
-                <div class="card-header">{{ __('Login') }}</div>
 
-                <div class="card-body">
+        <form method="POST" action="{{ route('login') }}">
-                    <form method="POST" action="{{ route('login') }}">
+            @csrf
-                        @csrf
+            <div class="mb-3">
-
+                <span class='icon'>
-                        <div class="row mb-3">
+                    <i class="fas fa-user"></i>
-                            <label for="email" class="col-md-4 col-form-label text-md-end">{{ __('Email Address') }}</label>
+                </span>
-
+                <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email" placeholder="E-mailadres" autofocus>
-                            <div class="col-md-6">
+                @error('email')
-                                <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus>
+                    <span class="invalid-feedback" role="alert">
-
+                        <strong>{{ $message }}</strong>
-                                @error('email')
+                    </span>
-                                    <span class="invalid-feedback" role="alert">
+                @enderror
-                                        <strong>{{ $message }}</strong>
-                                    </span>
-                                @enderror
-                            </div>
-                        </div>
-
-                        <div class="row mb-3">
-                            <label for="password" class="col-md-4 col-form-label text-md-end">{{ __('Password') }}</label>
-
-                            <div class="col-md-6">
-                                <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="current-password">
-
-                                @error('password')
-                                    <span class="invalid-feedback" role="alert">
-                                        <strong>{{ $message }}</strong>
-                                    </span>
-                                @enderror
-                            </div>
-                        </div>
-
-                        <div class="row mb-3">
-                            <div class="col-md-6 offset-md-4">
-                                <div class="form-check">
-                                    <input class="form-check-input" type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>
-
-                                    <label class="form-check-label" for="remember">
-                                        {{ __('Remember Me') }}
-                                    </label>
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="row mb-0">
-                            <div class="col-md-8 offset-md-4">
-                                <button type="submit" class="btn btn-primary">
-                                    {{ __('Login') }}
-                                </button>
-
-                                @if (Route::has('password.request'))
-                                    <a class="btn btn-link" href="{{ route('password.request') }}">
-                                        {{ __('Forgot Your Password?') }}
-                                    </a>
-                                @endif
-                            </div>
-                        </div>
-                    </form>
-                </div>
             </div>
-        </div>
+            <div class="mb-3">
+                <span class='icon'>
+                    <i class="fas fa-key"></i>
+                </span>
+                <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="current-password" placeholder="Wachtwoord">
+                @error('password')
+                    <span class="invalid-feedback" role="alert">
+                        <strong>{{ $message }}</strong>
+                    </span>
+                @enderror
+            </div>
+            <button type="submit" class="btn btn-primary">Inloggen</button>
+        </form>
     </div>
-</div>
 @endsection

resources/views/layouts/app.blade.php

@@ -7,7 +7,7 @@
     <!-- CSRF Token -->
     <meta name="csrf-token" content="{{ csrf_token() }}">
 
-    <title>{{ config('app.name', 'Laravel') }}</title>
+    <title>NovelMetrix</title>
 
     <!-- Fonts -->
     <link rel="dns-prefetch" href="//fonts.bunny.net">
@@ -19,10 +19,10 @@
 </head>
 <body>
     <div id="app">
-        <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
+        <nav class="topbar navbar navbar-expand-md navbar-light bg-white shadow-sm">
-            <div class="container">
+            <div class="container-fluid">
                 <a class="navbar-brand" href="{{ url('/') }}">
-                    {{ config('app.name', 'Laravel') }}
+                    <img class="logo" src="/images/logo_white.png" />
                 </a>
                 <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
                     <span class="navbar-toggler-icon"></span>
@@ -77,5 +77,6 @@
             @yield('content')
         </main>
     </div>
+    <script src="https://kit.fontawesome.com/c4a0df9f18.js" crossorigin="anonymous"></script>
 </body>
 </html>