Feat/navbar search and mobile drawer redesign

app/Http/Controllers/SubjectController.php

@@ -6,13 +6,18 @@
 use App\Models\Node;
 use App\Models\Notice;
 use App\Models\Subject;
+use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Cache;
 use Inertia\Inertia;
 
 class SubjectController extends Controller
 {
-    public function index($course)
+    public function index(Request $request, $course)
     {
+        // If visiting root '/' and user explicitly preferred 'ssc', redirect cleanly on server side
+        if ($request->path() === '/' && $request->cookie('preferred_course') === 'ssc') {
+            return redirect('/ssc');
+        }
         $subjects = Cache::rememberForever("home_page_subjects_{$course}", function () use ($course) {
             return Subject::orderBy('sort_order', 'asc')
                 ->where('course', $course)

bootstrap/app.php

@@ -21,6 +21,9 @@
         health: '/up',
     )
     ->withMiddleware(function (Middleware $middleware): void {
+        $middleware->encryptCookies(except: [
+            'preferred_course',
+        ]);
         $middleware->web(append: [
             HandleInertiaRequests::class,
             AddLinkHeadersForPreloadedAssets::class,

resources/js/components/AppLogo.vue

@@ -4,10 +4,26 @@ import { computed } from 'vue';
 
 const page = usePage();
 const isSsc = computed(() => page.url.startsWith('/ssc'));
+
+const logoHref = computed(() => {
+    if (typeof window !== 'undefined') {
+        try {
+            const pref = localStorage.getItem('preferred_course');
+
+            if (pref === 'ssc') {
+return '/ssc';
+}
+        } catch {
+            // ignore
+        }
+    }
+
+    return isSsc.value ? '/ssc' : '/';
+});
 </script>
 
 <template>
-    <Link href="/" class="flex items-center gap-2.5">
+    <Link :href="logoHref" class="flex items-center gap-2.5">
         <div
             class="flex h-8 w-8 items-center justify-center overflow-hidden rounded-lg bg-slate-900 shadow-sm dark:bg-gray-100"
         >

resources/js/components/AuthModal.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { Link, usePage } from '@inertiajs/vue3';
+import { X, LogIn } from 'lucide-vue-next';
+
+const modelValue = defineModel<boolean>({ default: false });
+
+defineProps({
+    title: {
+        type: String,
+        default: 'Sign in required',
+    },
+    message: {
+        type: String,
+        default: 'Please sign in to perform this action.',
+    },
+});
+
+const page = usePage();
+</script>
+
+<template>
+    <Teleport to="body">
+        <Transition
+            enter-active-class="transition duration-150 ease-out"
+            enter-from-class="opacity-0 scale-95"
+            enter-to-class="opacity-100 scale-100"
+            leave-active-class="transition duration-100 ease-in"
+            leave-from-class="opacity-100 scale-100"
+            leave-to-class="opacity-0 scale-95"
+        >
+            <div
+                v-if="modelValue"
+                class="fixed inset-0 z-[100] flex items-center justify-center bg-slate-900/40 p-4 backdrop-blur-xs dark:bg-black/50"
+            >
+                <div
+                    class="relative w-full max-w-xs rounded-2xl border border-slate-200 bg-white p-5 shadow-2xl dark:border-gray-800 dark:bg-gray-900"
+                >
+                    <button
+                        @click="modelValue = false"
+                        class="absolute top-3.5 right-3.5 rounded-lg p-1 text-slate-400 hover:text-slate-600 dark:text-gray-500 dark:hover:text-gray-300"
+                    >
+                        <X class="h-3.5 w-3.5" />
+                    </button>
+
+                    <h3
+                        class="text-sm font-bold text-slate-900 dark:text-gray-100"
+                    >
+                        {{ title }}
+                    </h3>
+                    <p class="mt-1 text-xs text-slate-500 dark:text-gray-400">
+                        {{ message }}
+                    </p>
+
+                    <div class="mt-4 flex items-center gap-2">
+                        <Link
+                            :href="`/login?redirect=${encodeURIComponent(page.url)}`"
+                            @click="modelValue = false"
+                            class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-xl bg-slate-900 py-2 text-xs font-semibold text-white transition hover:bg-slate-800 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-200"
+                        >
+                            <LogIn class="h-3.5 w-3.5" />
+                            <span>Sign in</span>
+                        </Link>
+                        <button
+                            @click="modelValue = false"
+                            class="rounded-xl border border-slate-200 px-3 py-2 text-xs font-semibold text-slate-600 hover:bg-slate-50 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-800"
+                        >
+                            Cancel
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </Transition>
+    </Teleport>
+</template>

resources/js/components/BlogCard.vue

@@ -1,38 +1,19 @@
 <script setup lang="ts">
 import { Link } from '@inertiajs/vue3';
 import { ArrowRight, Heart, MessageSquare } from 'lucide-vue-next';
-import { computed } from 'vue';
 
-const props = defineProps({
+defineProps({
     blog: Object,
 });
-
-const formattedDate = computed(() => {
-    if (!props.blog?.created_at) {
-        return '';
-    }
-
-    const date = new Date(props.blog.created_at);
-
-    if (isNaN(date.getTime())) {
-        return '';
-    }
-
-    return new Intl.DateTimeFormat('en-US', {
-        month: 'short',
-        day: 'numeric',
-        year: 'numeric',
-    }).format(date);
-});
 </script>
 
 <template>
-    <div
-        class="group flex flex-row items-center overflow-hidden rounded-xl border border-slate-200 bg-white p-3 shadow-xs transition-all duration-300 hover:-translate-y-0.5 hover:shadow-md sm:flex-col sm:p-0 dark:border-gray-700 dark:bg-gray-900 dark:hover:shadow-gray-900/50"
+    <Link
+        :href="'/blogs/' + blog.slug"
+        class="group relative flex flex-row items-center overflow-hidden rounded-xl border border-slate-200 bg-white p-3 shadow-xs transition-all duration-300 hover:-translate-y-0.5 hover:shadow-md sm:flex-col sm:p-0 dark:border-gray-700 dark:bg-gray-900 dark:hover:shadow-gray-900/50"
     >
         <!-- Featured Image Container -->
-        <Link
-            :href="'/blogs/' + blog.slug"
+        <div
             class="relative block h-20 w-20 shrink-0 overflow-hidden rounded-lg bg-slate-100 sm:aspect-[16/9] sm:h-auto sm:w-full sm:rounded-none dark:bg-gray-800"
         >
             <img
@@ -47,14 +28,14 @@ const formattedDate = computed(() => {
             >
                 {{ blog.category }}
             </div>
-        </Link>
+        </div>
 
         <!-- Card Body -->
         <div class="flex min-w-0 flex-1 flex-col justify-between pl-3 sm:p-4">
             <div>
-                <!-- News Meta (Author & Date & Mobile Category) -->
+                <!-- Top Row: Category / Author -->
                 <div
-                    class="mb-1 flex flex-wrap items-center gap-1.5 text-[11px] text-slate-500 sm:mb-1.5 sm:text-xs dark:text-gray-400"
+                    class="mb-1 flex items-center gap-1.5 text-[11px] sm:mb-1.5 sm:text-xs"
                 >
                     <span
                         v-if="blog.category"
@@ -63,46 +44,29 @@ const formattedDate = computed(() => {
                         {{ blog.category }}
                     </span>
 
-                    <span class="text-slate-400 dark:text-gray-500"
-                        >Author</span
-                    >
+                    <span class="text-slate-400 dark:text-gray-500">By</span>
                     <Link
                         v-if="blog.user?.username"
                         :href="`/u/${blog.user.username}`"
-                        class="font-medium text-indigo-600 underline transition-colors hover:underline dark:text-indigo-400"
+                        @click.stop
+                        class="relative z-10 truncate font-semibold text-slate-700 transition-colors hover:text-indigo-600 hover:underline dark:text-gray-300 dark:hover:text-indigo-400"
                     >
                         {{ blog.user?.name }}
                     </Link>
                     <span
                         v-else
-                        class="font-medium text-slate-700 dark:text-gray-300"
+                        class="truncate font-semibold text-slate-700 dark:text-gray-300"
                     >
                         {{ blog.user?.name }}
                     </span>
-
-                    <span
-                        v-if="formattedDate"
-                        class="text-slate-300 dark:text-gray-600"
-                        >•</span
-                    >
-
-                    <time
-                        v-if="formattedDate"
-                        :datetime="blog.created_at"
-                        class="text-slate-400 dark:text-gray-500"
-                    >
-                        {{ formattedDate }}
-                    </time>
                 </div>
 
                 <!-- Title -->
-                <Link :href="'/blogs/' + blog.slug" class="group/title block">
-                    <h3
-                        class="line-clamp-2 text-xs leading-snug font-bold text-slate-900 transition duration-150 group-hover/title:text-indigo-600 sm:text-base dark:text-gray-100 dark:group-hover/title:text-indigo-400"
-                    >
-                        {{ blog.title }}
-                    </h3>
-                </Link>
+                <h3
+                    class="line-clamp-2 text-xs leading-snug font-bold text-slate-900 transition duration-150 group-hover:text-indigo-600 sm:text-base dark:text-gray-100 dark:group-hover:text-indigo-400"
+                >
+                    {{ blog.title }}
+                </h3>
 
                 <!-- Excerpt (hidden on mobile to save vertical space) -->
                 <p
@@ -119,21 +83,8 @@ const formattedDate = computed(() => {
                 <div
                     class="flex items-center gap-3 text-[11px] text-slate-400 sm:text-xs dark:text-gray-500"
                 >
-                    <span
-                        class="inline-flex items-center gap-1"
-                        :class="{
-                            'font-medium text-rose-500 dark:text-rose-400':
-                                blog.reactions_count > 0,
-                        }"
-                    >
-                        <Heart
-                            class="h-3.5 w-3.5"
-                            :class="
-                                blog.reactions_count > 0
-                                    ? 'fill-rose-500 text-rose-500'
-                                    : 'text-slate-400 dark:text-gray-500'
-                            "
-                        />
+                    <span class="inline-flex items-center gap-1">
+                        <Heart class="h-3.5 w-3.5" />
                         <span>{{ blog.reactions_count || 0 }}</span>
                     </span>
 
@@ -143,16 +94,13 @@ const formattedDate = computed(() => {
                     </span>
                 </div>
 
-                <Link
-                    :href="'/blogs/' + blog.slug"
-                    class="inline-flex items-center gap-1 text-[11px] font-semibold text-indigo-600 transition hover:text-indigo-700 sm:text-xs dark:text-indigo-400 dark:hover:text-indigo-300"
+                <!-- Bottom-Right Arrow Indicator -->
+                <div
+                    class="flex h-5 w-5 shrink-0 items-center justify-center text-slate-400 transition-transform duration-200 group-hover:translate-x-1 group-hover:text-indigo-600 dark:text-gray-500 dark:group-hover:text-indigo-400"
                 >
-                    <span>Read</span>
-                    <ArrowRight
-                        class="h-3.5 w-3.5 transform transition-transform duration-200 group-hover:translate-x-1"
-                    />
-                </Link>
+                    <ArrowRight class="h-3.5 w-3.5" />
+                </div>
             </div>
         </div>
-    </div>
+    </Link>
 </template>