inizio struttura frontend - header + sidebar

app/Livewire/Dashboard.php

@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Livewire;
+
+use Livewire\Component;
+
+class Dashboard extends Component
+{
+    public function render()
+    {
+        return view('livewire.dashboard');
+    }
+}

app/Livewire/Header.php

@@ -0,0 +1,20 @@
+<?php
+
+namespace App\Livewire;
+
+use Livewire\Component;
+
+class Header extends Component
+{
+    // public $user;
+
+    public function render()
+    {
+        return view('livewire.header');
+    }
+
+    // public function mount($user)
+    // {
+    //     $this->user = $user;
+    // }
+}

app/Livewire/Login.php

@@ -2,6 +2,7 @@
 
 namespace App\Livewire;
 
+use Livewire\Attributes\Layout;
 use Livewire\Component;
 
 class Login extends Component

app/Livewire/Onboarding.php

@@ -2,6 +2,7 @@
 
 namespace App\Livewire;
 
+use Livewire\Attributes\Layout;
 use Livewire\Component;
 
 class Onboarding extends Component

app/Livewire/Registration.php

@@ -2,6 +2,7 @@
 
 namespace App\Livewire;
 
+use Livewire\Attributes\Layout;
 use Livewire\Component;
 
 class Registration extends Component

app/Livewire/Sidebar.php

@@ -0,0 +1,20 @@
+<?php
+
+namespace App\Livewire;
+
+use Livewire\Component;
+
+class Sidebar extends Component
+{
+    public $current_page;
+
+    public function render()
+    {
+        return view('livewire.sidebar');
+    }
+
+    public function mount($current_page)
+    {
+        $this->current_page = $current_page;
+    }
+}

public/assets/css/colors.css

@@ -214,3 +214,7 @@
     --active-shadow-angry: #e94f1d;
     --landing-footer-bg: #11312e;
 }
+
+:root {
+    --color-lilla: #908CFF;
+}

public/assets/css/custom.css

