simple_navbar 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 90ac907a906962e9f5592805f756b00f7ed29b744d02f0f304ce4bc05b6ddcf0
+  data.tar.gz: 2b3d60097667b76189b821b1905a8c73eda2141bcf91795dc61819522b19229a
+SHA512:
+  metadata.gz: 5b19c8d84daf69fc3c133b3db8037ca113472750ac5b60a84c3def570932b9feb8b019661db560b7c626ea4e8e09b131ebb56b6b36104f67fca587d09daedbe7
+  data.tar.gz: 76dbb79fa63af99bce55d1d78c2f0590c6e5c7f3d15d81c0fde22c124f82764753a7eaed7678fa0533625fbfceda662503892104ff1689cd3dd2206ddd5f8fe1

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright Rômulo Oliveira
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,28 @@
+# SimpleNavbar
+Short description and motivation.
+
+## Usage
+How to use my plugin.
+
+## Installation
+Add this line to your application's Gemfile:
+
+```ruby
+gem "simple_navbar"
+```
+
+And then execute:
+```bash
+$ bundle
+```
+
+Or install it yourself as:
+```bash
+$ gem install simple_navbar
+```
+
+## Contributing
+Contribution directions go here.
+
+## License
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/Rakefile

@@ -0,0 +1,3 @@
+require "bundler/setup"
+
+require "bundler/gem_tasks"

data/app/assets/javascript/simple_navbar.js

@@ -0,0 +1,69 @@
+class MenuController {
+  constructor() {
+    this.menu = document.querySelector(".simple-nav-bar-nav-list-container");
+    this.burgerButton = document.querySelector(".simple-nav-bar-burger-button");
+    this.closeButton = document.querySelector(".simple-nav-bar-close-button");
+    this.dropdownMenu = document.querySelector(".simple-nav-bar-dropdown-menu");
+    this.dropdownToggleTargets = document.querySelectorAll(
+      ".simple-nav-bar-dropdown-toggle"
+    );
+
+    this.menuToggle = this.menuToggle.bind(this);
+    this.checkWindowWidth = this.checkWindowWidth.bind(this);
+    this.dropdownToggle = this.dropdownToggle.bind(this);
+
+    this.burgerButton.addEventListener("click", this.menuToggle);
+    this.closeButton.addEventListener("click", this.menuToggle);
+    window.addEventListener("resize", this.checkWindowWidth);
+
+    this.init();
+  }
+
+  isMobile() {
+    return window.innerWidth < 1024;
+  }
+
+  init() {
+    if (this.isMobile()) {
+      this.menu.classList.add("simple-nav-bar-hidden");
+      this.burgerButton.classList.remove("simple-nav-bar-hidden");
+      this.closeButton.classList.add("simple-nav-bar-hidden");
+    }
+    this.dropdownToggleTargets.forEach((dropdownToggle) => {
+      dropdownToggle.addEventListener("click", () =>
+        this.dropdownToggle(dropdownToggle)
+      );
+    });
+  }
+
+  checkWindowWidth() {
+    if (this.isMobile()) {
+      this.menu.classList.add("simple-nav-bar-hidden");
+      this.burgerButton.classList.remove("simple-nav-bar-hidden");
+      this.closeButton.classList.add("simple-nav-bar-hidden");
+    } else {
+      this.menu.classList.remove("simple-nav-bar-hidden");
+      this.burgerButton.classList.add("simple-nav-bar-hidden");
+      this.closeButton.classList.add("simple-nav-bar-hidden");
+    }
+  }
+
+  menuToggle() {
+    this.menu.classList.toggle("simple-nav-bar-hidden");
+    this.burgerButton.classList.toggle("simple-nav-bar-hidden");
+    this.closeButton.classList.toggle("simple-nav-bar-hidden");
+  }
+
+  dropdownToggle(dropdown) {
+    const dropdownMenu = dropdown.nextElementSibling;
+    if (dropdownMenu) {
+      dropdownMenu.classList.toggle("simple-nav-bar-hidden");
+      dropdown.children[0].classList.toggle("simple-nav-bar-hidden");
+      dropdown.children[1].classList.toggle("simple-nav-bar-hidden");
+    }
+  }
+}
+
+document.addEventListener("turbo:load", () => {
+  new MenuController();
+});

