better_ui 0.1.0 → 0.1.1

data/app/components/better_ui/application/main/component.rb

@@ -0,0 +1,123 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module Application
+    module Main
+      class Component < ViewComponent::Base
+        attr_reader :padding, :inner_padding, :rounded, :shadow, :with_sidebar, :sidebar_width, :classes
+
+        # Arrotondamento bordi con classi Tailwind dirette
+        MAIN_ROUNDED = {
+          none: "",
+          small: "rounded-lg",
+          medium: "rounded-xl",
+          large: "rounded-2xl",
+          full: "rounded-full"
+        }.freeze
+
+        # Ombre con classi Tailwind dirette
+        MAIN_SHADOW = {
+          none: "",
+          small: "shadow-sm",
+          medium: "shadow-md", 
+          large: "shadow-lg"
+        }.freeze
+        
+        # Padding con classi Tailwind dirette
+        MAIN_PADDING = {
+          true: "p-6",
+          false: "p-0"
+        }.freeze
+        
+        # Classi layout per sidebar
+        MAIN_LAYOUT = {
+          sidebar: { sm: "pl-48", md: "pl-64", lg: "pl-72", xl: "pl-80" },  # Con Sidebar
+          none: ""              # Senza sidebar
+        }.freeze
+        
+        # Larghezza sidebar (deve corrispondere a SIDEBAR_WIDTHS del componente Sidebar)
+        MAIN_SIDEBAR_WIDTH = {
+          sm: 48,
+          md: 64,
+          lg: 72,
+          xl: 80
+        }.freeze
+        
+        # @param padding [Boolean] Se applicare il padding al contenitore principale
+        # @param inner_padding [Boolean] Se applicare il padding al contenitore interno
+        # @param rounded [Symbol] Tipo di border-radius del contenitore interno (:none, :small, :medium, :large, :full), default :small
+        # @param shadow [Symbol] Tipo di ombra del contenitore interno (:none, :small, :medium, :large), default :medium
+        # @param with_sidebar [Boolean] Se lasciare lo spazio per la sidebar
+        # @param sidebar_width [Symbol] Larghezza della sidebar (:sm, :md, :lg, :xl), default :md
+        # @param classes [String] Classi CSS aggiuntive per il contenitore principale
+        def initialize(
+          padding: true,
+          inner_padding: true,
+          rounded: :small,
+          shadow: :medium,
+          with_sidebar: true,
+          sidebar_width: :md,
+          classes: nil
+        )
+          @padding = padding
+          @inner_padding = inner_padding
+          @rounded = rounded.to_sym
+          @shadow = shadow.to_sym
+          @with_sidebar = with_sidebar
+          @sidebar_width = sidebar_width.to_sym
+          @classes = classes
+          
+          validate_params
+        end
+
+
+        
+        private
+        
+        def get_layout_class
+          if with_sidebar
+            MAIN_LAYOUT[:sidebar][@sidebar_width] || MAIN_LAYOUT[:sidebar][:md]
+          else
+            MAIN_LAYOUT[:none]
+          end
+        end
+        
+        def get_padding_class(enabled)
+          MAIN_PADDING[enabled] || MAIN_PADDING[false]
+        end
+        
+        def get_rounded_class
+          MAIN_ROUNDED[@rounded] || MAIN_ROUNDED[:small]
+        end
+        
+        def get_shadow_class
+          MAIN_SHADOW[@shadow] || MAIN_SHADOW[:medium]
+        end
+        
+        def validate_params
+          validate_rounded
+          validate_shadow
+          validate_sidebar_width if with_sidebar
+        end
+        
+        def validate_rounded
+          unless MAIN_ROUNDED.keys.include?(@rounded)
+            raise ArgumentError, "L'arrotondamento deve essere uno tra: #{MAIN_ROUNDED.keys.join(', ')}"
+          end
+        end
+        
+        def validate_shadow
+          unless MAIN_SHADOW.keys.include?(@shadow)
+            raise ArgumentError, "L'ombra deve essere una tra: #{MAIN_SHADOW.keys.join(', ')}"
+          end
+        end
+        
+        def validate_sidebar_width
+          unless MAIN_SIDEBAR_WIDTH.keys.include?(@sidebar_width)
+            raise ArgumentError, "La larghezza della sidebar deve essere una tra: #{MAIN_SIDEBAR_WIDTH.keys.join(', ')}"
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/better_ui/application/navbar/component.html.erb