@@ -0,0 +1,354 @@
+ul.standard-list {
+	margin-left: 2em;
+}
+
+ul.standard-list li {
+	list-style: disc;
+}
+
+/* Form */
+.form-control {
+	padding: 6px 14px;
+	font-size: 14px;
+	font-weight: 300;
+	color: var(--black);
+	line-height: 1em;
+}
+.form-control:focus {
+	color: var(--black);
+}
+.form-control::placeholder {
+	color: var(--black);
+	opacity: 0.75;
+}
+.theme-form input[type="text"].form-control.input-white,
+.theme-form input[type="email"].form-control.input-white,
+.theme-form input[type="search"].form-control.input-white,
+.theme-form input[type="password"].form-control.input-white,
+.theme-form input[type="number"].form-control.input-white,
+.theme-form input[type="tel"].form-control.input-white,
+.theme-form input[type="date"].form-control.input-white,
+.theme-form input[type="datetime-local"].form-control.input-white,
+.theme-form input[type="time"].form-control.input-white,
+.theme-form input[type="datetime-local"].form-control.input-white,
+.theme-form input[type="month"].form-control.input-white,
+.theme-form input[type="week"].form-control.input-white,
+.theme-form input[type="url"].form-control.input-white,
+.theme-form input[type="file"].form-control.input-white,
+.theme-form textarea.form-control.input-white,
+.theme-form select.form-control.input-white {
+	color: var(--white);
+	background-color: transparent;
+	border-color: var(--white);
+	box-shadow: none;
+}
+.theme-form .form-control.input-white::placeholder {
+	color: var(--white);
+	opacity: 0.75;
+}
+.form-control::placeholder {
+	color: currentColor;
+	opacity: 1;
+}
+.form-control::file-selector-button {
+	padding-right: 30px;
+	border-radius: var(--bs-border-radius);
+	border: 1px solid;
+	border-radius: var(--bs-border-radius);
+	display: inline-block;
+	margin-left: -0.74rem;
+	scale: 1.06;
+	height: 33px;
+}
+.form-check-input:checked {
+	background-color: var(--theme-default);
+	border-color: var(--white);
+}
+.form-wizard .step {
+	height: 8px;
+	width: 8px;
+	background-color: var(--theme-tertiary);
+	border-radius: 8px;
+	will-change: width;
+	transition: width 0.5s ease;
+}
+.form-wizard .step.active {
+	width: 24px;
+}
+.form-wizard .step.finish {
+	background-color: var(--theme-tertiary);
+}
+a#prevBtn {
+	position: absolute;
+	font-size: 25px;
+}
+/* END - Form */
+
+/* Buttons */
+.btn {
+	text-transform: uppercase;
+	font-size: 16px;
+}
+
+.btn-secondary {
+	background-color: var(--theme-secondary);
+	border: 1px solid var(--theme-secondary);
+	color: var(--theme-default);
+}
+.btn-secondary:hover,
+.btn-secondary:focus,
+.btn-secondary.active,
+.btn-secondary:active:focus,
+.btn-secondary.show {
+	background-color: var(--theme-primary);
+}
+
+.btn-medium {
+	width: 110px;
+	max-width: 100%;
+}
+.btn-large {
+	width: 200px;
+	max-width: 100%;
+}
+/* END - Buttons */
+
+.badge {
+	pointer-events: none;
+}
+
+.text-underline {
+	text-decoration: underline !important;
+}
+
+/* Frontend */
+.login-card,
+.registration-card,
+.onboarding-card {
+	min-height: 100vh;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	margin: 0 auto;
+	padding: 30px 12px;
+	background: none;
+	background-color: var(--bs-body-bg);
+}
+.registration-card,
+.onboarding-card {
+	background-color: var(--primary-color);
+}
+.login-card .login-main,
+.registration-card .registration-main,
+.onboarding-card .onboarding-main {
+	max-width: 650px;
+	width: calc(100dvw - 15px);
+	padding: 80px 40px;
+	border-radius: 40px;
+	box-shadow: 0 0 37px rgba(0, 0, 0, 0.05);
+	margin: 0 auto;
+	background-color: var(--bs-body-bg);
+	min-height: 700px;
+}
+.registration-card .registration-main,
+.onboarding-card .onboarding-main {
+	max-width: 1075px;
+	background-color: var(--bs-body-bg);
+}
+.login-card .login-main .login-inner {
+	max-width: 422px;
+}
+.registration-card .registration-main .registration-inner {
+	max-width: 860px;
+}
+.onboarding-card .onboarding-main .onboarding-inner {
+	max-width: 690px;
+}
+.login-card .login-main .login-inner .form-logo,
+.registration-card .registration-main .registration-inner .form-logo,
+.onboarding-card .onboarding-main .onboarding-inner .form-logo {
+	max-width: min(330px, 100%);
+}
+.login-card .login-main .theme-form label,
+.registration-card .registration-main .theme-form label {
+	font-size: 16px;
+	font-weight: 600;
+}
+.onboarding-card .onboarding-main .theme-form label {
+	font-size: 16px;
+	font-weight: 400;
+}
+.login-card .login-main .theme-form input::-webkit-input-placeholder {
+	color: inherit;
+}
+.login-card .login-main .theme-form .form-group {
+	margin-bottom: 0;
+}
+.show-hide span {
+    cursor: pointer;
+    font-size: 18px;
+    color: var(--theme-default);
+    font-family: "iconly" !important;
+    speak: never;
+    font-style: normal;
+    font-variant: normal;
+    text-transform: none;
+    font-weight: normal;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-weight: 300;
+}
+.show-hide span.show:before {
+    content: "\e950";
+}
+.show-hide span:before {
+    content: "\e932";
+}
+.login-card .login-main .theme-form .show-hide,
+.registration-card .registration-main .theme-form .show-hide,
+.onboarding-card .onboarding-main .theme-form .show-hide {
+    top: 50%;
+}
+.login-card input[type="password"] {
+    padding: 6px 60px 6px 14px !important;
+}
+.theme-form input[type="text"],
+.theme-form input[type="email"],
+.theme-form input[type="search"],
+.theme-form input[type="password"],
+.theme-form input[type="number"],
+.theme-form input[type="tel"],
+.theme-form input[type="date"],
+.theme-form input[type="datetime-local"],
+.theme-form input[type="time"],
+.theme-form input[type="datetime-local"],
+.theme-form input[type="month"],
+.theme-form input[type="week"],
+.theme-form input[type="url"],
+.theme-form input[type="file"],
+.theme-form textarea,
+.theme-form select {
+    border-color: var(--border-color);
+    background-color: transparent;
+    font-size: 14px;
+    padding: 6px 14px;
+    box-shadow: none;
+    font-weight: 300;
+    height: 35px;
+}
+@media (max-width: 991.98px) {
+	.login-card .login-main {
+		width: 550px;
+	}
+}
+@media (max-width: 575.98px) {
+	.login-card .login-main .theme-form .form-group {
+		margin-bottom: 0;
+	}
+}
+/* END - Frontend */
+
+/* sidebar */
+.page-sidebar {
+	margin-top: 83px;
+	background: var(--theme-default);
+}
+.page-sidebar .sidebar-menu::-webkit-scrollbar {
+	width: 5px;
+	height: 7px;
+	border-color: var(--theme-default);
+}
+.page-sidebar .sidebar-menu::-webkit-scrollbar-thumb {
+	background-color: var(--white);
+	border-radius: 10px;
+}
+.page-sidebar .sidebar-menu::-webkit-scrollbar-track {
+	background: var(--theme-default);
+	border-color: var(--theme-default);
+}
+.simplebar-wrapper {
+    width: 100%;
+}
+.page-wrapper.compact-wrapper .page-body-wrapper .page-sidebar .sidebar-menu .simplebar-wrapper .simplebar-content {
+	gap: 10px;
+}
+.sidebar-menu {
+    padding: 15px;
+}
+.page-sidebar .sidebar-menu .sidebar-list {
+    border: none;
+}
+.page-sidebar .sidebar-submenu {
+    margin-left: 55px;
+    margin-bottom: 20px;
+    border-left: 1px solid var(--white);
+}
+.page-sidebar .sidebar-submenu li {
+	list-style-type: none;
+}
+.page-sidebar .sidebar-submenu a {
+    padding-left: 4px;
+    color: var(--white);
+    font-size: 14px;
+    font-weight: 300;
+}
+.page-sidebar .sidebar-submenu a::before {
+	display: none;
+}
+.sidebar-menu .sidebar-list:hover .sidebar-link,
+.sidebar-menu .sidebar-list .sidebar-link.active {
+    background: transparent;
+    color: var(--white);
+    border: none;
+}
+.page-sidebar .sidebar-menu .sidebar-list:has(.active) {
+    background-color: var(--color-lilla);
+    border-radius: 10px;
+    color: var(--white);
+}
+.page-sidebar .sidebar-submenu:has(.active) {
+    display: block;
+}
+.sidebar-menu .sidebar-list:hover .sidebar-link i,
+.sidebar-menu .sidebar-list:hover .sidebar-link a,
+.sidebar-menu .sidebar-list:hover .sidebar-link span{
+    color: var(--white);
+}
+.sidebar-menu .sidebar-list .sidebar-link {
+    color: var(--white);
+    font-size: 16px;
+    font-weight: 400;
+}
+.sidebar-menu .sidebar-list .sidebar-link .main-icon {
+    margin-left: 0;
+    margin-right: 15px;
+}
+.sidebar-menu .sidebar-list .sidebar-link {
+    background-color: transparent;
+    color: var(--white);
+    border-radius: unset;
+    font-size: 16px;
+    font-weight: 300;
+}
+/* END - sidebar */
+
+.row.w-100 {
+	width: calc(100% + var(--bs-gutter-x)) !important;
+}
+
+.notification-icon {
+	display: flex;
+	width: 36px;
+	height: 36px;
+	justify-content: center;
+	align-items: center;
+	border: 1px solid;
+	border-radius: 100%;
+	cursor: pointer;
+	color: var(--theme-default);
+}
+
+/* Content */
+.page-wrapper .page-body-wrapper .page-body {
+	min-height: calc(100dvh - 83px);
+}