data/app/assets/javascript/simple_navbar_controller.js

@@ -0,0 +1,66 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = [
+    "menu",
+    "burgerButton",
+    "closeButton",
+    "dropdownMenu",
+    "dropdownToggle",
+  ];
+
+  connect() {
+    console.log("SimpleNavBarController connected");
+    this.checkWindowWidth();
+    this.closeButtonTarget.classList.add("simple-nav-bar-hidden");
+    window.addEventListener("resize", () => this.watchWindowWidth());
+    this.dropdownToggleTargets.forEach((dropdownToggle) => {
+      dropdownToggle.addEventListener("click", () =>
+        this.dropdownToggle(dropdownToggle)
+      );
+    });
+  }
+
+  isMobile() {
+    return window.innerWidth < 1024;
+  }
+
+  watchWindowWidth() {
+    if (this.isMobile()) {
+      this.menuTarget.classList.add("simple-nav-bar-hidden");
+      this.burgerButtonTarget.classList.remove("simple-nav-bar-hidden");
+      this.closeButtonTarget.classList.add("simple-nav-bar-hidden");
+    } else {
+      this.menuTarget.classList.remove("simple-nav-bar-hidden");
+      this.burgerButtonTarget.classList.add("simple-nav-bar-hidden");
+      this.closeButtonTarget.classList.add("simple-nav-bar-hidden");
+    }
+  }
+
+  checkWindowWidth() {
+    if (this.isMobile()) {
+      this.menuTarget.classList.add("simple-nav-bar-hidden");
+      this.burgerButtonTarget.classList.remove("simple-nav-bar-hidden");
+      this.closeButtonTarget.classList.add("simple-nav-bar-hidden");
+    }
+  }
+
+  menuToggle() {
+    const menu = this.menuTarget;
+    const burger = this.burgerButtonTarget;
+    const close = this.closeButtonTarget;
+
+    if (menu) menu.classList.toggle("simple-nav-bar-hidden");
+    if (burger) burger.classList.toggle("simple-nav-bar-hidden");
+    if (close) close.classList.toggle("simple-nav-bar-hidden");
+  }
+
+  dropdownToggle(dropdown) {
+    const dropdownMenu = dropdown.nextElementSibling;
+    if (dropdownMenu) {
+      dropdownMenu.classList.toggle("simple-nav-bar-hidden");
+      dropdown.children[0].classList.toggle("simple-nav-bar-hidden");
+      dropdown.children[1].classList.toggle("simple-nav-bar-hidden");
+    }
+  }
+}

data/app/assets/stylesheets/simple_navbar.css

