Flowbite implementation and dashboard layout

hiamir · Oct 19, 2022 · ba95974 · ba95974
1 parent d18cde4
commit ba95974
Show file tree

Hide file tree

Showing 13 changed files with 433 additions and 254 deletions.
diff --git a/config/jetstream.php b/config/jetstream.php
@@ -59,9 +59,9 @@
 
     'features' => [
         // Features::termsAndPrivacyPolicy(),
-        // Features::profilePhotos(),
+         Features::profilePhotos(),
         // Features::api(),
-        Features::teams(['invitations' => true]),
+//        Features::teams(['invitations' => true]),
         Features::accountDeletion(),
     ],
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,7 +13,13 @@
         "laravel-vite-plugin": "^0.6.0",
         "lodash": "^4.17.19",
         "postcss": "^8.4.14",
+        "prettier": "^2.7.1",
+        "prettier-plugin-tailwindcss": "^0.1.13",
         "tailwindcss": "^3.1.0",
         "vite": "^3.0.0"
+    },
+    "dependencies": {
+        "flowbite": "^1.5.3",
+        "tailwind-scrollbar": "^2.1.0-preview.0"
     }
 }
diff --git a/resources/views/dashboard.blade.php b/resources/views/dashboard.blade.php
@@ -1,15 +1,16 @@
 <x-app-layout>
     <x-slot name="header">
-        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
+        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-300 leading-tight">
             {{ __('Dashboard') }}
         </h2>
     </x-slot>
 
     <div class="py-12">
         <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
             <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
-                <x-jet-welcome />
+{{--                <x-jet-welcome />--}}
             </div>
+
         </div>
     </div>
 </x-app-layout>
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
@@ -1,44 +1,62 @@
 <!DOCTYPE html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <meta name="csrf-token" content="{{ csrf_token() }}">
-
-        <title>{{ config('app.name', 'Laravel') }}</title>
-
-        <!-- Fonts -->
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}"
+      x-data="{
+            darkMode: localStorage.getItem('dark') === 'true'
+      }"
+      x-init="$watch('darkMode', function(val){
+        localStorage.setItem('dark', val);
+        console.log(darkMode);
+      })"
+      x-bind:class="{ 'dark': darkMode }"
+
+>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="csrf-token" content="{{ csrf_token() }}">
+
+    <title>{{ config('app.name', 'OMJ task Manager') }}</title>
+
+    <!-- Fonts -->
 {{--        <link rel="stylesheet" href="https://fonts.bunny.net/css2?family=Nunito:wght@400;600;700&display=swap">--}}
 
-        <!-- Scripts -->
-        @vite(['resources/css/app.css', 'resources/js/app.js'])
-
-        <!-- Styles -->
-        @livewireStyles
-    </head>
-    <body class="font-sans antialiased">
-        <x-jet-banner />
-
-        <div class="min-h-screen bg-gray-100">
-            @livewire('navigation-menu')
-
-            <!-- Page Heading -->
-            @if (isset($header))
-                <header class="bg-white shadow">
-                    <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
-                        {{ $header }}
-                    </div>
-                </header>
-            @endif
-
-            <!-- Page Content -->
-            <main>
-                {{ $slot }}
-            </main>
-        </div>
-
-        @stack('modals')
-
-        @livewireScripts
-    </body>
+<!-- Scripts -->
+    @vite(['resources/css/app.css', 'resources/js/app.js'])
+
+    <!-- Styles -->
+    @livewireStyles
+</head>
+<body class="font-sans antialiased">
+<x-jet-banner/>
+
+<div class="flex flex-col min-h-screen bg-gray-100 dark:bg-oblue-600">
+    @livewire('navigation-menu')
+
+    <!-- Page Heading -->
+    @if (isset($header))
+        <header class="bg-white shadow dark:bg-oblue-400 ">
+            <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
+                {{ $header }}
+            </div>
+        </header>
+@endif
+
+<!-- Page Content -->
+    <main class="h-full">
+        {{ $slot }}
+    </main>
+
+    <footer class="p-4 mt-auto justify-between bg-white shadow md:px-6 md:py-8 dark:bg-oblue-700">
+        <span class="block xs:text-xs md:text-sm text-gray-500 text-center dark:text-olblue-600 sm:text-center dark:text-gray-400">© 2022 <a
+                href="https://www.omjournal.org"
+                class="hover:underline">Oman Medical Journal™</a>. All Rights Reserved.
+    </span>
+    </footer>
+</div>
+
+@stack('modals')
+<script src="https://unpkg.com/[email protected]/dist/flowbite.js" defer></script>
+@livewireScripts
+
+</body>
 </html>
diff --git a/resources/views/layouts/guest.blade.php b/resources/views/layouts/guest.blade.php
@@ -18,4 +18,5 @@
             {{ $slot }}
         </div>
     </body>
+    <script src="https://unpkg.com/[email protected]/dist/flowbite.js" defer></script>
 </html>
-Original file line number
+Diff line change
@@ Expand Up / @@ -18,4 +18,5 @@ @@
                 {{ $slot }}
             </div>
         </body>
+        <script src="https://unpkg.com/[email protected]/dist/flowbite.js" defer></script>
     </html>