public/assets/js/sidebar.js

@@ -0,0 +1,239 @@
+(function () {
+  const body = document.querySelector("body");
+  const wrapper = document.querySelector(".page-wrapper");
+  // active menu js
+  let slideUp = (target, duration = 500) => {
+    if (target) {
+      target.style.transitionProperty = "height, padding";
+      target.style.transitionDuration = duration + "ms";
+      target.style.boxSizing = "border-box";
+      target.style.height = target.offsetHeight + "px";
+      target.offsetHeight;
+      target.style.overflow = "hidden";
+      target.style.height = 0;
+      target.style.paddingTop = 0;
+      window.setTimeout(() => {
+        target.style.display = "none";
+        target.style.removeProperty("height");
+        target.style.removeProperty("padding-top");
+        target.style.removeProperty("overflow");
+        target.style.removeProperty("transition-duration");
+        target.style.removeProperty("transition-property");
+      }, duration);
+    }
+  };
+  let slideDown = (target, duration = 500) => {
+    if (target) {
+      target.style.removeProperty("display");
+      let display = window.getComputedStyle(target).display;
+      if (display === "none") display = "flex";
+      target.style.display = display;
+      let height = target.offsetHeight;
+      target.style.overflow = "hidden";
+      target.style.height = 0;
+      target.style.paddingTop = 0;
+      target.offsetHeight;
+      target.style.boxSizing = "border-box";
+      target.style.transitionProperty = "height, padding";
+      target.style.transitionDuration = duration + "ms";
+      target.style.height = height + "px";
+      target.style.removeProperty("padding-top");
+      window.setTimeout(() => {
+        target.style.removeProperty("height");
+        target.style.removeProperty("overflow");
+        target.style.removeProperty("transition-duration");
+        target.style.removeProperty("transition-property");
+      }, duration);
+    }
+  };
+
+const sidebarListItems = document.querySelectorAll(".sidebar-link");
+// Add onclick event listener to each sidebar-list item
+sidebarListItems.forEach((item) => {
+  item.addEventListener("click", () => {
+    item.classList.toggle("active");
+    const submenu = item
+      .closest(".sidebar-list")
+      .querySelector(".sidebar-submenu");
+    if (submenu) {
+      submenu.style.display = item.classList.contains("active")
+        ? "block"
+        : "none";
+    }
+    sidebarListItems.forEach((otherList) => {
+      if (otherList !== item) {
+        otherList.classList.remove("active");
+        const otherSubmenu = otherList
+          .closest(".sidebar-list")
+          .querySelector(".sidebar-submenu");
+        if (otherSubmenu) {
+          otherSubmenu.style.display = "none";
+        }
+      }
+    });
+  });
+});
+
+// Sidebar toggle js
+    const sidebarToggle = document.querySelector(".toggle-sidebar");
+    sidebarToggle.addEventListener("click", function () {
+      wrapper.classList.toggle("sidebar-open");
+      const wrapperClose = wrapper.classList.contains("sidebar-open");
+    });
+})();
+// Sidebar pin-drops
+const pinTitle = document.querySelector(".pin-title");
+let pinIcon = document.querySelectorAll(".sidebar-list .fa-thumbtack");
+function togglePinnedName() {
+  if (document.getElementsByClassName("pined").length) {
+    if (!pinTitle.classList.contains("show")) pinTitle.classList.add("show");
+  } else {
+    pinTitle.classList.remove("show");
+  }
+}
+pinIcon.forEach((item, index) => {
+  var linkName = item.parentNode.querySelector("h6").innerHTML;
+  var InitialLocalStorage = JSON.parse(localStorage.getItem("pins") || false);
+  if (InitialLocalStorage && InitialLocalStorage.includes(linkName)) {
+    item.parentNode.classList.add("pined");
+  }
+  item.addEventListener("click", (event) => {
+    var localStoragePins = JSON.parse(localStorage.getItem("pins") || false);
+    item.parentNode.classList.toggle("pined");
+    if (localStoragePins?.length) {
+      if (item.parentNode.classList.contains("pined")) {
+        !localStoragePins?.includes(linkName) &&
+          (localStoragePins = [...localStoragePins, linkName]);
+      } else {
+        localStoragePins?.includes(linkName) &&
+          localStoragePins.splice(localStoragePins.indexOf(linkName), 1);
+      }
+      localStorage.setItem("pins", JSON.stringify(localStoragePins));
+    } else {
+      localStorage.setItem("pins", JSON.stringify([linkName]));
+    }
+    var elem = item;
+    var topPos = elem.offsetTop;
+    togglePinnedName();
+    if (item.parentElement.parentElement.classList.contains("pined")) {
+      scrollTo(
+        document.getElementsByClassName("main-sidebar")[0],
+        topPos - 30,
+        600
+      );
+    } else {
+      scrollTo(
+        document.getElementsByClassName("main-sidebar")[0],
+        elem.parentNode.offsetTop - 30,
+        600
+      );
+    }
+  });
+  function scrollTo(element, to, duration) {
+    var start = element.scrollTop,
+      change = to - start,
+      currentTime = 0,
+      increment = 20;
+    var animateScroll = function () {
+      currentTime += increment;
+      var val = Math.easeInOutQuad(currentTime, start, change, duration);
+      element.scrollTop = val;
+      if (currentTime < duration) {
+        setTimeout(animateScroll, increment);
+      }
+    };
+    animateScroll();
+  }
+  Math.easeInOutQuad = function (t, b, c, d) {
+    t /= d / 2;
+    if (t < 1) return (c / 2) * t * t + b;
+    t--;
+    return (-c / 2) * (t * (t - 2) - 1) + b;
+  };
+});
+togglePinnedName();
+// scrollTop sidebar in active link in JS
+$(document).ready(function () {
+var activeLink = $(".simplebar-wrapper .simplebar-content-wrapper a.active");
+if (
+  activeLink.length > 0 &&
+  $("#pageWrapper").hasClass("compact-wrapper")
+) {
+  var scrollTop = activeLink.offset().top - 400;
+  $(".simplebar-wrapper .simplebar-content-wrapper").animate(
+    {
+      scrollTop: scrollTop,
+    },
+    1000
+  );
+}
+});
+const submenuTitles = document.querySelectorAll(".submenu-title");
+// Add onclick event listener to each submenu-title item
+submenuTitles.forEach((title) => {
+  title.addEventListener("click", () => {
+    const parentLi = title.closest("li");
+    parentLi.classList.toggle("active");
+    const submenu = parentLi.querySelector(".according-submenu");
+    if (submenu) {
+      submenu.style.display =
+        submenu.style.display === "block" ? "none" : "block";
+    }
+    submenuTitles.forEach((otherTitle) => {
+      if (otherTitle !== title) {
+        const otherParentLi = otherTitle.closest("li");
+        const otherSubmenu =
+          otherParentLi.querySelector(".according-submenu");
+        if (otherSubmenu) {
+          otherSubmenu.style.display = "none";
+        }
+        otherParentLi.classList.remove("active");
+      }
+    });
+  });
+});
+var url = window.location.href;
+const urlLink = url.includes("#") ? url.split("#")[0] : url;
+const submenuLinks = document.querySelectorAll(".sidebar-menu li a");
+submenuLinks.forEach((el) => {
+  var linkHref = el.href;
+  if (urlLink === linkHref) {
+    el.classList.add("active");
+    const submenu = el.closest(".sidebar-submenu");
+    if (submenu && submenu.previousElementSibling) {
+      submenu.previousElementSibling.classList.add("active");
+    }
+    if (submenu) {
+      submenu.style.display = "block";
+    }
+    const parentLi = el.closest(".sidebar-submenu > li");
+    if (parentLi) {
+      parentLi.classList.add("active");
+      const submenu = parentLi.querySelector(".according-submenu");
+      if (submenu) {
+        submenu.style.display = "block";
+      }
+    }
+  }
+});
+// RESPONSIVE SIDEBAR 1200<
+document.addEventListener("DOMContentLoaded", function () {
+  "use strict";
+  var pageWrapper = document.querySelector(".page-wrapper");
+  var toggleSidebarButton = document.querySelector(".toggle-sidebar");
+  var widthWindow = window.innerWidth;
+  if (widthWindow <= 1199) {
+    pageWrapper.classList.add("sidebar-open");
+    toggleSidebarButton.classList.add("close");
+  }
+  window.addEventListener("resize", function () {
+    var widthWindow = window.innerWidth;
+    if (widthWindow <= 1199) {
+      pageWrapper.classList.add("sidebar-open");
+      toggleSidebarButton.classList.add("close");
+    } else {
+      pageWrapper.classList.remove("sidebar-open");
+      toggleSidebarButton.classList.remove("close");
+    }
+  });
+});

