Menu item route param, default theme based on system preferences (#364)

* feat(ui): add route param, set default theme based on system preferences * feat(ui): make sidebar without srcoll on sidebar content
robsontenorio · Apr 18, 2024 · bea7941 · bea7941
1 parent 50e45d3
commit bea7941
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 4 deletions.
diff --git a/src/View/Components/Main.php b/src/View/Components/Main.php
@@ -62,7 +62,7 @@ public function render(): View|Closure|string
                                             "flex flex-col !transition-all !duration-100 ease-out overflow-x-hidden overflow-y-auto h-screen",
                                             "w-[70px] [&>*_summary::after]:hidden [&_.mary-hideable]:hidden [&_.display-when-collapsed]:block [&_.hidden-when-collapsed]:hidden" => session('mary-sidebar-collapsed') == 'true',
                                             "w-[270px] [&>*_summary::after]:block [&_.mary-hideable]:block [&_.hidden-when-collapsed]:block [&_.display-when-collapsed]:hidden" => session('mary-sidebar-collapsed') != 'true',
-                                            "pb-[73px]" => $withNav
+                                            "lg:h-[calc(100vh-73px)]" => $withNav
                                         ])
                                      }}
                                 >

diff --git a/src/View/Components/MenuItem.php b/src/View/Components/MenuItem.php
@@ -16,6 +16,7 @@ public function __construct(
         public ?string $title = null,
         public ?string $icon = null,
         public ?string $link = null,
+        public ?string $route = null,
         public ?bool $external = false,
         public ?bool $noWireNavigate = false,
         public ?string $badge = null,
@@ -32,6 +33,10 @@ public function routeMatches(): bool
             return false;
         }
 
+        if ($this->route) {
+            return request()->routeIs($this->route);
+        }
+
         $link = url($this->link ?? '');
         $route = url(request()->url());
 

diff --git a/src/View/Components/ThemeToggle.php b/src/View/Components/ThemeToggle.php
@@ -26,20 +26,24 @@ public function render(): View|Closure|string
                 <div>
                     <label
                         x-data="{
-                            theme: $persist('light').as('mary-theme'),
+                            theme: $persist(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light').as('mary-theme'),
                             init() {
                                 if (this.theme == 'dark') {
                                     this.$refs.sun.classList.add('swap-off');
                                     this.$refs.sun.classList.remove('swap-on');
                                     this.$refs.moon.classList.add('swap-on');
                                     this.$refs.moon.classList.remove('swap-off');
                                 }
+                                this.setToggle()
                             },
-                            toggle() {
-                                this.theme = this.theme == 'light' ? 'dark' : 'light'
+                            setToggle() {
                                 document.documentElement.setAttribute('data-theme', this.theme)
                                 document.documentElement.setAttribute('class', this.theme)
                                 this.$dispatch('theme-changed', this.theme)
+                            },
+                            toggle() {
+                                this.theme = this.theme == 'light' ? 'dark' : 'light'
+                                this.setToggle()
                             }
                         }"
                         @mary-toggle-theme.window="toggle()"