@@ -0,0 +1,92 @@
+<header class="<%= container_classes %>">
+  <div class="flex items-center justify-between">
+    <!-- Left side - custom content-->
+    <div class="flex items-center">
+      <%= content %>
+    </div>
+
+    <!-- User actions -->
+    <div class="flex items-center space-x-4">
+      <% if has_actions? %>
+        <% actions.each do |action| %>
+          <div class="flex-shrink-0">
+            <% if action[:type] == :button %>
+              <% if action[:href].present? %>
+                <a 
+                  href="<%= action[:href] %>" 
+                  class="inline-flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors duration-150 <%= action[:theme] == :primary ? 'bg-gray-900 text-white hover:bg-gray-700' : 'bg-gray-100 text-gray-700 hover:bg-gray-200' %>"
+                >
+                  <% if action[:icon].present? %>
+                    <%= bui_icon(action[:icon], size: :small) %>
+                    <% if action[:label].present? %>
+                      <span class="ml-2"><%= action[:label] %></span>
+                    <% end %>
+                  <% else %>
+                    <%= action[:label] %>
+                  <% end %>
+                </a>
+              <% else %>
+                <button 
+                  type="button"
+                  class="inline-flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors duration-150 <%= action[:theme] == :primary ? 'bg-gray-900 text-white hover:bg-gray-700' : 'bg-gray-100 text-gray-700 hover:bg-gray-200' %>"
+                  <% if action[:data].present? %>
+                    <% action[:data].each do |key, value| %>
+                      data-<%= key %>="<%= value %>"
+                    <% end %>
+                  <% end %>
+                >
+                  <% if action[:icon].present? %>
+                    <%= bui_icon(action[:icon], size: :small) %>
+                    <% if action[:label].present? %>
+                      <span class="ml-2"><%= action[:label] %></span>
+                    <% end %>
+                  <% else %>
+                    <%= action[:label] %>
+                  <% end %>
+                </button>
+              <% end %>
+            <% elsif action[:type] == :avatar %>
+              <% if action[:href].present? %>
+                <a href="<%= action[:href] %>" class="flex-shrink-0 hover:opacity-75 transition-opacity duration-150">
+              <% end %>
+              
+              <% if action[:avatar].is_a?(Hash) %>
+                <%= bui_avatar(**action[:avatar]) %>
+              <% else %>
+                <%= action[:avatar].html_safe %>
+              <% end %>
+              
+              <% if action[:href].present? %>
+                </a>
+              <% end %>
+            <% elsif action[:type] == :icon %>
+              <% if action[:href].present? %>
+                <a 
+                  href="<%= action[:href] %>" 
+                  class="p-2 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-md transition-colors duration-150"
+                >
+                  <%= bui_icon(action[:icon], size: :medium) %>
+                </a>
+              <% else %>
+                <button 
+                  type="button"
+                  class="p-2 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-md transition-colors duration-150"
+                  <% if action[:data].present? %>
+                    <% action[:data].each do |key, value| %>
+                      data-<%= key %>="<%= value %>"
+                    <% end %>
+                  <% end %>
+                >
+                  <%= bui_icon(action[:icon], size: :medium) %>
+                </button>
+              <% end %>
+            <% else %>
+              <!-- Custom content -->
+              <%= action[:content].html_safe if action[:content].present? %>
+            <% end %>
+          </div>
+        <% end %>
+      <% end %>
+    </div>
+  </div>
+</header>

data/app/components/better_ui/application/navbar/component.rb