@@ -0,0 +1,205 @@
+/* Custom colors*/
+:root {
+  --bg-color: #ffffff;
+  --text-color: #333333;
+  --shadow: rgba(0, 0, 0, 0.1);
+  --container-sm: 768px;
+  --container-md: 1024px;
+  --container-lg: 1280px;
+}
+
+[data-theme="dark"] {
+  --bg-color: #282a36;
+  --text-color: #f8f9fa;
+  --shadow: rgba(0, 0, 0, 0.3);
+}
+
+/* Navbar styles */
+
+.simple-nav-bar-hidden {
+  display: none !important;
+}
+
+.simple-nav-bar {
+  position: fixed;
+  background-color: var(--bg-color);
+  color: var(--text-color);
+  padding: 16px;
+  z-index: 100;
+  width: 100%;
+  box-shadow: 0 4px 6px -1px var(--shadow);
+}
+
+.simple-nav-bar-container {
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.simple-nav-bar-brand-link {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.simple-nav-bar-brand-title {
+  font-size: 1.125rem;
+  font-weight: 700;
+}
+
+.simple-nav-bar-brand-logo {
+  width: 4rem;
+  height: 4rem;
+}
+
+.simple-nav-bar-burger-button {
+  display: block;
+}
+
+.simple-nav-bar-burger-line {
+  display: block;
+  width: 1rem;
+  height: 0.125rem;
+  background-color: var(--text-color);
+  margin-bottom: 0.25rem;
+  border-radius: 0.125rem;
+}
+
+.simple-nav-bar-burger-line:last-child {
+  margin-bottom: 0;
+}
+
+.simple-nav-bar-close-button {
+  position: relative;
+  z-index: 1000;
+  width: 1.5rem;
+  height: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+}
+
+.simple-nav-bar-close-line {
+  display: block;
+  position: absolute;
+  width: 1rem;
+  height: 0.125rem;
+  background-color: var(--text-color);
+}
+
+.simple-nav-bar-close-line:first-child {
+  transform: rotate(45deg);
+}
+
+.simple-nav-bar-close-line:last-child {
+  transform: rotate(-45deg);
+}
+
+.simple-nav-bar-nav-list-container {
+  width: 100%;
+}
+
+.simple-nav-bar-nav-list {
+  font-size: 1.25rem;
+  text-align: start;
+  align-items: center;
+  column-gap: 1.25rem;
+  padding-top: 1rem;
+}
+
+/* Dropdown styles */
+
+.simple-nav-bar-nav-item-dropdown {
+  position: relative;
+}
+
+.simple-nav-bar-dropdown-arrow-up,
+.simple-nav-bar-dropdown-arrow-down {
+  font-size: 0.9rem;
+  margin-left: 6px;
+  padding: 0;
+}
+
+.simple-nav-bar-nav-item {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.simple-nav-bar-nav-link:hover {
+  color: rgb(156, 163, 175);
+}
+
+.simple-nav-bar-dropdown-menu {
+  position: absolute;
+  background-color: var(--bg-color);
+  z-index: 100;
+  top: 36px;
+  right: 0;
+  left: 0;
+  width: fit-content;
+  flex-direction: column;
+  padding: 12px;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06), 0 8px 10px -2px rgba(0, 0, 0, 0.1),
+    0 3px 6px -2px rgba(0, 0, 0, 0.05);
+}
+
+.simple-nav-bar-dropdown-item {
+  display: block;
+  padding: 0.5rem 1rem;
+  text-decoration: none;
+}
+
+/* Media queries */
+
+@media (min-width: 768px) {
+  .simple-nav-bar-container {
+    max-width: var(--container-sm);
+  }
+
+  .simple-nav-bar-nav-items {
+    column-gap: 1rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .simple-nav-bar-container {
+    max-width: var(--container-md);
+  }
+
+  .simple-nav-bar-burger-button,
+  .simple-nav-bar-close-button {
+    display: none;
+  }
+
+  .simple-nav-bar-nav-list-container {
+    display: flex;
+    align-items: center;
+    width: auto;
+  }
+
+  .simple-nav-bar-nav-list {
+    font-size: 1.125rem;
+    display: flex;
+    padding-top: 0;
+  }
+
+  .simple-nav-bar-nav-item {
+    padding: 0;
+  }
+}
+
+@media (min-width: 1280px) {
+  .simple-nav-bar-container {
+    max-width: var(--container-lg);
+  }
+
+  .simple-nav-bar-dropdown-menu {
+    top: 28px;
+  }
+}

data/lib/generators/simple_navbar/install_generator.rb

@@ -0,0 +1,48 @@
+require "rails/generators"
+
+module SimpleNavbar
+  class InstallGenerator < Rails::Generators::Base
+    source_root File.expand_path("../../../", __dir__)
+
+    class_option :stimulus, type: :boolean, default: false, desc: "Copy Stimulus controller instead of plain JavaScript"
+    class_option :legacy, type: :boolean, default: false, desc: "Copy to app/assets/javascripts instead of app/javascript"
+
+    def copy_stylesheet
+      copy_file "app/assets/stylesheets/simple_navbar.css", "app/assets/stylesheets/simple_navbar.css"
+    end
+
+    def copy_javascript
+      if options[:legacy]
+        copy_to_assets_folder
+      else
+        copy_to_javascript_folder
+      end
+    end
+
+    def include_helper_in_application_controller
+      inject_into_class "app/controllers/application_controller.rb", ApplicationController, "  helper SimpleNavbar\n"
+    end
+
+    def include_javascript_tag_in_layout
+      unless options[:stimulus]
+        inject_into_file "app/views/layouts/application.html.erb", before: "</head>\n" do
+          "  <%= javascript_include_tag 'custom/simple_navbar' %>\n"
+        end
+      end
+    end
+
+    private
+
+    def copy_to_javascript_folder
+      if options[:stimulus]
+        copy_file "app/assets/javascript/simple_navbar_controller.js", "app/javascript/controllers/simple_navbar_controller.js"
+      else
+        copy_file "app/assets/javascript/simple_navbar.js", "app/javascript/custom/simple_navbar.js"
+      end
+    end
+
+    def copy_to_assets_folder
+      copy_file "app/assets/javascript/simple_navbar.js", "app/assets/javascripts/simple_navbar.js"
+    end
+  end
+end

data/lib/simple_navbar/railtie.rb

@@ -0,0 +1,4 @@
+module SimpleNavbar
+  class Railtie < ::Rails::Railtie
+  end
+end

data/lib/simple_navbar/version.rb

@@ -0,0 +1,3 @@
+module SimpleNavbar
+  VERSION = "0.1.0"
+end

data/lib/simple_navbar.rb

@@ -0,0 +1,126 @@
+require "simple_navbar/version"
+require "simple_navbar/railtie"
+
+module SimpleNavbar
+  def simple_navbar(brand: {}, links: [])
+    content_tag :nav, class: "simple-nav-bar" do
+      content_tag(:div, class: "simple-nav-bar-container") do
+        concat(
+          content_tag(:a, href: brand[:url], class: "simple-nav-bar-brand-link") do
+            concat content_tag(:h1, brand[:title], class: "simple-nav-bar-brand-title") if brand[:title].present?
+            concat image_tag(brand[:logo], class: "simple-nav-bar-brand-logo") if brand[:logo].present?
+          end
+        )
+
+        concat(
+          content_tag(:button, class: "simple-nav-bar-burger-button") do
+            concat content_tag(:span, "", class: "simple-nav-bar-burger-line")
+            concat content_tag(:span, "", class: "simple-nav-bar-burger-line")
+            concat content_tag(:span, "", class: "simple-nav-bar-burger-line")
+          end
+        )
+
+        concat(
+          content_tag(:button, class: "simple-nav-bar-close-button") do
+            concat content_tag(:span, "", class: "simple-nav-bar-close-line")
+            concat content_tag(:span, "", class: "simple-nav-bar-close-line")
+          end
+        )
+
+        concat(
+          content_tag(:div, class: "simple-nav-bar-nav-list-container") do
+            content_tag(:nav) do
+              content_tag(:ul, class: "simple-nav-bar-nav-list") do
+                links.map do |link|
+                  if link[:dropdown]
+                    concat(
+                      content_tag(:li, class: "simple-nav-bar-nav-item simple-nav-bar-nav-item-dropdown") do
+                        concat(
+                          content_tag(:button, class: "simple-nav-bar-nav-link simple-nav-bar-dropdown-toggle") do
+                            concat link[:dropdown][:label]
+                            concat content_tag(:span, "▼", class: "simple-nav-bar-dropdown-arrow-down")
+                            concat content_tag(:span, "▲", class: "simple-nav-bar-dropdown-arrow-up simple-nav-bar-hidden")
+                          end
+                        )
+                        concat(
+                          content_tag(:ul, class: "simple-nav-bar-dropdown-menu simple-nav-bar-hidden", data: { simple_navbar_target: "dropdownMenu" }) do
+                            link[:dropdown][:links].map do |sublink|
+                              concat content_tag(:li, link_to(sublink[:label], sublink[:url], class: "simple-nav-bar-dropdown-item"))
+                            end.join.html_safe
+                          end
+                        )
+                      end
+                    )
+                  else
+                    concat content_tag(:li, link_to(link[:label], link[:url], class: "simple-nav-bar-nav-link"), class: "simple-nav-bar-nav-item")
+                  end
+                end.join.html_safe
+              end
+            end
+          end
+        )
+      end
+    end
+  end
+
+  def simple_navbar_s(brand: {}, links: [])
+    content_tag :nav, class: "simple-nav-bar", data: { controller: "simple-navbar" } do
+      content_tag(:div, class: "simple-nav-bar-container") do
+        concat(
+          content_tag(:a, href: brand[:url], class: "simple-nav-bar-brand-link") do
+            concat content_tag(:h1, brand[:title], class: "simple-nav-bar-brand-title") if brand[:title].present?
+            concat image_tag(brand[:logo], class: "simple-nav-bar-brand-logo") if brand[:logo].present?
+          end
+        )
+
+        concat(
+          content_tag(:button, class: "simple-nav-bar-burger-button", data: { action: "click->simple-navbar#menuToggle", simple_navbar_target: "burgerButton" }) do
+            concat content_tag(:span, "", class: "simple-nav-bar-burger-line")
+            concat content_tag(:span, "", class: "simple-nav-bar-burger-line")
+            concat content_tag(:span, "", class: "simple-nav-bar-burger-line")
+          end
+        )
+
+        concat(
+            content_tag(:button, class: "simple-nav-bar-close-button", data: { action: "click->simple-navbar#menuToggle", simple_navbar_target: "closeButton" }) do
+              concat content_tag(:span, "", class: "simple-nav-bar-close-line")
+              concat content_tag(:span, "", class: "simple-nav-bar-close-line")
+            end
+        )
+
+        concat(
+          content_tag(:div, class: "simple-nav-bar-nav-list-container", data: { simple_navbar_target: "menu" }) do
+            content_tag(:nav) do
+              content_tag(:ul, class: "simple-nav-bar-nav-list") do
+                links.map do |link|
+                  if link[:dropdown]
+                    concat(
+                      content_tag(:li, class: "simple-nav-bar-nav-item simple-nav-bar-nav-item-dropdown") do
+                        concat(
+                          content_tag(:button, class: "simple-nav-bar-nav-link", data: { simple_navbar_target: "dropdownToggle" }) do
+                            concat link[:dropdown][:label]
+                            concat content_tag(:span, "▼", class: "simple-nav-bar-dropdown-arrow-down")
+                            concat content_tag(:span, "▲", class: "simple-nav-bar-dropdown-arrow-up simple-nav-bar-hidden")
+                          end
+                        )
+                        concat(
+                          content_tag(:ul, class: "simple-nav-bar-dropdown-menu simple-nav-bar-hidden", data: { simple_navbar_target: "dropdownMenu" }) do
+                            link[:dropdown][:links].map do |sublink|
+                              concat content_tag(:li, link_to(sublink[:label], sublink[:url], class: "simple-nav-bar-dropdown-item"))
+                            end.join.html_safe
+                          end
+                        )
+                      end
+                    )
+                  else
+                    concat content_tag(:li, link_to(link[:label], link[:url], class: "simple-nav-bar-nav-link"), class: "simple-nav-bar-nav-item")
+                  end
+                end.join.html_safe
+              end
+            end
+          end
+        )
+      end
+    end
+  end
+end

data/lib/tasks/simple_navbar_tasks.rake

@@ -0,0 +1,4 @@
+# desc "Explaining what the task does"
+# task :simple_navbar do
+#   # Task goes here
+# end

metadata

@@ -0,0 +1,71 @@
+--- !ruby/object:Gem::Specification
+name: simple_navbar
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Rômulo Oliveira
+autorequire:
+bindir: bin
+cert_chain: []
+date: 2024-12-13 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '6.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '6.0'
+description: Stop losing time creating a navbar from scratch. Use this gem to create
+  a simple and easy navbar for your Rails applications.
+email:
+- romuloffall@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- MIT-LICENSE
+- README.md
+- Rakefile
+- app/assets/javascript/simple_navbar.js
+- app/assets/javascript/simple_navbar_controller.js
+- app/assets/stylesheets/simple_navbar.css
+- lib/generators/simple_navbar/install_generator.rb
+- lib/simple_navbar.rb
+- lib/simple_navbar/railtie.rb
+- lib/simple_navbar/version.rb
+- lib/tasks/simple_navbar_tasks.rake
+homepage: https://github.com/RomuloOliveira94/simple_navbar
+licenses:
+- MIT
+metadata:
+  homepage_uri: https://github.com/RomuloOliveira94/simple_navbar
+  source_code_uri: https://github.com/RomuloOliveira94/simple_navbar
+post_install_message:
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.5.23
+signing_key:
+specification_version: 4
+summary: Simple and easy navbar for Rails applications.
+test_files: []