resources/views/layouts/admin.blade.php

@@ -23,9 +23,32 @@
 		<!-- App css -->
 		<link id="color" rel="stylesheet" href="/assets/css/colors.css" media="screen" />
 		<link rel="stylesheet" href="/assets/css/style.css" />
+		<link rel="stylesheet" href="/assets/css/custom.css" />
 	</head>
 
 	<body>
+
+		<div class="page-wrapper compact-wrapper" id="pageWrapper">
+
+			<livewire:header />
+
+			<div class="page-body-wrapper">
+
+				<livewire:sidebar :current_page="'page_1'" />
+
+				<div class="page-body">
+					<div class="container-fluid">
+						<div class="page-title">
+							{{-- Page title --}}
+							Dashboard
+						</div>
+
+						{{ $slot }}
+					</div>
+				</div>
+			</div>
+		</div>
+
 		<!-- tap on top starts-->
 		<div class="tap-top"><i class="iconly-Arrow-Up icli"></i></div>
 		<!-- loader-->
@@ -33,8 +56,6 @@
 			<div class="loader"><span></span><span></span><span></span><span></span><span></span></div>
 		</div>
 
-		{{ $slot }}
-
 		@livewireScripts
 
 		<!-- jquery-->
@@ -44,9 +65,9 @@
 		<script src="/assets/js/vendors/bootstrap/dist/js/popper.min.js" defer=""></script>
 		<!--fontawesome-->
 		<script src="/assets/js/vendors/font-awesome/fontawesome-min.js"></script>