@@ -0,0 +1,136 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module Application
+    module Navbar
+      class Component < ViewComponent::Base
+        # Include degli helper per utilizzare bui_icon e bui_avatar
+        include BetterUi::General::Components::Icon::IconHelper
+        include BetterUi::General::Components::Avatar::AvatarHelper
+        
+        attr_reader :theme, :shadow, :border, :actions, :classes, :with_sidebar, :sidebar_width
+
+        # Temi navbar con classi Tailwind dirette
+        NAVBAR_THEME = {
+          default: "bg-white text-gray-900 border-gray-200",
+          white: "bg-white text-gray-900 border-gray-200",
+          red: "bg-red-50 text-red-900 border-red-200",
+          rose: "bg-rose-50 text-rose-900 border-rose-200",
+          orange: "bg-orange-50 text-orange-900 border-orange-200",
+          green: "bg-green-50 text-green-900 border-green-200",
+          blue: "bg-blue-50 text-blue-900 border-blue-200",
+          yellow: "bg-yellow-50 text-yellow-900 border-yellow-200",
+          violet: "bg-violet-50 text-violet-900 border-violet-200"
+        }.freeze
+
+        # Ombre navbar con classi Tailwind dirette
+        NAVBAR_SHADOW = {
+          none: "",
+          small: "shadow-sm",
+          medium: "shadow-md",
+          large: "shadow-lg"
+        }.freeze
+        
+        # Larghezze sidebar con valori numerici per utilizzo in classi custom
+        NAVBAR_SIDEBAR_WIDTH = {
+          sm: 48,
+          md: 64,
+          lg: 72,
+          xl: 80
+        }.freeze
+
+        # @param theme [Symbol] Tema colori (default, white, red, rose, orange, green, blue, yellow, violet), default :default
+        # @param shadow [Symbol] Tipo di ombra (none, small, medium, large), default :small
+        # @param border [Boolean] Se mostrare il bordo inferiore, default true
+        # @param actions [Array] Array di azioni/pulsanti a destra
+        # @param classes [String] Classi CSS aggiuntive
+        # @param with_sidebar [Boolean] Se la navbar è affiancata a una sidebar, default false
+        # @param sidebar_width [Symbol] Larghezza della sidebar affiancata (:sm, :md, :lg, :xl), default :md
+        def initialize(
+          theme: :default,
+          shadow: :small,
+          border: false,
+          actions: [],
+          classes: nil,
+          with_sidebar: false,
+          sidebar_width: :md
+        )
+          @theme = theme.to_sym
+          @shadow = shadow.to_sym
+          @border = border
+          @actions = actions || []
+          @classes = classes
+          @with_sidebar = with_sidebar
+          @sidebar_width = sidebar_width.to_sym
+
+          validate_params
+        end
+
+        def container_classes
+          base_classes = %w[h-[81px] px-6 py-4]
+          
+          # Width
+          if with_sidebar
+            sidebar_width_value = NAVBAR_SIDEBAR_WIDTH[@sidebar_width] || NAVBAR_SIDEBAR_WIDTH[:md]
+            base_classes << "pl-#{sidebar_width_value}"
+            base_classes << "ml-auto"
+          else
+            base_classes << "w-full"
+          end
+
+          # Tema
+          base_classes.concat(theme_classes.split)
+
+          # Shadow
+          base_classes << shadow_class if shadow != :none
+
+          # Border
+          base_classes << "border-b" if border
+
+          # Classi aggiuntive
+          base_classes << classes if classes.present?
+
+          base_classes.compact.join(" ")
+        end
+
+        def has_actions?
+          actions.present? && actions.any?
+        end
+
+        private
+
+        def theme_classes
+          NAVBAR_THEME[@theme] || NAVBAR_THEME[:default]
+        end
+
+        def shadow_class
+          NAVBAR_SHADOW[@shadow] || NAVBAR_SHADOW[:small]
+        end
+        
+        def validate_params
+          validate_theme
+          validate_shadow
+          validate_sidebar_width if with_sidebar
+        end
+        
+        def validate_theme
+          unless NAVBAR_THEME.keys.include?(@theme)
+            raise ArgumentError, "Il tema deve essere uno tra: #{NAVBAR_THEME.keys.join(', ')}"
+          end
+        end
+        
+        def validate_shadow
+          unless NAVBAR_SHADOW.keys.include?(@shadow)
+            raise ArgumentError, "L'ombra deve essere una tra: #{NAVBAR_SHADOW.keys.join(', ')}"
+          end
+        end
+        
+        def validate_sidebar_width
+          unless NAVBAR_SIDEBAR_WIDTH.keys.include?(@sidebar_width)
+            raise ArgumentError, "La larghezza della sidebar deve essere una tra: #{NAVBAR_SIDEBAR_WIDTH.keys.join(', ')}"
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/better_ui/application/sidebar/component.html.erb

