Add reservation table, trying to fix navbar

marckoxx · Dec 5, 2023 · e33cccd · e33cccd
1 parent 4af1b36
commit e33cccd
Show file tree

Hide file tree

Showing 13 changed files with 162 additions and 72 deletions.
diff --git a/app/Models/Reservation.php b/app/Models/Reservation.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class Reservation extends Model
+{
+    use HasFactory;
+
+    protected $fillable = ['id', ];
+}
diff --git a/database/migrations/2023_12_03_184634_create_reservations_table.php b/database/migrations/2023_12_03_184634_create_reservations_table.php
@@ -0,0 +1,27 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('reservations', function (Blueprint $table) {
+            $table->id();
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('reservations');
+    }
+};
diff --git a/resources/css/app.css b/resources/css/app.css
@@ -18,10 +18,15 @@
 
 #myCarousel div div img {
     max-width: 100%;
-    height: calc(100vh - 63px);
+    height: calc(100vh - 64px);
+    margin-top: 0;
     object-fit: cover;
 }
 
 #btn-show {
     margin: 16px;
 }
+
+.navheightfix {
+    margin-top: calc(64px + 16px);
+}
diff --git a/resources/js/Layouts/AdminLayout.vue b/resources/js/Layouts/AdminLayout.vue
@@ -19,7 +19,7 @@ const { props } = usePage();
 
 <template>
     <header>
-        <nav class="navbar navbar-expand-md bg-body-tertiary">
+        <nav class="navbar navbar-expand-md bg-body-tertiary sticky-top">
             <div class="container-fluid">
                 <Link class="navbar-brand d-flex align-items-center" :href="route('dashboard.index')">
                 <img class="rounded mr-1" :src="'/images/logo/logo3.png'" alt="Company Logo"

diff --git a/resources/js/Layouts/AuthenticatedLayout.vue b/resources/js/Layouts/AuthenticatedLayout.vue
@@ -23,7 +23,7 @@ console.log(props.auth.user.is_admin);
 
 <template>
     <header>
-        <nav class="navbar navbar-expand-md bg-body-tertiary">
+        <nav class="navbar navbar-expand-md bg-body-tertiary sticky-top">
             <div class="container-fluid">
                 <Link class="navbar-brand d-flex align-items-center" :href="route('index')">
                 <img class="rounded mr-1" :src="'/images/logo/logo3.png'" alt="Company Logo"

