fix: perbaiki navigasi mobile — semua menu tetap inline seperti referensi

This commit is contained in:
2026-04-03 05:47:18 +07:00
parent 396ecdb489
commit 2a8d8a813c
9 changed files with 413 additions and 216 deletions
+33 -23
View File
@@ -1,31 +1,41 @@
@extends('public.layout')
@section('title', 'Blog')
@section('content')
<h1 class="text-3xl font-bold mb-2">Blog</h1>
<p class="text-gray-500 mb-10">Artikel, pengumuman, dan berita dari Persegi</p>
<section class="max-w-6xl mx-auto px-6 py-24">
<p class="text-xs font-semibold text-gray-400 uppercase tracking-widest mb-4 flex items-center gap-2">
<span class="w-4 h-px bg-gray-400 inline-block"></span> Blog
</p>
<h1 class="text-5xl font-bold mb-4">Artikel</h1>
<p class="text-gray-500 mb-16 max-w-xl">Pengumuman, berita, dan tulisan dari organisasi Persegi.</p>
<div class="grid md:grid-cols-3 gap-6">
@forelse($posts as $post)
<a href="{{ route('blog.detail', $post) }}" class="bg-white rounded-xl shadow hover:shadow-md transition p-5 block">
<div class="flex items-center gap-2 mb-2">
<span class="text-xs px-2 py-0.5 rounded-full font-medium
{{ $post->category === 'pengumuman' ? 'bg-yellow-100 text-yellow-700' : ($post->category === 'berita' ? 'bg-blue-100 text-blue-700' : 'bg-gray-100 text-gray-600') }}">
{{ ucfirst($post->category) }}
</span>
<span class="text-xs text-gray-400">{{ $post->published_at->format('d M Y') }}</span>
</div>
<h3 class="font-bold text-gray-800 mb-2">{{ $post->title }}</h3>
<p class="text-sm text-gray-500 line-clamp-3">{{ strip_tags($post->content) }}</p>
<div class="text-xs text-gray-400 mt-3">{{ $post->author->name }}</div>
</a>
@empty
<p class="text-gray-400 col-span-3">Belum ada artikel.</p>
@endforelse
</div>
<div class="grid md:grid-cols-2 gap-6">
@forelse($posts as $post)
<a href="{{ route('blog.detail', $post) }}" class="group border border-gray-100 rounded-xl overflow-hidden hover:border-gray-300 transition">
<div class="bg-gray-900 p-6 font-mono text-xs text-green-400 leading-relaxed">
<div class="flex gap-1 mb-3">
<span class="w-2 h-2 rounded-full bg-red-500"></span>
<span class="w-2 h-2 rounded-full bg-yellow-500"></span>
<span class="w-2 h-2 rounded-full bg-green-500"></span>
</div>
<p class="text-gray-500">// {{ $post->published_at->format('d M Y') }}</p>
<p class="text-white mt-1">{{ $post->title }}</p>
</div>
<div class="p-5">
<div class="flex items-center gap-2 mb-2">
<span class="text-xs px-2 py-0.5 rounded-full bg-gray-100 text-gray-600">{{ ucfirst($post->category) }}</span>
</div>
<h3 class="font-bold mb-2 group-hover:underline underline-offset-2">{{ $post->title }}</h3>
<p class="text-sm text-gray-500 line-clamp-2">{{ strip_tags($post->content) }}</p>
<p class="text-xs text-gray-400 mt-3">see more </p>
</div>
</a>
@empty
<p class="text-gray-400 col-span-2">Belum ada artikel.</p>
@endforelse
</div>
<div class="mt-10">{{ $posts->links() }}</div>
<div class="mt-12">{{ $posts->links() }}</div>
</section>
@endsection