Feature/navigation component styling

app/assets/stylesheets/satis/application.css

@@ -16,6 +16,7 @@
 @import '../../../components/satis/sidebar_menu/component.css';
 @import '../../../components/satis/sidebar_menu_item/component.css';
 @import '../../../components/satis/tabs/component.css';
+@import '../../../components/satis/navigation/component.css';
 
 @import 'components/diffy.css';
 @import 'components/form.css';

app/components/satis/card/component.css

@@ -1,5 +1,5 @@
 .sts-card {
-  @apply bg-white h-full sm:rounded-lg sm:shadow dark:bg-gray-800 overflow-hidden;
+  @apply bg-white h-full sm:rounded-lg sm:shadow dark:bg-gray-800 overflow-hidden dark:text-gray-300;
 
   &__header {
     @apply px-4 py-5 sm:px-6 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300;

app/components/satis/navigation/component.css

@@ -0,0 +1,22 @@
+.navigation-form { 
+    @apply flex bg-white w-2/6 rounded-md dark:bg-gray-800 shadow place-self-center border-2;
+}
+
+form {
+    @apply w-full;
+}
+
+.navigation-form .navigation-input input[type="text"] {
+    @apply rounded-md bg-white dark:bg-gray-800 w-full dark:text-gray-300 text-gray-700 border-gray-300 dark:border-gray-500;
+}
+
+.result-item {
+    @apply py-2 dark:text-gray-300 px-3 dark:border-gray-600 text-gray-700 cursor-pointer border-b border-gray-200;
+}
+
+.result-item:hover {
+    @apply bg-gray-100 dark:bg-gray-700;
+}
+
+
+

app/components/satis/navigation/component.html.slim

@@ -0,0 +1,11 @@
+.navigation-form
+  = form_with url: '#', method: :get, remote: true, id: 'search-form' do
+    .navigation-input
+      input type="text" id="search-input" placeholder="Search..."
+    .test-result  
+      .result-item Test Result 1
+      .result-item Test Result 2
+      .result-item Test Result 3
+      .result-item Test Result 4
+      .result-item Test Result 5
+      .result-item Test Result 6

app/components/satis/navigation/component.rb

@@ -0,0 +1,18 @@
+module Satis
+  module Navigation
+    class Component < Satis::ApplicationComponent
+      attr_reader :menu, :menu_options, :commands
+
+      renders_many :items
+
+      def initialize(menu, **options)
+        super
+        @menu = menu
+        @menu_options = options
+        @commands = []
+      end
+
+
+    end
+  end
+end

lib/satis/forms/concerns/file.rb

@@ -18,7 +18,7 @@ def file_input(method, options = {})
                 tag.div(class: 'overflow-hidden relative inline-block -mb-2') do
                   safe_join [
                     tag.button((options[:multiple] ? ct('choose_files') : ct('choose_file')), type: 'button',
-                                                                                            class: 'bg-white py-3 px-4 border border-gray-300 rounded-md shadow-sm text-sm leading-4 font-medium text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500'),
+                                                                                            class: 'bg-white py-3 px-4 border border-gray-300 rounded-md shadow-sm text-sm leading-4 font-medium text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 dark:bg-gray-800 dark:border-gray-300 dark:text-gray-300 dark:hover:bg-gray-200'),
                     file_field(method,
                                options.merge(class: 'w-full cursor-pointer absolute block opacity-0 inset-0',
                                              data: { 'satis-file-target': 'input' }))