@@ -0,0 +1,190 @@
+<aside class="<%= container_classes %>">
+  <!-- Header Section -->
+  <% if has_header? %>
+    <div class="px-6 py-4 border-b border-gray-200">
+      <% if header[:logo].present? %>
+        <div class="flex items-center">
+          <div class="flex-shrink-0">
+            <% if header[:logo].is_a?(Hash) %>
+              <%= bui_avatar(**header[:logo]) %>
+            <% else %>
+              <%= header[:logo].html_safe %>
+            <% end %>
+          </div>
+          <% if header[:title].present? %>
+            <div class="ml-3">
+              <h2 class="text-lg font-semibold text-gray-900"><%= header[:title] %></h2>
+              <% if header[:subtitle].present? %>
+                <p class="text-sm text-gray-500"><%= header[:subtitle] %></p>
+              <% end %>
+            </div>
+          <% end %>
+        </div>
+      <% elsif header[:title].present? %>
+        <div>
+          <h2 class="text-lg font-semibold text-gray-900"><%= header[:title] %></h2>
+          <% if header[:subtitle].present? %>
+            <p class="text-sm text-gray-500"><%= header[:subtitle] %></p>
+          <% end %>
+        </div>
+      <% end %>
+    </div>
+  <% end %>
+
+  <!-- Navigation Section -->
+  <nav class="flex-1 px-4 py-6 space-y-6">
+    <% navigation_sections.each do |section| %>
+      <div class="space-y-2">
+        <!-- Section Title -->
+        <% if section[:title].present? %>
+          <% if section[:href] %>
+            <%= link_to section[:href], class: "px-3 text-xs font-semibold text-gray-500 uppercase tracking-wider" do %>
+              <%= section[:title] %>
+            <% end %>
+          <% else %>
+            <h3 class="px-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">
+              <%= section[:title] %>
+            </h3>
+          <% end %>
+        <% end %>
+
+        <!-- Navigation Items -->
+        <div class="space-y-1">
+          <% (section[:items] || []).each do |item| %>
+            <% if item[:type] == :collapsible && collapsible %>
+              <!-- Collapsible Section -->
+              <div>
+                <button 
+                  type="button" 
+                  class="group flex items-center justify-between w-full px-3 py-2 text-sm font-medium text-gray-700 rounded-md hover:bg-gray-50 hover:text-gray-900 transition-colors duration-150"
+                  data-collapse-target="#<%= item[:id] %>"
+                  aria-expanded="<%= item[:expanded] || false %>"
+                >
+                  <div class="flex items-center">
+                    <% if item[:icon].present? %>
+                      <span class="mr-3 text-gray-400 group-hover:text-gray-500">
+                        <%= bui_icon(item[:icon], size: :medium) %>
+                      </span>
+                    <% end %>
+                    <span><%= item[:label] %></span>
+                  </div>
+                  <span class="ml-3 transform transition-transform duration-150 <%= 'rotate-90' if item[:expanded] %>">
+                    <%= bui_icon("chevron-right", size: :small) %>
+                  </span>
+                </button>
+                
+                <div 
+                  id="<%= item[:id] %>" 
+                  class="<%= item[:expanded] ? 'block' : 'hidden' %> mt-1 space-y-1"
+                >
+                  <% (item[:children] || []).each do |child| %>
+                    <% if child[:href].present? %>
+                      <a 
+                        href="<%= child[:href] %>" 
+                        class="<%= (child[:active] || false) ? 'group flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors duration-150 bg-gray-100 text-gray-900' : 'group flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors duration-150 text-gray-700 hover:bg-gray-50 hover:text-gray-900' %> pl-11"
+                      >
+                        <% if child[:icon].present? %>
+                          <span class="mr-3">
+                            <%= bui_icon(child[:icon], size: :small) %>
+                          </span>
+                        <% end %>
+                        <%= child[:label] %>
+                      </a>
+                    <% else %>
+                      <div class="<%= (child[:active] || false) ? 'group flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors duration-150 bg-gray-100 text-gray-900' : 'group flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors duration-150 text-gray-700 hover:bg-gray-50 hover:text-gray-900' %> pl-11 cursor-default">
+                        <% if child[:icon].present? %>
+                          <span class="mr-3">
+                            <%= bui_icon(child[:icon], size: :small) %>
+                          </span>
+                        <% end %>
+                        <%= child[:label] %>
+                      </div>
+                    <% end %>
+                  <% end %>
+                </div>
+              </div>
+            <% else %>
+              <!-- Regular Navigation Item -->
+              <% if item[:href].present? %>
+                <a 
+                  href="<%= item[:href] %>" 
+                  class="<%= (item[:active] || false) ? 'group flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors duration-150 bg-gray-100 text-gray-900' : 'group flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors duration-150 text-gray-700 hover:bg-gray-50 hover:text-gray-900' %>"
+                >
+                  <% if item[:icon].present? %>
+                    <span class="mr-3 text-gray-400 group-hover:text-gray-500">
+                      <%= bui_icon(item[:icon], size: :medium) %>
+                    </span>
+                  <% end %>
+                  <%= item[:label] %>
+                  <% if item[:badge].present? %>
+                    <span class="ml-auto inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
+                      <%= item[:badge] %>
+                    </span>
+                  <% end %>
+                </a>
+              <% else %>
+                <div class="<%= (item[:active] || false) ? 'group flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors duration-150 bg-gray-100 text-gray-900' : 'group flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors duration-150 text-gray-700 hover:bg-gray-50 hover:text-gray-900' %> cursor-default">
+                  <% if item[:icon].present? %>
+                    <span class="mr-3 text-gray-400">
+                      <%= bui_icon(item[:icon], size: :medium) %>
+                    </span>
+                  <% end %>
+                  <%= item[:label] %>
+                  <% if item[:badge].present? %>
+                    <span class="ml-auto inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
+                      <%= item[:badge] %>
+                    </span>
+                  <% end %>
+                </div>
+              <% end %>
+            <% end %>
+          <% end %>
+        </div>
+      </div>
+    <% end %>
+
+    <%= content if content.present? %>
+  </nav>
+
+  <!-- Footer Section -->
+  <% if has_footer? %>
+    <div class="px-6 py-4 border-t border-gray-200">
+      <% if footer[:user_info].present? %>
+        <div class="flex items-center">
+          <% if footer[:user_info][:avatar].present? %>
+            <div class="flex-shrink-0">
+              <% if footer[:user_info][:avatar].is_a?(Hash) %>
+                <%= bui_avatar(**footer[:user_info][:avatar]) %>
+              <% else %>
+                <%= footer[:user_info][:avatar].html_safe %>
+              <% end %>
+            </div>
+          <% end %>
+          <div class="<%= footer[:user_info][:avatar].present? ? 'ml-3' : '' %>">
+            <% if footer[:user_info][:name].present? %>
+              <p class="text-sm font-medium text-gray-700">
+                <%= footer[:user_info][:name] %>
+              </p>
+            <% end %>
+            <% if footer[:user_info][:email].present? %>
+              <p class="text-xs text-gray-500">
+                <%= footer[:user_info][:email] %>
+              </p>
+            <% end %>
+          </div>
+          <% if footer[:user_info][:menu_button].present? %>
+            <div class="ml-auto">
+              <%= footer[:user_info][:menu_button] %>
+            </div>
+          <% end %>
+        </div>
+      <% end %>
+      
+      <% if footer[:content].present? %>
+        <div class="<%= footer[:user_info].present? ? 'mt-4' : '' %>">
+          <%= footer[:content] %>
+        </div>
+      <% end %>
+    </div>
+  <% end %>
+</aside>

