#23 - sticky footer

blumilksoftware · Sep 18, 2023 · a338e38 · a338e38
1 parent d357486
commit a338e38
Show file tree

Hide file tree

Showing 4 changed files with 110 additions and 49 deletions.
diff --git a/app/Http/Controllers/Public/NewsController.php b/app/Http/Controllers/Public/NewsController.php
@@ -0,0 +1,18 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Http\Controllers\Public;
+
+use App\Http\Controllers\Controller;
+use Inertia\Response;
+
+class NewsController extends Controller
+{
+    public function __invoke(): Response
+    {
+        return inertia("Public/News", [
+            "title" => "mgr inż.",
+        ]);
+    }
+}
diff --git a/resources/js/Layouts/PublicLayout.vue b/resources/js/Layouts/PublicLayout.vue
@@ -1,68 +1,97 @@
 <script setup>
 import { ref } from 'vue'
+import { Link } from '@inertiajs/vue3'
 import { Dialog, DialogPanel } from '@headlessui/vue'
-import { Bars3Icon, XMarkIcon } from '@heroicons/vue/24/outline'
+import { EllipsisHorizontalIcon, Bars3Icon, XMarkIcon } from '@heroicons/vue/24/outline'
 
 const navigation = [
-  { name: 'Strona główna', href: '#' },
-  { name: 'Aktualności', href: '#' },
-  { name: 'Kursy i materiały', href: '#' },
-  { name: 'Oceny', href: '#' },
-  { name: 'FAQ', href: '#' },
-  { name: 'Kontakt', href: '#' },
+  { name: 'Strona główna', href: '/' },
+  { name: 'Aktualności', href: '/aktualnosci' },
+  { name: 'Kursy i materiały', href: '/kursy' },
+  { name: 'Oceny', href: '/oceny' },
+  { name: 'FAQ', href: '/faq' },
+  { name: 'Kontakt', href: '/kontakt' },
 ]
 
 const mobileMenuOpen = ref(false)
 </script>
 
 <template>
-  <header class="absolute inset-x-0 top-0 z-50">
-    <nav class="flex items-center justify-between p-6 lg:px-8" aria-label="Global">
-      <div class="flex lg:hidden">
-        <button type="button" class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700" @click="mobileMenuOpen = true">
-          <span class="sr-only">Otwórz menu</span>
-          <Bars3Icon class="h-6 w-6" aria-hidden="true" />
-        </button>
-      </div>
-      <div class="hidden lg:flex lg:gap-x-12">
-        <a v-for="item in navigation" :key="item.name" :href="item.href" class="text-sm font-semibold leading-6 text-gray-900">{{ item.name }}</a>
-      </div>
-      <div class="hidden lg:flex lg:flex-1 lg:justify-end">
-        <a href="#" class="text-sm font-semibold leading-6 text-gray-900">Logowanie <span aria-hidden="true">&rarr;</span></a>
-      </div>
-    </nav>
-    <Dialog as="div" class="lg:hidden" :open="mobileMenuOpen" @close="mobileMenuOpen = false">
-      <div class="fixed inset-0 z-50" />
-      <DialogPanel class="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white p-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
-        <div class="flex items-center justify-between">
-          <button type="button" class="-m-2.5 rounded-md p-2.5 text-gray-700" @click="mobileMenuOpen = false">
-            <span class="sr-only">Close menu</span>
-            <XMarkIcon class="h-6 w-6" aria-hidden="true" />
+  <div class="flex h-screen flex-col">
+    <header class="absolute inset-x-0 top-0 z-50">
+      <nav class="flex items-center justify-between p-6 lg:px-8" aria-label="Global">
+        <div class="flex lg:hidden">
+          <button type="button" class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700"
+                  @click="mobileMenuOpen = true"
+          >
+            <span class="sr-only">Otwórz menu</span>
+            <Bars3Icon class="h-6 w-6" aria-hidden="true" />
           </button>
         </div>
