Dashboard responsiveness fix

Raccoon254 · May 19, 2024 · 2c8421f · 2c8421f
1 parent 6fe9582
commit 2c8421f
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 8 deletions.
diff --git a/app/Livewire/Referrals.php b/app/Livewire/Referrals.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Livewire;
+
+use Livewire\Component;
+
+class Referrals extends Component
+{
+    public function render()
+    {
+        return view('livewire.referrals');
+    }
+}
diff --git a/resources/views/dashboard.blade.php b/resources/views/dashboard.blade.php
@@ -24,8 +24,8 @@ class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-
                             </a>
                         </div>
                     </div>
-                    <div class="absolute top-8 right-5">
-                        <img src="{{ asset('images/svg2.png') }}" alt="Hero" class="w-64 max-w-md mx-auto rounded-lg">
+                    <div class="absolute top-28 md:top-8 right-5">
+                        <img src="{{ asset('images/svg2.png') }}" alt="Hero" class="w-44 md:w-64 max-w-md mx-auto rounded-lg">
                     </div>
                 </div>
 
@@ -65,7 +65,7 @@ class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-
                 <!-- Line Break -->
                 <hr class="mt-10 border-t-2 rounded-lg border-gray-100">
 
-                <div class="mt-6 px-3 w-full text-white">
+                <div class="mt-6 md:px-2 w-full text-white">
                     <div class="text-xl flex justify-between items-center font-semibold">
                         3 Previous Orders
                         <i class="fas btn btn-circle btn-sm bg-white text-blue-500 btn-ghost fa-calendar-alt"></i>

diff --git a/resources/views/layouts/navigation.blade.php b/resources/views/layouts/navigation.blade.php
@@ -1,7 +1,7 @@
 <div class="navbar bg-white">
     <div class="navbar-start">
         <div class="center">
-            <div class="w-60">
+            <div class="md:w-60">
                 <label for="my-drawer-2" class="md:hidden">
                     <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
                          stroke="black">
@@ -18,15 +18,15 @@
             </div>
             <!-- Page Heading -->
             @if (isset($header))
-                <div class="max-w-7xl text-lg text-black/80 font-bold px-2">
+                <div class="max-w-7xl hidden md:block text-lg text-black/80 font-bold px-2">
                     {{ $header }}
                 </div>
             @endif
         </div>
     </div>
     <div class="navbar-center">
         <div class="md:hidden flex gap-2 center">
-            <x-application-logo class="h-5"/>
+{{--            <x-application-logo class="h-5"/>--}}
             <span class="text-lg text-black/80 font-bold">
                 Scholarspace
             </span>

diff --git a/resources/views/layouts/sidebar.blade.php b/resources/views/layouts/sidebar.blade.php
@@ -1,11 +1,11 @@
 <div class="drawer md:w-60 absolute md:static z-50 lg:drawer-open">
-    <input id="my-drawer-2" type="checkbox" class="drawer-toggle" />
+    <input id="my-drawer-2" type="checkbox" class="drawer-toggle"/>
     <div class="drawer-content flex flex-col items-center justify-center">
         <!-- Page content here -->
     </div>
     <div class="drawer-side">
         <label for="my-drawer-2" aria-label="close sidebar" class="drawer-overlay"></label>
-        <ul class="menu bg-white px-4 pt-0 w-60 min-h-full text-black/90">
+        <ul class="menu bg-white px-4 pt-0 w-60 h-[80vh] text-black/90">
             <!-- Sidebar content here -->
             <li class="side {{ request()->routeIs('dashboard') ? 'active' : '' }}">
                 <a href="{{ route('dashboard') }}" class="flex items-center gap-2 p-2 hover:bg-gray-200">
@@ -26,12 +26,29 @@
                     <span>Orders</span>
                 </a>
             </li>
+            <!-- Referral -->
+            <li class="side {{ request()->routeIs('referrals') ? 'active' : '' }}">
+                <a href="{{ route('referrals') }}" class="flex items-center gap-2 p-2 hover:bg-gray-200">
+                    <i class="fas fa-users-cog"></i>
+                    <span>Referral</span>
+                </a>
+            </li>
             <li class="side {{ request()->routeIs('profile.edit') ? 'active' : '' }}">
                 <a href="{{ route('profile.edit') }}" class="flex items-center gap-2 p-2 hover:bg-gray-200">
                     <i class="fas fa-user"></i>
                     <span>Profile</span>
                 </a>
             </li>
         </ul>
+
+        <div class="flex items-center justify-center p-2 w-full">
+            <form class="w-full" method="POST" action="{{ route('logout') }}">
+                @csrf
+                <button type="submit" class="btn text-red-600 btn-warning w-full">
+                    Logout
+                    <i class="fas fa-lock"></i>
+                </button>
+            </form>
+        </div>
     </div>
 </div>
diff --git a/resources/views/livewire/referrals.blade.php b/resources/views/livewire/referrals.blade.php
@@ -0,0 +1,3 @@
+<div>
+    {{-- Be like water. --}}
+</div>
diff --git a/routes/web.php b/routes/web.php
@@ -4,6 +4,7 @@
 use App\Livewire\Dashboard;
 use App\Livewire\Messages;
 use App\Livewire\Orders;
+use App\Livewire\Referrals;
 use Illuminate\Support\Facades\Route;
 use App\Http\Controllers\StaticPageController;
 use App\Http\Controllers\PagesController;
@@ -20,6 +21,7 @@
     Route::get('/dashboard', Dashboard::class)->name('dashboard');
     Route::get('/messages', Messages::class)->name('messages');
     Route::get('/orders', Orders::class)->name('orders');
+    Route::get('/referrals', Referrals::class)->name('referrals');
 });
 
 require __DIR__.'/auth.php';