data/app/components/better_ui/application/sidebar/component.rb

@@ -0,0 +1,129 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module Application
+    module Sidebar
+      class Component < ViewComponent::Base
+        # Include degli helper per utilizzare bui_icon e bui_avatar
+        include BetterUi::General::Components::Icon::IconHelper
+        include BetterUi::General::Components::Avatar::AvatarHelper
+        attr_reader :width, :position, :theme, :shadow, :border, :header, :footer, :navigation_sections, :collapsible, :classes
+
+        # Larghezze sidebar con classi Tailwind dirette
+        SIDEBAR_WIDTHS = {
+          sm: "w-48",
+          md: "w-64",
+          lg: "w-72",
+          xl: "w-80"
+        }
+
+        # Temi sidebar con classi Tailwind dirette
+        SIDEBAR_THEMES = {
+          default: "bg-white text-gray-900",
+          dark: "bg-gray-900 text-white",
+          light: "bg-white text-gray-900"
+        }
+
+        # Ombre sidebar con classi Tailwind dirette
+        SIDEBAR_SHADOWS = {
+          none: "",
+          sm: "shadow-sm",
+          md: "shadow-md",
+          lg: "shadow-lg",
+          xl: "shadow-xl"
+        }
+
+        # Bordi sidebar con classi Tailwind dirette
+        SIDEBAR_BORDERS = {
+          left: "border-r border-gray-200",
+          right: "border-l border-gray-200"
+        }
+
+        # @param width [Symbol] Larghezza della sidebar (:sm, :md, :lg, :xl), default :md (w-64)
+        # @param position [Symbol] Posizione della sidebar (:left, :right), default :left
+        # @param theme [Symbol] Tema colori (:default, :dark, :light), default :default
+        # @param shadow [Symbol] Tipo di ombra (:none, :sm, :md, :lg), default :lg
+        # @param border [Boolean] Se mostrare il bordo destro/sinistro, default true
+        # @param header [Hash] Configurazione header (logo, title, subtitle)
+        # @param footer [Hash] Configurazione footer (content, user_info)
+        # @param navigation_sections [Array] Array di sezioni di navigazione
+        # @param collapsible [Boolean] Se abilitare sezioni collassabili, default true
+        # @param classes [String] Classi CSS aggiuntive
+        def initialize(
+          width: :md,
+          position: :left,
+          theme: :default,
+          shadow: :lg,
+          border: true,
+          header: {},
+          footer: {},
+          navigation_sections: [],
+          collapsible: true,
+          classes: nil
+        )
+          @width = width.to_sym
+          @position = position.to_sym
+          @theme = theme.to_sym
+          @shadow = shadow.to_sym
+          @border = border
+          @header = header || {}
+          @footer = footer || {}
+          @navigation_sections = navigation_sections || []
+          @collapsible = collapsible
+          @classes = classes
+        end
+
+        def container_classes
+          base_classes = %w[fixed inset-y-0 z-50 flex flex-col overflow-y-auto]
+
+          # Posizione
+          base_classes << (position == :right ? "right-0" : "left-0")
+
+          # Larghezza
+          base_classes << width_class
+
+          # Tema
+          base_classes.concat(theme_classes)
+
+          # Shadow
+          base_classes << shadow_class if shadow != :none
+
+          # Border
+          base_classes << border_class if border
+
+          # Classi aggiuntive
+          base_classes << classes if classes.present?
+
+          base_classes.compact.join(" ")
+        end
+
+
+        def has_header?
+          header.present? && (header[:title].present? || header[:logo].present?)
+        end
+
+        def has_footer?
+          footer.present? && (footer[:content].present? || footer[:user_info].present?)
+        end
+
+        private
+
+        def width_class
+          SIDEBAR_WIDTHS[@width] || SIDEBAR_WIDTHS[:md]
+        end
+
+        def theme_classes
+          (SIDEBAR_THEMES[@theme] || SIDEBAR_THEMES[:default]).split
+        end
+
+        def shadow_class
+          SIDEBAR_SHADOWS[@shadow] || SIDEBAR_SHADOWS[:none]
+        end
+
+        def border_class
+          SIDEBAR_BORDERS[@position] || SIDEBAR_BORDERS[:left]
+        end
+      end
+    end
+  end
+end