-        <div class="mt-6 flow-root">
-          <div class="-my-6 divide-y divide-gray-500/10">
-            <div class="space-y-2 py-6">
-              <a v-for="item in navigation" :key="item.name" :href="item.href" class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">{{ item.name }}</a>
-            </div>
-            <div class="py-6">
-              <a href="#" class="-mx-3 block rounded-lg px-3 py-2.5 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">Logowanie</a>
+        <div class="hidden lg:flex lg:gap-x-12">
+          <Link v-for="item in navigation" :key="item.name" :href="item.href"
+                class="text-sm font-semibold leading-6 text-gray-900"
+          >
+            {{ item.name }}
+          </Link>
+        </div>
+        <div class="hidden lg:flex lg:flex-1 lg:justify-end">
+          <Link href="#" class="text-sm font-semibold leading-6 text-gray-900">
+            Logowanie <span
+              aria-hidden="true"
+            >&rarr;</span>
+          </Link>
+        </div>
+      </nav>
+      <Dialog as="div" class="lg:hidden" :open="mobileMenuOpen" @close="mobileMenuOpen = false">
+        <div class="fixed inset-0 z-50" />
+        <DialogPanel
+          class="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white p-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10"
+        >
+          <div class="flex items-center justify-between">
+            <button type="button" class="-m-2.5 rounded-md p-2.5 text-gray-700" @click="mobileMenuOpen = false">
+              <span class="sr-only">Close menu</span>
+              <XMarkIcon class="h-6 w-6" aria-hidden="true" />
+            </button>
+          </div>
+          <div class="mt-6 flow-root">
+            <div class="-my-6 divide-y divide-gray-500/10">
+              <div class="space-y-2 py-6">
+                <Link v-for="item in navigation" :key="item.name" :href="item.href"
+                      class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
+                >
+                  {{ item.name }}
+                </Link>
+              </div>
+              <div class="py-6">
+                <Link href="#"
+                      class="-mx-3 block rounded-lg px-3 py-2.5 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
+                >
+                  Logowanie
+                </Link>
+              </div>
             </div>
           </div>
-        </div>
-      </DialogPanel>
-    </Dialog>
-  </header>
+        </DialogPanel>
+      </Dialog>
+    </header>
 
-  <slot />
+    <div class="flex-1">
+      <slot />
+    </div>
 
-  <footer class="bg-white">
-    <div class="mx-auto max-w-7xl px-6 py-12 md:flex md:items-center md:justify-center lg:px-8">
-      <div class="mt-8 md:order-1 md:mt-0">
-        <p class="text-center text-xs leading-5 text-gray-500">
-          &copy; 2023 keating management system
-        </p>
+    <footer class="bg-white">
+      <div class="mx-auto max-w-7xl px-6 py-12 md:flex md:items-center md:justify-center lg:px-8">
+        <div class="mt-8 md:order-1 md:mt-0">
+          <p class="text-center text-xs leading-5 text-gray-500">
+            2023
+            <EllipsisHorizontalIcon class="mx-2 inline-block w-6" />
+            <a class="font-semibold" href="https://github.com/blumilksoftware/keating" target="_blank">keating management system</a>
+            developed at
+            <a class="font-semibold" href="https://blumilk.pl/" target="_blank">Blumilk</a>
+          </p>
+        </div>
       </div>
-    </div>
-  </footer>
+    </footer>
+  </div>
 </template>
diff --git a/resources/js/Pages/Public/News.vue b/resources/js/Pages/Public/News.vue
@@ -0,0 +1,11 @@
+<script setup>
+import PublicLayout from '../../Layouts/PublicLayout.vue'
+
+defineProps({
+  title: String,
+})
+</script>
+
+<template>
+  <PublicLayout />
+</template>
diff --git a/routes/web.php b/routes/web.php
@@ -4,7 +4,10 @@
 
 use App\Http\Controllers\Dashboard\DashboardController;
 use App\Http\Controllers\Public\HomeController;
+use App\Http\Controllers\Public\NewsController;
 use Illuminate\Support\Facades\Route;
 
 Route::get("/", HomeController::class);
+Route::get("/aktualnosci", NewsController::class);
+
 Route::get("/dashboard", DashboardController::class);