-		<!-- password_show-->
-		<script src="/assets/js/password.js"></script>
-		<!-- custom script -->
+		<!-- sidebar -->
+		<script src="/assets/js/sidebar.js"></script>
+		<!-- theme script -->
 		<script src="/assets/js/script.js"></script>
 
 		@stack('scripts')

resources/views/layouts/frontend.blade.php

@@ -16,13 +16,10 @@
 		<link rel="stylesheet" type="text/css" href="/assets/css/bulk-style.css" />
 		<!-- iconly-icon-->
 		<link rel="stylesheet" type="text/css" href="/assets/css/themify.css" />
-		<!--fontawesome-->
-		<link rel="stylesheet" type="text/css" href="/assets/css/fontawesome-min.css" />
-		<!-- Whether Icon css-->
-		<link rel="stylesheet" type="text/css" href="/assets/css/vendors/weather-icons/weather-icons.min.css" />
 		<!-- App css -->
 		<link id="color" rel="stylesheet" href="/assets/css/colors.css" media="screen" />
 		<link rel="stylesheet" href="/assets/css/style.css" />
+		<link rel="stylesheet" href="/assets/css/custom.css" />
 	</head>
 
 	<body>
@@ -42,11 +39,9 @@
 		<!-- bootstrap js-->
 		<script src="/assets/js/vendors/bootstrap/dist/js/bootstrap.bundle.min.js" defer=""></script>
 		<script src="/assets/js/vendors/bootstrap/dist/js/popper.min.js" defer=""></script>
