Basic setup, launch config and layout

app/assets/stylesheets/application.bootstrap.scss

@@ -1,2 +1,31 @@
+@font-face {
+  font-family: 'Lexend';
+  src: url('Lexend-VariableFont_wght.ttf');
+  font-display: swap;
+ }
+
+$font-family-sans-serif:
+  Lexend,
+  // Cross-platform generic font family (default user interface font)
+  system-ui,
+  // Safari for macOS and iOS (San Francisco)
+  -apple-system,
+  // Windows
+  "Segoe UI",
+  // Android
+  Roboto,
+  // Basic web fallback
+  "Helvetica Neue", Arial,
+  // Linux
+  "Noto Sans",
+  "Liberation Sans",
+  // Sans serif fallback
+  sans-serif,
+  // Emoji fonts
+  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
+
+$primary: #0074d9;
+$danger: #ff4136;
+
 @import 'bootstrap/scss/bootstrap';
 @import 'bootstrap-icons/font/bootstrap-icons';

app/channels/application_cable/channel.rb

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 module ApplicationCable
   class Channel < ActionCable::Channel::Base
   end

app/channels/application_cable/connection.rb

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 module ApplicationCable
   class Connection < ActionCable::Connection::Base
   end

app/controllers/application_controller.rb

@@ -1,2 +1,15 @@
+# frozen_string_literal: true
+
 class ApplicationController < ActionController::Base
+  before_action :initialize_navbar
+
+  private
+
+  def initialize_navbar
+    @navbar_items = [
+      { label: 'Dashboard', path: :root },
+      { label: 'Home', path: :home }
+    ]
+    @search_url = nil # root_url
+  end
 end

app/controllers/home_controller.rb

@@ -1,4 +1,5 @@
+# frozen_string_literal: true
+
 class HomeController < ApplicationController
-  def show
-  end
+  def show; end
 end

app/helpers/application_helper.rb

@@ -1,2 +1,4 @@
+# frozen_string_literal: true
+
 module ApplicationHelper
 end

app/helpers/home_helper.rb

@@ -1,2 +1,4 @@
+# frozen_string_literal: true
+
 module HomeHelper
 end

app/javascript/controllers/index.js

@@ -6,3 +6,6 @@ import { application } from "./application"
 
 import HelloController from "./hello_controller"
 application.register("hello", HelloController)
+
+import SetThemeController from "./set_theme_controller"
+application.register("set-theme", SetThemeController)

app/javascript/controllers/set_theme_controller.js

@@ -0,0 +1,18 @@
+import { Controller } from "@hotwired/stimulus"
+import Cookie from "../lib/cookies"
+
+// Connects to data-controller="set-theme"
+export default class extends Controller {
+  COOKIE_NAME = "modeTheme";
+
+  connect() {
+    const cookieValue = Cookie.get(this.COOKIE_NAME);
+    console.log("cookieValue", cookieValue);
+    if(cookieValue) {
+      return true;
+    }
+    const darkMode = window.matchMedia("(prefers-color-scheme:dark)").matches ? "dark" : "light";
+    Cookie.set(this.COOKIE_NAME, darkMode);
+    window.document.getElementsByTagName("html")[0].setAttribute("data-bs-theme", darkMode)
+  }
+}

app/javascript/lib/cookies.js

@@ -0,0 +1,23 @@
+export default class Cookies {
+  static set(cname, cvalue, exdays = 365) {
+    const d = new Date();
+    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
+    let expires = "expires="+d.toUTCString();
+    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
+  }
+  
+  static get(cname) {
+    let name = cname + "=";
+    let ca = document.cookie.split(';');
+    for(let i = 0; i < ca.length; i++) {
+      let c = ca[i];
+      while (c.charAt(0) == ' ') {
+        c = c.substring(1);
+      }
+      if (c.indexOf(name) == 0) {
+        return c.substring(name.length, c.length);
+      }
+    }
+    return "";
+  }
+}

app/jobs/application_job.rb

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class ApplicationJob < ActiveJob::Base
   # Automatically retry jobs that encountered a deadlock
   # retry_on ActiveRecord::Deadlocked

