Layout Base

2025-01-07 07:09:25 -03:00
parent 6ec3344c17
commit 07b62a07a0
29 changed files with 623 additions and 2516 deletions
--- a/resources/views/components/layouts/app.blade.php
+++ b/resources/views/components/layouts/app.blade.php
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Zenithar</title>
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Domine:wght@400..700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Karla:ital,wght@0,200..800;1,200..800&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
+    <tallstackui:script />
+    @livewireStyles
+    @vite(['resources/css/app.css', 'resources/js/app.js'])
+</head>
+
+<body class="flex flex-col min-h-screen">
+    <x-navbar />
+    <div class="flex-1 bg-secondary-50 overflow-x-auto">
+        <main class="container mx-auto p-4 ">
+            {{ $slot }}
+        </main>
+    </div>
+    @livewireScripts
+</body>
+
+</html>
--- a/resources/views/components/navbar.blade.php
+++ b/resources/views/components/navbar.blade.php
@@ -0,0 +1,29 @@
+<div class="shadow z-10">
+    <div class="border-b">
+        <div class="container mx-auto flex flex-col items-center justify-between gap-2 px-4 py-4 sm:py-0 sm:h-14 sm:flex-row">
+            <span class="text-4xl sm:text-2xl font-semibold text-primary-700">Zenithar</span>
+            <x-dropdown>
+                <x-slot:action>
+                    <button class="flex items-center gap-2 rounded p-1 text-start hover:bg-secondary-50 active:bg-secondary-100"
+                            x-on:click="show = !show">
+                        <img class="h-8 rounded" src="https://api.dicebear.com/9.x/thumbs/svg" alt="avatar" />
+                        <div>
+                            <p class="text-sm">Daniel Cortés</p>
+                            <p class="text-xs text-secondary">Administrador</p>
+                        </div>
+                    </button>
+                </x-slot:action>
+                <x-dropdown.items text="Cerrar Sesión" separator />
+            </x-dropdown>
+        </div>
+    </div>
+
+    <div class="border-b">
+        <nav class="container mx-auto flex flex-col sm:h-14 sm:flex-row sm:px-4">
+            <x-navlink icon="home" :route="route('home.index')" :active="Route::is('home.*')" title="Inicio" />
+            <x-navlink icon="cash" :route="route('cajas.index')" :active="Route::is('cajas.*')" title="Cajas" />
+            <x-navlink icon="report" :route="route('reportes.index')" :active="Route::is('reportes.*')" title="Reportes" />
+            <x-navlink icon="settings" :route="route('configuracion.index')" :active="Route::is('configuracion.*')" title="Configuración" />
+        </nav>
+    </div>
+</div>
--- a/resources/views/components/navlink.blade.php
+++ b/resources/views/components/navlink.blade.php
@@ -0,0 +1,13 @@
+@php
+    if (!isset($active)) {
+        $active = false;
+    }
+@endphp
+<a class="{{ $active 
+    ? 'bg-primary text-white hover:bg-primary-600 active:bg-primary-700' 
+    : 'text-secondary-600 hover:bg-secondary-50 active:bg-secondary-100' }} 
+    flex items-center gap-1 px-4 py-2 text-sm"
+   href="{{ $route }}" wire:navigate>
+    <x-icon name="{{ $icon }}" sm />
+    <span>{{ $title }}</span>
+</a>