-		<!--fontawesome-->
-		<script src="/assets/js/vendors/font-awesome/fontawesome-min.js"></script>
 		<!-- password_show-->
 		<script src="/assets/js/password.js"></script>
-		<!-- custom script -->
+		<!-- theme script -->
 		<script src="/assets/js/script.js"></script>
 
 		@stack('scripts')

resources/views/livewire/dashboard.blade.php

@@ -0,0 +1 @@
+<div>dashboard</div>

resources/views/livewire/header.blade.php

@@ -0,0 +1,111 @@
+<header class="page-header row">
+    <div class="logo-wrapper d-flex align-items-center col-auto">
+        <a href="/dashboard">
+            <img class="d-block img-fluid" src="/assets/images/logo_white.png" alt="logo" />
+            {{-- <img class="d-block img-fluid" src="/assets/images/logo.png" alt="logo" /> --}}
+        </a>
+        {{-- <a class="close-btn toggle-sidebar" href="javascript:void(0)">
+            <i class="iconly-Arrow-Right-2 icli"></i>
+        </a> --}}
+    </div>
+    <div class="page-main-header col">
+        <div class="header-left">
+            <img src="" />
+        </div>
+        <div class="nav-right">
+            <ul class="header-right">
+                <li class="custom-dropdown">
+                    <div class="notification-icon">
+                        <i class="iconly-Notification icli"></i>
+                        <span class="badge rounded-pill badge-primary">4</span>
+                    </div>
+
+                    <div class="custom-menu notification-dropdown py-0 overflow-hidden">
+                        <h3 class="title bg-primary-light dropdown-title">Notification <span class="font-primary">View all</span></h3>
+                        <ul class="activity-timeline">
+                            <li class="d-flex align-items-start">
+                                <div class="activity-line"></div>
+                                <div class="activity-dot-primary"></div>
+                                <div class="flex-grow-1">
+                                    <h6 class="f-w-600 font-primary">30-04-2024<span>Today</span><span class="circle-dot-primary float-end">
+                                            <svg class="circle-color">
+                                                <use href="../assets/svg/iconly-sprite.svg#circle"></use>
+                                            </svg></span></h6>
+                                    <h5>Alice Goodwin</h5>
+                                    <p class="mb-0">Fashion should be fun. It shouldn't be labelled intellectual.</p>
+                                </div>
+                            </li>
+                            <li class="d-flex align-items-start">
+                                <div class="activity-dot-secondary"></div>
+                                <div class="flex-grow-1">
+                                    <h6 class="f-w-600 font-secondary">28-06-2024<span>1 hour ago</span><span class="float-end circle-dot-secondary">
+                                            <svg class="circle-color">
+                                                <use href="../assets/svg/iconly-sprite.svg#circle"></use>
+                                            </svg></span></h6>
+                                    <h5>Herry Venter</h5>
+                                    <p>I am convinced that there can be luxury in simplicity.</p>
+                                </div>
+                            </li>
+                            <li class="d-flex align-items-start">
+                                <div class="activity-dot-primary"></div>
+                                <div class="flex-grow-1">
+                                    <h6 class="f-w-600 font-primary">04-08-2024<span>Today</span><span class="float-end circle-dot-primary">
+                                            <svg class="circle-color">
+                                                <use href="../assets/svg/iconly-sprite.svg#circle"></use>
+                                            </svg></span></h6>
+                                    <h5>Loain Deo</h5>
+                                    <p>I feel that things happen for open new opportunities.</p>
+                                </div>
+                            </li>
+                            <li class="d-flex align-items-start">
+                                <div class="activity-dot-secondary"></div>
+                                <div class="flex-grow-1">
+                                    <h6 class="f-w-600 font-secondary">12-11-2024<span>Yesterday</span><span class="float-end circle-dot-secondary">
+                                            <svg class="circle-color">
+                                                <use href="../assets/svg/iconly-sprite.svg#circle"></use>
+                                            </svg></span></h6>
+                                    <h5>Fenter Jessy</h5>
+                                    <p>Sometimes the simplest things are the most profound.</p>
+                                </div>
+                            </li>
+                        </ul>
+                    </div>
+                </li>
+
+                <li class="profile-nav custom-dropdown">
+                    <div class="user-wrap">
+                        <div class="user-img"><img src="../assets/images/profile.png" alt="user"></div>
+                        <div class="user-content">
+                            <h6>Ava Davis</h6>
+                            <p class="mb-0">Admin<i class="fa-solid fa-chevron-down"></i></p>
+                        </div>
+                    </div>
+                    <div class="custom-menu overflow-hidden">
+                        <ul class="profile-body">
+                            <li class="d-flex">
+                                <svg class="svg-color">
+                                    <use href="../assets/svg/iconly-sprite.svg#Profile"></use>
+                                </svg><a class="ms-2" href="user-profile.html">Account</a>
+                            </li>
+                            <li class="d-flex">
+                                <svg class="svg-color">
+                                    <use href="../assets/svg/iconly-sprite.svg#Message"></use>
+                                </svg><a class="ms-2" href="letter-box.html">Inbox</a>
+                            </li>
+                            <li class="d-flex">
+                                <svg class="svg-color">
+                                    <use href="../assets/svg/iconly-sprite.svg#Document"></use>
+                                </svg><a class="ms-2" href="to-do.html">Task</a>
+                            </li>
+                            <li class="d-flex">
+                                <svg class="svg-color">
+                                    <use href="../assets/svg/iconly-sprite.svg#Login"></use>
+                                </svg><a class="ms-2" href="login.html">Log Out</a>
+                            </li>
+                        </ul>
+                    </div>
+                </li>
+            </ul>
+        </div>
+    </div>
+</header>