app/mailers/application_mailer.rb

@@ -1,4 +1,6 @@
+# frozen_string_literal: true
+
 class ApplicationMailer < ActionMailer::Base
-  default from: "from@example.com"
-  layout "mailer"
+  default from: 'from@example.com'
+  layout 'mailer'
 end

app/models/application_record.rb

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class ApplicationRecord < ActiveRecord::Base
   primary_abstract_class
 end

app/views/home/show.html.erb

@@ -1,2 +1,3 @@
 <h1>Welcome</h1>
 <p>Find me in app/views/home/show.html.erb</p>
+<button class="btn btn-primary">Test</button>

app/views/layouts/_navigation.html.erb

@@ -1,36 +1,44 @@
 <nav class="navbar navbar-expand-lg bg-body-tertiary">
   <div class="container-fluid">
-    <a class="navbar-brand" href="#">Navbar</a>
+    <a class="navbar-brand" href="<%= root_path %>">A11Yist</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">
-          <a class="nav-link active" aria-current="page" href="#">Home</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" href="#">Link</a>
-        </li>
-        <li class="nav-item dropdown">
-          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-            Dropdown
-          </a>
-          <ul class="dropdown-menu">
-            <li><a class="dropdown-item" href="#">Action</a></li>
-            <li><a class="dropdown-item" href="#">Another action</a></li>
-            <li><hr class="dropdown-divider"></li>
-            <li><a class="dropdown-item" href="#">Something else here</a></li>
-          </ul>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link disabled" aria-disabled="true">Disabled</a>
-        </li>
-      </ul>
-      <form class="d-flex" role="search">
-        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
-        <button class="btn btn-outline-success" type="submit">Search</button>
-      </form>
+      <% if @navbar_items %>
+        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+          <% @navbar_items.each do |navbar_item| %>
+            <li class="nav-item">
+              <a class="nav-link <%= current_page?(navbar_item[:path]) && "active" %>" <%= current_page?(navbar_item[:path]) && "aria-current=\"page\"" %> href="<%= url_for(navbar_item[:path]) %>"><%= navbar_item[:label] %></a>
+            </li>
+          <% end %>
+          <%# <li class="nav-item">
+            <a class="nav-link" href="#">Link</a>
+          </li>
+          <li class="nav-item dropdown">
+            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+              Dropdown
+            </a>
+            <ul class="dropdown-menu">
+              <li><a class="dropdown-item" href="#">Action</a></li>
+              <li><a class="dropdown-item" href="#">Another action</a></li>
+              <li><hr class="dropdown-divider"></li>
+              <li><a class="dropdown-item" href="#">Something else here</a></li>
+            </ul>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link disabled" aria-disabled="true">Disabled</a>
+          </li> %>
+        </ul>
+      <% else %>
+        <div class="me-auto"></div>
+      <% end %>
+      <% if @search_url %>
+        <form class="d-flex" role="search" action="<%= @search_url %>">
+          <input class="form-control me-2" type="search" placeholder="<%= @search_placeholder || "..." %>" aria-label="Search">
+          <button class="btn btn-outline-success" type="submit" name="<%= @search_name || "q" %>"><%= @search_placeholder || "Suchen" %></button>
+        </form>
+      <% end %>
     </div>
   </div>
 </nav>

app/views/layouts/application.html.erb

@@ -1,8 +1,9 @@
-<!DOCTYPE html>
-<html>
+<!doctype html>
+<html <%== cookies[:"modeTheme"] && "data-bs-theme=\"#{cookies[:"modeTheme"]}\"" %> data-controller="set-theme">
   <head>
     <title>A11yist</title>
     <meta name="viewport" content="width=device-width,initial-scale=1">
+
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
 
@@ -10,9 +11,14 @@
     <%= javascript_include_tag "application", "data-turbo-track": "reload", type: "module" %>
   </head>
 
-  <body>
+  <body class="">
     <%= render partial: "layouts/navigation" %>
     
-    <%= yield %>
+    <main class="">
+      <%= render partial: "layouts/sidebar" %>
+      <div class="p-3">
+        <%= yield %>
+      </div>
+    </main>
   </body>
 </html>