menu changes

resources/css/app.css

@@ -3,7 +3,7 @@
 @tailwind utilities;
 
 body{
-    background-image: url('/images/bg.png');
+    background-image: url('/images/zhp-bg.png');
     background-repeat: repeat-y;
     background-size: cover;
 }

resources/js/Components/Divider.vue

@@ -0,0 +1,14 @@
+<script setup>
+const props = defineProps(['classes']);
+</script>
+
+<template>
+  <div
+    class="bg-gray-100 py-1"
+    :class="classes"
+  >
+    <h3 class="text-sm font-medium leading-5 text-gray-600 px-2 ">
+      <slot />
+    </h3>
+  </div>
+</template>

resources/js/Components/Materials/SearchSlideOver.vue

@@ -104,7 +104,7 @@ const hideDialog = () => store.hideDialog();
                       hidden
                       class="mt-5 mb-5"
                     >
-                    <div hidden>
+                    <div>
                       <h3 class="mb-2 font-semibold text-gray-900 text-xl">
                         Tryb tagów
                       </h3>

resources/js/Components/Materials/TagSearchMode.vue

@@ -48,7 +48,10 @@ watch(mode, (newValue) => {
         >Oraz</label>
       </div>
     </li>
-    <li class="w-full border-b border-gray-200 sm:border-b-0 sm:border-r">
+    <li
+      class="w-full border-b border-gray-200 sm:border-b-0 sm:border-r"
+      hidden
+    >
       <div class="flex items-center pl-3 cursor-pointer">
         <input
           id="horizontal-list-radio-millitary"

resources/js/Components/ResponsiveNavLink.vue

@@ -4,10 +4,17 @@ import { Link } from '@inertiajs/vue3';
 
 const props = defineProps(['href', 'active', 'block']);
 
-const classes = computed(() =>
-  props.active
-    ? 'block pl-3 pr-4 py-2 border-l-4 border-cbp-400 text-sm font-medium text-cbp-700 bg-cbp-50 focus:outline-none focus:text-cbp-800 focus:bg-cbp-100 focus:border-cbp-700 transition duration-150 ease-in-out'
-    : 'block pl-3 pr-4 py-2 border-l-4 border-transparent text-sm font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 focus:outline-none focus:text-gray-800 focus:bg-gray-50 focus:border-gray-300 transition duration-150 ease-in-out'
+const classes = computed(() => {
+       let classesList = props.active
+            ? 'block pl-3 pr-4 py-2 border-l-4 border-cbp-400 text-sm font-medium text-cbp-700 bg-cbp-50 focus:outline-none focus:text-cbp-800 focus:bg-cbp-100 focus:border-cbp-700 transition duration-150 ease-in-out'
+            : 'block pl-3 pr-4 py-2 border-l-4 border-transparent text-sm font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 focus:outline-none focus:text-gray-800 focus:bg-gray-50 focus:border-gray-300 transition duration-150 ease-in-out'
+
+       if (props.block) {
+           // classesList += ' bg-gray-200 text-gray-800'
+       }
+
+       return classesList
+    }
 );
 </script>