resources/views/livewire/login.blade.php

@@ -6,7 +6,7 @@
                     <div class="login-main bg-primary d-flex justify-content-center">
                         <div class="login-inner w-100">
                             <img class="d-block img-fluid m-auto mb-5 form-logo" src="/assets/images/logo_white.png" alt="logo" />
-                            <form class="theme-form" name="login" method="POST" action="#">
+                            <form class="theme-form w-100" name="login" method="POST" action="#">
                                 <div class="row">
                                     <div class="col-md-12 mb-3">
                                         <div class="form-group">

resources/views/livewire/onboarding.blade.php

@@ -7,7 +7,7 @@
                         <div class="onboarding-inner w-100 d-flex flex-column">
                             <a href="#" id="prevBtn" onclick="nextPrev(-1)"><i class="iconly-Arrow-Left icli arrow-back"></i></a>
                             <img class="d-block img-fluid m-auto mb-5 form-logo" src="/assets/images/logo.png" alt="logo" />
-                            <form class="theme-form form-wizard flex-fill d-flex flex-column" id="onboarding" method="POST" action="#">
+                            <form class="theme-form form-wizard w-100 flex-fill d-flex flex-column" id="onboarding" method="POST" action="#">
                                 {{-- Step 1 --}}
                                 <div class="tab">
                                     <div class="row">