diff --git a/resources/js/Layouts/Footer.vue b/resources/js/Layouts/Footer.vue
@@ -25,8 +25,8 @@ const SideItems = [
                             Ride with us and make every journey an unforgettable experience."
                         </p>
 
-                        <div class="footerbtn  mt-4">
-                            <link rel="stylesheet" href="login.vue">Explore Now !!!
+                        <div class="footerbtn mt-4 d-flex align-items-center justify-content-center">
+                            <Link :href="route('login')" style="text-decoration: none;">Explore Now !!!</Link>
                         </div>
                     </div>
                     <!-- col -->

diff --git a/resources/js/Layouts/GuestLayout.vue b/resources/js/Layouts/GuestLayout.vue
@@ -1,5 +1,6 @@
 <script setup>
 import { Link } from '@inertiajs/vue3';
+import { ref } from 'vue';
 
 const navItems = [
     { label: 'Home', route: 'index' },
@@ -9,11 +10,26 @@ const navItems = [
     { label: 'Login', route: 'login' },
     { label: 'Sign Up', route: 'register' },
 ];
+
+const prevScrollPos = ref(window.scrollY);
+const navbarTop = ref('0px');
+
+window.addEventListener('scroll', () => {
+    const currentScrollPos = window.scrollY;
+
+    if (prevScrollPos.value > currentScrollPos) {
+        navbarTop.value = '0';
+    } else {
+        navbarTop.value = `-${document.querySelector('.navbar').offsetHeight}px`;
+    }
+
+    prevScrollPos.value = currentScrollPos <= 0 ? 0 : currentScrollPos;
+});
 </script>
 
 <template>
     <header>
-        <nav class="navbar navbar-expand-md d-flex justify-content-around" style="font-weight: 700;">
+        <nav class="navbar navbar-expand-md d-flex justify-content-around w-100" style="font-weight: 700;" :style="{ top: navbarTop }">
             <div class="container-fluid">
                 <Link class="navbar-brand d-flex align-items-center" :href="route('index')">
                 <img class="rounded mr-1" :src="'/images/logo/logo3.png'" alt="Company Logo"
@@ -52,6 +68,11 @@ const navItems = [
 
 .navbar {
     background-image: linear-gradient(to bottom right, #FFFFD0, #A555EC);
+    position: fixed;
+    top: 0;
+    width: 100%;
+    transition: top 0.3s;
+    z-index: 999;
 }
 
 .nav-item:hover {

diff --git a/resources/js/Pages/about.vue b/resources/js/Pages/about.vue
@@ -1,7 +1,7 @@
 <template>
     <Layout />
     <Head title="Abouts" />
-    <main class="about-section" style="margin-top: 80px;">
+    <main class="about-section" style="margin-top: 80px">
         <section class="container my-4">
             <div class="about-content text-center">
                 <h1>About MotoRent</h1>

diff --git a/resources/js/Pages/catalog.vue b/resources/js/Pages/catalog.vue
@@ -36,15 +36,15 @@ const getImagePath = (motor) => {
 </script>
 
 <template>
+    <Head title="Catalog" />
     <Layout />
-    <div class="container my-4">
+    <div class="container my-4 navheightfix ">
 
 
-        <Head title="Catalog" />
 
 
         <section class=" text-center container">
-            <div class="row my-5">
+            <div class="row mb-5">
                 <div class="col-lg-6 col-md-8 mx-auto">
                     <h1 class="fw-bold" style=" color: blueviolet;">Catalog</h1>
                     <p class="lead ">Pick motorcycles from 5 reputable brands</p>
@@ -104,7 +104,8 @@ const getImagePath = (motor) => {
                                 <div class="col-lg-6 py-lg-4 ps-lg-5">
                                     <div class="row">
                                         <h6 class="card-subtitle mb-2 text-muted">{{ motor.someProperty }}</h6>
-                                        <h5 class="card-title" style="color: blueviolet; font-weight: bold;">{{ motor.brand.name + ' ' + motor.model }}</h5>
+                                        <h5 class="card-title" style="color: blueviolet; font-weight: bold;">{{
+                                            motor.brand.name + ' ' + motor.model }}</h5>
                                         <p class="card-text" :class="{ 'text-danger': motor.availability === 0 }">{{
                                             motor.availability === 1 ? 'Available' : 'Not available' }}</p>
                                         <small class="text-body-secondary">PHP {{ motor.daily_rate }}/day</small>
@@ -193,7 +194,7 @@ const getImagePath = (motor) => {
 }
 
 .container1 {
-    border:0;
+    border: 0;
     padding: 20px;
 }
 </style>

diff --git a/resources/js/Pages/contact.vue b/resources/js/Pages/contact.vue
@@ -1,7 +1,7 @@
 <template>
     <Head title="Contact Us" />
     <Layout />
-        <main class="container mb-8">
+        <main class="container mb-8 mt-5">
             <div class="py-5 text-center mb-5">
                 <h2 class=" fw-bold" style="color: #A555EC;">CONTACT US</h2>
                 <h4><i class="fa-solid fa-clock mt-5"></i> Hours: Monday-Sunday 8:30AM to 8:00PM</h4>

diff --git a/resources/js/Pages/index.vue b/resources/js/Pages/index.vue
@@ -2,7 +2,7 @@
     <Head title="Home" />
     <Layout />
         <main>
-            <section class="container1">
+            <section style="margin-top: 63px;">
                 <div id="myCarousel" class="carousel slide mb-6" data-bs-ride="carousel">
                     <div class="carousel-indicators">
                         <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"