Active Admin 3.2.0 — Navbar
How To Use Active Admin 3.2 — Part XII — Adding Navbar — RailsSeries#Episode 14
Hello! In this episode, our focus is on styling our page to achieve this particular look and feel:
0#step —Download the last version (v1) post here and prepare your vscode
environment.
Let’s open a new Feature Branch: git checkout -b add_navbar
.
1#step —Run:
rails g controller pages home about
2#step — Open:
config/routes.rb
get 'home', to: 'pages#home'
get 'about', to: 'pages#about'
...
root 'pages#home'
3#step — Open:
app/views/pages/about.html.erb
<h1>Hi! I am Jaythree!</h1>
<p>That's right guys... o/ I am J3! I am just a hobby-dev, playing around with </p>
<p> Python, Django, Ruby, Rails, Lego, Arduino, Raspy, PIC, AI… </p>
<p>Welcome! Join us!</p>
<hr>
<a href="https://medium.com/jungletronics">Visit Jungletronics</a><br>
<a href="https://medium.com/kidstronics">Visit Kidstronics</a><br>
<hr>
4#step — Open:
app/views/pages/home.html.erb
<h1>Welcome to My Personal Web Blog!</h1>
<h2>Here 👇️ this is all about Active Admin. Welcome! 👋️ </h2>
<br>
5#step — Go To Bootstrap 5 CDN, paste the links to:
app/views/layouts/application.html.erb
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
6#step — Nested body like this:
app/views/layouts/application.html.erb
<body>
<%= render 'layouts/navbar' %>
<%= render 'layouts/messages'%>
<main>
<div class="container">
<%= yield %>
</div>
</main>
</body>
7#step — Create a file:
app/views/layouts/_navbar.html.erb
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="/home">Rails Blog</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<%= link_to "Home", root_path, class: 'nav-link' %>
</li>
<li class="nav-item">
<%= link_to "About", about_path, class: 'nav-link' %>
</li>
<li class="nav-item">
<%= link_to "Blog", posts_path, class: 'nav-link' %>
</li>
</ul>
<ul class="navbar-nav">
<%= render 'layouts/session_manager' %>
</ul>
</div>
</div>
</nav>
8#step — Create a file:
app/views/layouts/_session_manager.html.erb
<li class="nav-item dropdown">
<li class="nav-item">
<%= link_to "Admin", admin_root_path, class: 'nav-link' %>
</li>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
User Functionality
</a>
<ul class="dropdown-menu dropdown-menu-lg-end" aria-labelledby="navbarDropdown">
<li><%= link_to "New Post", new_post_path , class: "dropdown-item" %></li>
<li><a class="dropdown-item" href="#">Action</a></li>
<li><%= link_to "Edit Account", '#', class:"dropdown-item" %></li>
<li><hr class="dropdown-divider"></li>
<li><%= link_to "Sign out", '#', method: :delete, class:"dropdown-item" %></li>
</ul>
</li>
9#step — Create:
app/views/layouts/_messages.html.erb
<% if notice %>
<div class="alert alert-success" >
<button type="button" class="btn-close float-end" data-bs-dismiss="alert" aria-label="Close"></button>
<%# <button type="button" class="close" data-dismiss="alert" aria-label="Close"> %>
<span aria-hidden="true">×</span>
</button>
<%= notice %>
</div>
<% end %>
<% if alert %>
<div class="alert alert-danger">
<button type="button" class="btn-close float-end" data-bs-dismiss="alert" aria-label="Close"></button>
<%# <button type="button" class="close" data-dismiss="alert" aria-label="Close"> %>
<span aria-hidden="true">×</span>
</button>
<%= alert %>
</div>
<% end %>
Wrapping up for now!
In our upcoming episode, we’ll dive into some advanced features within Active Admin.
Catch you later!
Credits & References
Rails Admin Interfaces with ActiveAdmin by Chris Oliver (GoRails)
git tag -a v2 -m "ActiveAdmin 3.2.0 : Go to https://medium.com/jungletronics/navbar-4-active-admin-3-2-0-d9a1d74cd1ab" -m "0- Set up page controller with home and about actions;" -m "1- Adjust routes.rb accordingly;" -m "2- Customize about and home pages;" -m "3- Integrate Bootstrap CDN links;" -m "4- Design a responsive navbar;" -m "5- Implement messaging functionality; You're all set!" -m "Thank you for downloading this project 😍️"
git push origin v2
git add -A
git commit -m ":lipstick: Active Admin v2: Adding Navbar"
git push --set-upstream origin add_navbar
[GoTo your GIT REPO and Merge the Request]
[Returns to vscode]
git checkout master
git status
git fetch
git merge add_navbar
git pull
Related Posts:
01# Quick Start — Part I — Get started with a very simple rails 7 frame;
02# Navbar Creation — Part II — Create a Navbar & User Functionalities in Dropdown;
03# Features — Part III — Implements some Cool advanced features.