fix(layout): adjust new note button on mobile (#182)

* fix(layout) Adjust new note button on mobile * Use hamburger on mobile * Continue building mobile nav bar menu * Lint * Fix Dropdown menu sub trigger * Revert "fix(layout) Adjust new note button on mobile" This reverts commit 37c63c8. * Remove empty keys
CorentinTh · Sep 25, 2024 · 1f73773 · 1f73773
1 parent 9822d0d
commit 1f73773
Show file tree

Hide file tree

Showing 7 changed files with 94 additions and 33 deletions.
diff --git a/packages/app-client/src/locales/de.json b/packages/app-client/src/locales/de.json
@@ -9,6 +9,7 @@
   },
   "navbar": {
     "new-note": "Neue Notiz",
+    "github": "GitHub",
     "theme": {
       "light-mode": "Light mode",
       "dark-mode": "Dark mode",

diff --git a/packages/app-client/src/locales/en.json b/packages/app-client/src/locales/en.json
@@ -9,7 +9,10 @@
   },
   "navbar": {
     "new-note": "New note",
+    "github": "GitHub",
+    "language": "Language",
     "theme": {
+      "theme": "Theme",
       "light-mode": "Light mode",
       "dark-mode": "Dark mode",
       "system-mode": "System"

diff --git a/packages/app-client/src/locales/es.json b/packages/app-client/src/locales/es.json
@@ -9,6 +9,7 @@
   },
   "navbar": {
     "new-note": "Nueva nota",
+    "github": "GitHub",
     "theme": {
       "light-mode": "Modo claro",
       "dark-mode": "Modo oscuro",

diff --git a/packages/app-client/src/locales/fr.json b/packages/app-client/src/locales/fr.json
@@ -9,6 +9,7 @@
   },
   "navbar": {
     "new-note": "Nouvelle note",
+    "github": "GitHub",
     "theme": {
       "light-mode": "Mode clair",
       "dark-mode": "Mode sombre",

diff --git a/packages/app-client/src/locales/ru.json b/packages/app-client/src/locales/ru.json
@@ -9,6 +9,7 @@
   },
   "navbar": {
     "new-note": "Новая заметка",
+    "github": "GitHub",
     "theme": {
       "light-mode": "Светлая тема",
       "dark-mode": "Темная тема",
@@ -135,4 +136,4 @@
     "label": "Скопировать в буфер обмена",
     "success": "Скопировано"
   }
-}
+}
diff --git a/packages/app-client/src/modules/ui/components/navbar-sub-menus.tsx b/packages/app-client/src/modules/ui/components/navbar-sub-menus.tsx
@@ -0,0 +1,44 @@
+import { useI18n } from '@/modules/i18n/i18n.provider';
+import { cn } from '@/modules/shared/style/cn';
+import { useThemeStore } from '@/modules/theme/theme.store';
+import { DropdownMenuItem, DropdownMenuSeparator } from './dropdown-menu';
+
+export function ThemeSwitcher() {
+  const themeStore = useThemeStore();
+  const { t } = useI18n();
+  return (
+    <>
+      <DropdownMenuItem onClick={() => themeStore.setColorMode({ mode: 'light' })} class="flex items-center gap-2 cursor-pointer">
+        <div class="i-tabler-sun text-lg"></div>
+        {t('navbar.theme.light-mode')}
+      </DropdownMenuItem>
+      <DropdownMenuItem onClick={() => themeStore.setColorMode({ mode: 'dark' })} class="flex items-center gap-2 cursor-pointer">
+        <div class="i-tabler-moon text-lg"></div>
+        {t('navbar.theme.dark-mode')}
+      </DropdownMenuItem>
+      <DropdownMenuItem onClick={() => themeStore.setColorMode({ mode: 'system' })} class="flex items-center gap-2 cursor-pointer">
+        <div class="i-tabler-device-laptop text-lg"></div>
+        {t('navbar.theme.system-mode')}
+      </DropdownMenuItem>
+    </>
+  );
+}
+
+export function LanguageSwitcher() {
+  const { t, getLocale, setLocale, locales } = useI18n();
+  return (
+    <>
+      {locales.map(locale => (
+        <DropdownMenuItem onClick={() => setLocale(locale.key)} class={cn('flex items-center gap-2 cursor-pointer', { 'font-semibold': getLocale() === locale.key })}>
+          {locale.name}
+        </DropdownMenuItem>
+      ))}
+
+      <DropdownMenuSeparator />
+
+      <DropdownMenuItem as="a" class="flex items-center gap-2 cursor-pointer" target="_blank" rel="noopener noreferrer" href="https://github.com/CorentinTh/enclosed/tree/main/packages/app-client/src/locales">
+        {t('navbar.settings.contribute-to-i18n')}
+      </DropdownMenuItem>
+    </>
+  );
+}
diff --git a/packages/app-client/src/modules/ui/layouts/app.layout.tsx b/packages/app-client/src/modules/ui/layouts/app.layout.tsx
@@ -4,19 +4,19 @@ import { getConfig } from '@/modules/config/config.provider';
 import { buildDocUrl } from '@/modules/docs/docs.models';
 import { useI18n } from '@/modules/i18n/i18n.provider';
 import { useNoteContext } from '@/modules/notes/notes.context';
-import { cn } from '@/modules/shared/style/cn';
 import { useThemeStore } from '@/modules/theme/theme.store';
 import { Button } from '@/modules/ui/components/button';
 import { DropdownMenu } from '@kobalte/core/dropdown-menu';
 import { A, useNavigate } from '@solidjs/router';
 import { type Component, type ParentComponent, Show } from 'solid-js';
-import { DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '../components/dropdown-menu';
+import { DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from '../components/dropdown-menu';
+import { LanguageSwitcher, ThemeSwitcher } from '../components/navbar-sub-menus';
 
 export const Navbar: Component = () => {
   const themeStore = useThemeStore();
   const { triggerResetNoteForm } = useNoteContext();
   const navigate = useNavigate();
-  const { t, getLocale, setLocale, locales } = useI18n();
+  const { t } = useI18n();
 
   const config = getConfig();
 
@@ -44,56 +44,66 @@ export const Navbar: Component = () => {
             {t('navbar.new-note')}
           </Button>
 
-          <Button variant="ghost" class="text-lg px-0 size-9" as={A} href="https://github.com/CorentinTh/enclosed" target="_blank" rel="noopener noreferrer" aria-label="GitHub repository">
+          <Button variant="ghost" class="text-lg px-0 size-9 hidden sm:inline-flex" as={A} href="https://github.com/CorentinTh/enclosed" target="_blank" rel="noopener noreferrer" aria-label="GitHub repository">
             <div class="i-tabler-brand-github"></div>
           </Button>
 
           <DropdownMenu>
-            <DropdownMenuTrigger as={Button} class="text-lg px-0 size-9" variant="ghost" aria-label="Change theme">
+            <DropdownMenuTrigger as={Button} class="text-lg px-0 size-9 hidden sm:inline-flex" variant="ghost" aria-label="Change theme">
               <div classList={{ 'i-tabler-moon': themeStore.getColorMode() === 'dark', 'i-tabler-sun': themeStore.getColorMode() === 'light' }}></div>
             </DropdownMenuTrigger>
             <DropdownMenuContent class="w-42">
-              <DropdownMenuItem onClick={() => themeStore.setColorMode({ mode: 'light' })} class="flex items-center gap-2 cursor-pointer">
-                <div class="i-tabler-sun text-lg"></div>
-                {t('navbar.theme.light-mode')}
-              </DropdownMenuItem>
-              <DropdownMenuItem onClick={() => themeStore.setColorMode({ mode: 'dark' })} class="flex items-center gap-2 cursor-pointer">
-                <div class="i-tabler-moon text-lg"></div>
-                {t('navbar.theme.dark-mode')}
-              </DropdownMenuItem>
-              <DropdownMenuItem onClick={() => themeStore.setColorMode({ mode: 'system' })} class="flex items-center gap-2 cursor-pointer">
-                <div class="i-tabler-device-laptop text-lg"></div>
-                {t('navbar.theme.system-mode')}
-              </DropdownMenuItem>
+              <ThemeSwitcher />
             </DropdownMenuContent>
           </DropdownMenu>
 
           <DropdownMenu>
-            <DropdownMenuTrigger as={Button} class="text-lg px-0 size-9" variant="ghost" aria-label="Language">
+            <DropdownMenuTrigger as={Button} class="text-lg px-0 size-9 hidden sm:inline-flex" variant="ghost" aria-label="Language">
               <div class="i-custom-language size-4"></div>
             </DropdownMenuTrigger>
             <DropdownMenuContent>
-              {locales.map(locale => (
-                <DropdownMenuItem onClick={() => setLocale(locale.key)} class={cn('flex items-center gap-2 cursor-pointer', { 'font-semibold': getLocale() === locale.key })}>
-                  {locale.name}
-                </DropdownMenuItem>
-              ))}
-
-              <DropdownMenuSeparator />
-
-              <DropdownMenuItem as="a" class="flex items-center gap-2 cursor-pointer" target="_blank" rel="noopener noreferrer" href="https://github.com/CorentinTh/enclosed/tree/main/packages/app-client/src/locales">
-                {t('navbar.settings.contribute-to-i18n')}
-              </DropdownMenuItem>
-
+              <LanguageSwitcher />
             </DropdownMenuContent>
           </DropdownMenu>
 
           <DropdownMenu>
-            <DropdownMenuTrigger as={Button} class="text-lg px-0 size-9" variant="ghost" aria-label="Change theme">
-              <div class="i-tabler-dots-vertical"></div>
+
+            <DropdownMenuTrigger as={Button} class="text-lg px-0 size-9" variant="ghost" aria-label="Menu icon">
+              <div class="i-tabler-dots-vertical hidden sm:block"></div>
+              <div class="i-tabler-menu-2 block sm:hidden"></div>
             </DropdownMenuTrigger>
 
             <DropdownMenuContent class="w-46">
+
+              {/* Mobile only items */}
+              <DropdownMenuItem as="a" class="flex items-center gap-2 cursor-pointer sm:hidden" target="_blank" href="https://github.com/CorentinTh/enclosed" rel="noopener noreferrer">
+                <div class="i-tabler-brand-github text-lg"></div>
+                {t('navbar.github')}
+              </DropdownMenuItem>
+
+              <DropdownMenuSub>
+                <DropdownMenuSubTrigger as="a" class="flex items-center gap-2 sm:hidden" aria-label="Change theme">
+                  <div class="text-lg" classList={{ 'i-tabler-moon': themeStore.getColorMode() === 'dark', 'i-tabler-sun': themeStore.getColorMode() === 'light' }}></div>
+                  {t('navbar.theme.theme')}
+                </DropdownMenuSubTrigger>
+
+                <DropdownMenuSubContent>
+                  <ThemeSwitcher />
+                </DropdownMenuSubContent>
+
+              </DropdownMenuSub>
+
+              <DropdownMenuSub>
+                <DropdownMenuSubTrigger as="a" class="flex items-center text-medium gap-2 sm:hidden" aria-label="Change language">
+                  <div class="i-custom-language size-4"></div>
+                  {t('navbar.language')}
+                </DropdownMenuSubTrigger>
+                <DropdownMenuSubContent>
+                  <LanguageSwitcher />
+                </DropdownMenuSubContent>
+              </DropdownMenuSub>
+
+              {/* Default items */}
               <DropdownMenuItem as="a" class="flex items-center gap-2 cursor-pointer" target="_blank" href={buildDocUrl({ path: '/' })}>
                 <div class="i-tabler-file-text text-lg"></div>
                 {t('navbar.settings.documentation')}