Add sidebar

app/components/menu-item.hbs

@@ -0,0 +1,6 @@
+<LinkTo @route={{@route}} @model={{@model}} @activeClass="bg-secondary" class="flex items-center px-4 py-2 rounded-md text-light hover:bg-secondary">
+  {{#if @icon}}
+    <MdIcon @icon={{@icon}} />
+  {{/if}}
+  <span class="{{if @icon 'mx-4'}} font-medium">{{@name}}</span>
+</LinkTo>

app/helpers/capitalize.js

@@ -0,0 +1,6 @@
+import { helper } from '@ember/component/helper';
+import { capitalize as func } from '@ember/string';
+
+export default helper(function capitalize([str]) {
+  return func(str);
+});

app/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <title>MeiliSearch Admin</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" >
+    <link rel="icon" type="image/svg+xml" href="/logo.svg" >
 
     {{content-for "head"}}
 

app/routes/admin.js

@@ -1,3 +1,10 @@
 import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
 
-export default class AdminRoute extends Route {}
+export default class AdminRoute extends Route {
+  @service meilisearch;
+
+  async model() {
+    return this.meilisearch.getRawIndexes();
+  }
+}

app/templates/admin.hbs

@@ -0,0 +1,25 @@
+<div class="relative min-h-screen flex">
+  <div class="flex flex-col w-64 h-screen px-4 py-8 bg-dark border-r border-light">
+    <h2 class="text-xl font-semibold text-light text-center flex items-center">
+      <img src="/logo.svg" alt="MeiliSearch" class="w-8 h-8 mr-2">
+      MeiliSearch Admin
+    </h2>
+
+    <div class="flex flex-col justify-between flex-1 mt-6">
+      <nav>
+        {{#each @model as |item|}}
+          <MenuItem
+            @route="admin.indexes.item"
+            @model={{item.name}}
+            @name={{capitalize item.name}}
+            class="flex flex-row items-center h-12 px-base"
+          />
+        {{/each}}
+      </nav>
+    </div>
+  </div>
+
+  <div class="flex-1">
+    {{outlet}}
+  </div>
+</div>

app/templates/admin/indexes.hbs

@@ -1,24 +1 @@
-{{page-title "Indexes"}}
-
-<div class="flex flex-row min-h-screen w-full">
-  <aside class="flex flex-col w-64 p-base">
-    <nav>
-      <ul>
-        {{#each @model as |item|}}
-          <li>
-            <LinkTo
-              @route="admin.indexes.item"
-              @model={{item.name}}
-              class="flex flex-row items-center h-12 px-base"
-            >
-              {{item.name}}
-            </LinkTo>
-          </li>
-        {{/each}}
-      </ul>
-    </nav>
-  </aside>
-  <main class="main flex flex-col flex-grow">
-    {{outlet}}
-  </main>
-</div>
+{{outlet}}

config/tailwind.config.js

@@ -9,6 +9,12 @@ module.exports = {
       spacing: {
         base: '1.5rem',
       },
+      colors: {
+        light: '#E5E7EB',
+        secondary: '#374151',
+        dark: '#1F2937',
+        primary: '#2563EB',
+      },
     },
   },
   variants: {

tests/integration/components/menu-item-test.js

@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | menu-item', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`<MenuItem />`);
+
+    assert.dom(this.element).hasText('');
+
+    // Template block usage:
+    await render(hbs`
+      <MenuItem>
+        template block text
+      </MenuItem>
+    `);
+
+    assert.dom(this.element).hasText('template block text');
+  });
+});

tests/integration/helpers/capitalize-test.js

@@ -0,0 +1,17 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Helper | capitalize', function (hooks) {
+  setupRenderingTest(hooks);
+
+  // TODO: Replace this with your real tests.
+  test('it renders', async function (assert) {
+    this.set('inputValue', '1234');
+
+    await render(hbs`{{capitalize this.inputValue}}`);
+
+    assert.dom(this.element).hasText('1234');
+  });
+});