layout

dicani0 · Apr 22, 2024 · 8825fb0 · 8825fb0
1 parent 50fbcf0
commit 8825fb0
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 12 deletions.
diff --git a/resources/js/Components/NavLink.vue b/resources/js/Components/NavLink.vue
@@ -9,8 +9,8 @@ const props = defineProps<{
 
 const classes = computed(() =>
     props.active
-        ? 'inline-flex items-center px-1 pt-1 border-b-2 border-indigo-400 dark:border-indigo-600 text-sm font-medium leading-5 text-gray-900 dark:text-gray-100 focus:outline-none focus:border-indigo-700 transition duration-150 ease-in-out'
-        : 'inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-700 focus:outline-none focus:text-gray-700 dark:focus:text-gray-300 focus:border-gray-300 dark:focus:border-gray-700 transition duration-150 ease-in-out'
+        ? 'inline-flex items-center px-1 pt-1 border-b-2 border-indigo-400 text-sm font-medium leading-5 text-gray-300 focus:outline-none focus:border-indigo-700 transition duration-150 ease-in-out'
+        : 'inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-100 hover:text-rose-700 hover:border-rose-300 focus:outline-none focus:text-rose-700 focus:border-rose-300 transition duration-150 ease-in-out'
 );
 </script>
 

diff --git a/resources/js/Layouts/BaseLayout.vue b/resources/js/Layouts/BaseLayout.vue
@@ -5,9 +5,9 @@ import Footer from "@/Shared/Footer.vue";
 </script>
 
 <template>
-  <div class="flex flex-col min-h-screen">
+  <div class="flex flex-col min-h-screen bg-neutral-950 text-white">
     <Header></Header>
-    <main class="flex-1 overflow-y-auto bg-neutral-950">
+    <main class="flex-1 overflow-y-auto p-4 lg:p-8 max-w-5xl mx-auto">
       <slot></slot>
     </main>
     <Footer></Footer>
@@ -21,8 +21,4 @@ html, body {
   padding: 0;
 }
 
-body {
-  display: flex;
-  flex-direction: column;
-}
 </style>
diff --git a/resources/js/Pages/Welcome.vue b/resources/js/Pages/Welcome.vue
@@ -1,5 +1,18 @@
 <template>
-<BaseLayout></BaseLayout>
+  <BaseLayout>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur blanditiis ipsam nesciunt odit quisquam
+      repellat saepe sapiente temporibus veniam voluptatem. Dolor harum libero modi numquam porro quis quod, reiciendis
+      veniam! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus inventore iure, nisi praesentium quae
+      recusandae reprehenderit soluta tenetur voluptatibus voluptatum. Autem beatae commodi excepturi, harum iure maxime
+      minus nisi. Consectetur! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa cupiditate in libero quo
+      quos voluptates! Alias architecto blanditiis consequuntur molestiae quaerat rerum sequi, voluptatum? Laborum
+      mollitia provident quae quas vel.
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, alias aliquam aspernatur deserunt dolores
+      exercitationem labore maxime quibusdam tempore ullam! Debitis eius hic maiores quaerat quam quisquam suscipit?
+      Laboriosam, minus?
+    </p>
+  </BaseLayout>
 </template>
 <script setup lang="ts">
 import BaseLayout from "@/Layouts/BaseLayout.vue";

diff --git a/resources/js/Shared/Nav.vue b/resources/js/Shared/Nav.vue
@@ -24,9 +24,9 @@ const toggleMenu = () => menuOpen.value = !menuOpen.value;
       <!-- Nav menu -->
       <nav :class="{'hidden': !menuOpen, 'block': menuOpen, 'lg:flex': menuOpen || !menuOpen}" class="w-full lg:w-auto lg:bg-transparent">
         <ul class="flex flex-col lg:flex-row space-y-2 lg:space-y-0 lg:space-x-4 p-4 lg:p-0">
-          <li><a href="#" class="hover:text-rose-300">Dashboard</a></li>
-          <li><a href="#" class="hover:text-rose-300">Courses</a></li>
-          <li><a href="#" class="hover:text-rose-300">Forums</a></li>
+          <NavLink :active="$page.url === '/'" href="#">Dashboard</NavLink>
+          <NavLink href="#">Courses</NavLink>
+          <NavLink href="#">Forums</NavLink>
           <NavLink href="/login">Login</NavLink>
           <NavLink href="/register">Register</NavLink>
         </ul>