From bdb99a39b15083fcce9acaf060ce864a6ee44ea7 Mon Sep 17 00:00:00 2001
From: Stanislav Romanov <kaermorchen@gmail.com>
Date: Sun, 18 Sep 2022 13:54:59 +0300
Subject: [PATCH] Refactore styles of sidenav

---
 app/assets/styles.css                  |  25 +++--
 app/components/icons/lifebuoy.js       |   1 +
 app/components/icons/server-network.js |   1 +
 app/components/theme-toggler.hbs       |   2 +-
 app/templates/admin.hbs                | 123 ++++++++++++-------------
 5 files changed, 80 insertions(+), 72 deletions(-)
 create mode 100644 app/components/icons/lifebuoy.js
 create mode 100644 app/components/icons/server-network.js

diff --git a/app/assets/styles.css b/app/assets/styles.css
index 07a9bc5..eb242c3 100644
--- a/app/assets/styles.css
+++ b/app/assets/styles.css
@@ -95,6 +95,8 @@ body {
 }
 
 .sidenav {
+  display: flex;
+  flex-direction: column;
   grid-area: sidenav;
   position: fixed;
   z-index: var(--z-index-sidenav);
@@ -120,6 +122,10 @@ body {
 }
 
 .sidenav-sections {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  max-height: 100vh;
   position: absolute;
   top: 0;
   bottom: 0;
@@ -127,12 +133,14 @@ body {
   width: var(--sidenav-width);
   transition-property: transform;
   transform: translate3d(-100%, 0, 0);
-  @apply bg-base-7 p-4 pt-0;
+  overflow-y: auto;
+  @apply bg-base-7 p-4;
 }
 
 .main {
   grid-area: main;
-  padding: calc(var(--spacing-4) + var(--header-height)) var(--spacing-4) var(--spacing-4);
+  padding: calc(var(--spacing-4) + var(--header-height)) var(--spacing-4)
+    var(--spacing-4);
   @apply bg-base-7;
 }
 
@@ -159,14 +167,16 @@ body {
   }
 }
 
-@media (min-width: theme("screens.lg")) {
+@media (min-width: theme('screens.lg')) {
   body.sidebar-is-opened {
     overflow: initial;
   }
 
   .app {
-    grid-template-columns: var(--sidenav-width) calc(100% - var(--sidenav-width));
-    grid-template-areas: "sidenav main";
+    grid-template-columns: var(--sidenav-width) calc(
+        100% - var(--sidenav-width)
+      );
+    grid-template-areas: 'sidenav main';
   }
 
   .sidenav {
@@ -180,11 +190,10 @@ body {
   }
 
   .sidenav-sections {
-    position: relative;
+    position: sticky;
     transform: none;
     transition-duration: none;
-    position: initial;
-    top: initial;
+    top: 0;
     bottom: initial;
     left: initial;
     width: auto;
diff --git a/app/components/icons/lifebuoy.js b/app/components/icons/lifebuoy.js
new file mode 100644
index 0000000..ebb4b94
--- /dev/null
+++ b/app/components/icons/lifebuoy.js
@@ -0,0 +1 @@
+export { Lifebuoy as default } from 'ember-mdi';
diff --git a/app/components/icons/server-network.js b/app/components/icons/server-network.js
new file mode 100644
index 0000000..ebf0c7b
--- /dev/null
+++ b/app/components/icons/server-network.js
@@ -0,0 +1 @@
+export { ServerNetwork as default } from 'ember-mdi';
diff --git a/app/components/theme-toggler.hbs b/app/components/theme-toggler.hbs
index 0d39b2e..923de83 100644
--- a/app/components/theme-toggler.hbs
+++ b/app/components/theme-toggler.hbs
@@ -1,4 +1,4 @@
-<div class='grid grid-cols-3 gap-1 p-1 rounded bg-base-6'>
+<div class='grid grid-cols-3 gap-1 p-1 rounded bg-base-6' ...attributes>
   {{#each this.themes as |item|}}
     {{#let (eq item.id this.theme) as |selected|}}
       <Button
diff --git a/app/templates/admin.hbs b/app/templates/admin.hbs
index 99f6f93..e982b82 100644
--- a/app/templates/admin.hbs
+++ b/app/templates/admin.hbs
@@ -3,75 +3,72 @@
 
   <aside class='sidenav'>
     <SidenavBackground />
-    <div class='sidenav-sections'>
-      <MobileBar class='relative flex mb-4' />
-      {{#let
-        'flex items-center px-4 py-2 font-semibold text-lg text-base-2'
-        as |classLink|
-      }}
-        <nav class='flex flex-col flex-1 mb-4'>
-          {{!-- <div class='px-4 py-2 text-sm text-base-3'>Indexes</div>
-          {{#each @model.results as |item|}}
-            <LinkTo
-              @route='admin.indexes.item'
-              @model={{item}}
-              class={{classLink}}
-            >
-              <Icons::CircleMedium class='mr-1' />
-              {{capitalize item.uid}}
+    {{#let
+      'flex items-center px-4 py-2 font-semibold text-lg text-base-2'
+      as |classLink|
+    }}
+      <div class='sidenav-sections'>
+        <div>
+          <MobileBar class='relative flex mb-3' />
+
+          <nav class='flex flex-col flex-1'>
+            <LinkTo @route='admin.indexes.index' class={{classLink}}>
+              <Icons::FolderMultipleOutline class='fill-base-3 mr-2' />
+              Indexes
             </LinkTo>
-          {{/each}} --}}
-          <LinkTo @route='admin.indexes.index' class={{classLink}}>
-            <Icons::FolderMultipleOutline class='fill-base-3 mr-2' />
-            Indexes
-          </LinkTo>
-          <LinkTo @route='admin.tasks.index' class={{classLink}}>
-            <Icons::FormatListChecks class='fill-base-3 mr-2' />
-            Tasks
-          </LinkTo>
-          <LinkTo @route='admin.keys.index' class={{classLink}}>
-            <Icons::KeyOutline class='fill-base-3 mr-2' />
-            Keys
-          </LinkTo>
+            <LinkTo @route='admin.tasks.index' class={{classLink}}>
+              <Icons::FormatListChecks class='fill-base-3 mr-2' />
+              Tasks
+            </LinkTo>
+            <LinkTo @route='admin.keys.index' class={{classLink}}>
+              <Icons::KeyOutline class='fill-base-3 mr-2' />
+              Keys
+            </LinkTo>
+          </nav>
+        </div>
 
-          <Divider />
+        <div class='mt-auto'>
+          <div class='mb-4'>
+            <a
+              href='https://docs.meilisearch.com/'
+              class='{{classLink}} mt-auto'
+              target='_blank'
+              rel='noopener noreferrer'
+            >
+              <Icons::Lifebuoy class='fill-base-3 mr-2' />
+              Documentation
+              <Icons::OpenInNew @size={{10}} class='mt-1 ml-0.5 self-start' />
+            </a>
+            <a
+              href='https://github.com/kaermorchen/meiliadmin'
+              class={{classLink}}
+              target='_blank'
+              rel='noopener noreferrer'
+            >
+              <Icons::Github class='fill-base-3 mr-2' />
+              MeiliAdmin
+              <Icons::OpenInNew @size={{10}} class='mt-1 ml-0.5 self-start' />
+            </a>
+          </div>
 
-          <a
-            href='https://docs.meilisearch.com/'
-            class={{classLink}}
-            target='_blank'
-            rel='noopener noreferrer'
-          >
-            <Icons::HelpCircleOutline class='fill-base-3 mr-2' />
-            Documentation
-            <Icons::OpenInNew @size={{12}} class='mt-1 self-start' />
-          </a>
-          <a
-            href='https://github.com/kaermorchen/meiliadmin'
-            class={{classLink}}
-            target='_blank'
-            rel='noopener noreferrer'
-          >
-            <Icons::Github class='fill-base-3 mr-2' />
-            MeiliAdmin
-            <Icons::OpenInNew @size={{12}} class='mt-1 self-start' />
-          </a>
+          <ThemeToggler class='mb-6 mt-5' />
 
-          <Divider />
+          <div class='flex items-center mb-4'>
+            <Icons::ServerNetwork @size={{40}} class='fill-base-3 mx-2' />
 
-          <button
-            type='button'
-            {{on 'click' this.invalidateSession}}
-            class={{classLink}}
-          >
-            <Icons::Logout class='fill-base-3 mr-2' />
-            Logout
-          </button>
-        </nav>
+            <span class='font-semibold mr-2'>
+              {{this.session.data.authenticated.url}}
+            </span>
 
-        <ThemeToggler />
-      {{/let}}
-    </div>
+            <Icons::Logout
+              class='fill-base-3 ml-auto cursor-pointer'
+              title='Logout'
+              {{on 'click' this.invalidateSession}}
+            />
+          </div>
+        </div>
+      </div>
+    {{/let}}
   </aside>
 
   <main class='main'>