resources/views/livewire/registration.blade.php

@@ -6,7 +6,7 @@
                     <div class="registration-main d-flex align-items-stretch justify-content-center">
                         <div class="registration-inner w-100 d-flex flex-column">
                             <img class="d-block img-fluid m-auto mb-5 form-logo" src="/assets/images/logo.png" alt="logo" />
-                            <form class="theme-form flex-fill" id="registration" method="POST" action="#">
+                            <form class="theme-form w-100 flex-fill" id="registration" method="POST" action="#">
                                 <div class="row">
                                     <div class="col-md-6 col-xs-12 mb-3">
                                         <div class="form-group">

resources/views/livewire/sidebar.blade.php

@@ -0,0 +1,46 @@
+<aside class="page-sidebar">
+    <div class="main-sidebar" id="main-sidebar">
+        <ul class="sidebar-menu">
+            <div class="simplebar-wrapper">
+                <div class="simplebar-content">
+                    <li class="sidebar-list">
+                        <a class="sidebar-link" href="javascript:void(0)">
+                            <i class="main-icon icli iconly-Home"></i>
+                            <span>Dashboards</span>
+                            <i class="arrow icli iconly-Arrow-Down-2"></i>
+                        </a>
+                        <ul class="sidebar-submenu">
+                            <li><a href="index.html" class="active">Default</a></li>
+                            <li><a href="dashboard-02.html">Ecommerce </a></li>
+                            <li><a href="dashboard-03.html">Education</a></li>
+                        </ul>
+                    </li>
+                    <li class="sidebar-list">
+                        <a class="sidebar-link" href="javascript:void(0)">
+                            <i class="main-icon icli iconly-Home"></i>
+                            <span>Dashboards</span>
+                            <i class="arrow icli iconly-Arrow-Down-2"></i>
+                        </a>
+                        <ul class="sidebar-submenu">
+                            <li><a href="index.html">Default</a></li>
+                            <li><a href="dashboard-02.html">Ecommerce </a></li>
+                            <li><a href="dashboard-03.html">Education</a></li>
+                        </ul>
+                    </li>
+                    <li class="sidebar-list">
+                        <a class="sidebar-link" href="javascript:void(0)">
+                            <i class="main-icon icli iconly-Home"></i>
+                            <span>Dashboards</span>
+                            <i class="arrow icli iconly-Arrow-Down-2"></i>
+                        </a>
+                        <ul class="sidebar-submenu">
+                            <li><a href="index.html">Default</a></li>
+                            <li><a href="dashboard-02.html">Ecommerce </a></li>
+                            <li><a href="dashboard-03.html">Education</a></li>
+                        </ul>
+                    </li>
+                </div>
+            </div>
+        </ul>
+    </div>
+</aside>

routes/web.php

@@ -5,4 +5,7 @@ use Illuminate\Support\Facades\Route;
 Route::get('/', \App\Livewire\Index::class);
 Route::get('/login', \App\Livewire\Login::class);
 Route::get('/registration', \App\Livewire\Registration::class);
-Route::get('/onboarding', \App\Livewire\Onboarding::class);
+
+Route::get('/onboarding', \App\Livewire\Onboarding::class);
+
+Route::get('/dashboard', \App\Livewire\Dashboard::class);