Commit d7e12ae

@@ -1,8 +1,10 @@
 ---
 import type { HTMLAttributes } from 'astro/types';
 
-type Props = HTMLAttributes<'button'> | HTMLAttributes<'a'>;
-let { class: className, ...rest } = Astro.props;
+type Props = (HTMLAttributes<'button'> | HTMLAttributes<'a'>) & {
+  useDefaultClass?: boolean;
+};
+let { class: className, useDefaultClass, ...rest } = Astro.props;
 
 function isAnchor(props: Props): props is HTMLAttributes<'a'> {
   return 'href' in props;
@@ -11,6 +13,6 @@ function isAnchor(props: Props): props is HTMLAttributes<'a'> {
 const Tag = isAnchor(rest) ? 'a' : 'button';
 ---
 
-<Tag class:list={['btn', className]} {...rest as object}>
+<Tag class:list={[(useDefaultClass ?? true) && 'btn', className]} {...rest as object}>
   <slot />
 </Tag>

@@ -7,13 +7,15 @@ import Button from './Button.astro';
 
 interface Props extends Omit<HTMLAttributes<'button'>, 'onclick'> {
   showText?: boolean;
+  useDefaultBtnClass?: boolean;
 }
 
-const { class: className, showText, ...rest } = Astro.props;
+const { class: className, showText, useDefaultBtnClass, ...rest } = Astro.props;
 ---
 
 <Button
   class:list={['darkmode-btn swap swap-rotate', className]}
+  useDefaultClass={useDefaultBtnClass}
   {...rest}
   data-text-light={i18n(I18nKey.lightMode)}
   data-text-dark={i18n(I18nKey.darkMode)}

@@ -1,5 +1,6 @@
 ---
 import { navbarConfig, siteConfig } from '@/config';
+import I18nKey from '@i18n/I18nKey';
 import { i18n } from '@i18n/translation';
 import { Icon } from 'astro-icon/components';
 import Button from './widgets/Button.astro';
@@ -124,7 +125,11 @@ if (!title) title = 'Astral Halo';
           }
         </div>
         <div class="md:hidden">
-          <label for="sidebar-drawer" class="btn btn-circle btn-ghost btn-primary">
+          <label
+            for="sidebar-drawer"
+            class="btn btn-circle btn-ghost btn-primary"
+            title={i18n(I18nKey.menu)}
+          >
             <Icon name="material-symbols:menu-rounded" height="1.5rem" width="1.5rem" />
           </label>
         </div>
@@ -137,15 +142,20 @@ if (!title) title = 'Astral Halo';
   <div class="drawer-side z-50">
     <!-- Sidebar -->
     <label for="sidebar-drawer" class="drawer-overlay"></label>
-    <ul class="menu bg-base-200 min-h-full w-[min(calc(100%-3rem),20rem)] p-4">
-      <li><DarkModeButton class="btn-ghost text-xl" showText={true} /></li>
+    <ul
+      class="menu from-base-100 to-base-300 dark:from-base-300 dark:to-base-100 min-h-full w-[min(calc(100%-3rem),20rem)] bg-linear-150 p-4"
+    >
+      <li>
+        <DarkModeButton class="text-xl" showText={true} useDefaultBtnClass={false} />
+      </li>
+      <div class="divider text-lg font-bold">{i18n(I18nKey.menu)}</div>
       {
         navbarConfig.navbarCenterItems.map((item) => {
           if ('items' in item) {
             return (
               <li>
                 <details>
-                  <summary class="justify-center text-xl font-bold">{i18n(item.title)}</summary>
+                  <summary class="text-xl">{i18n(item.title)}</summary>
                   <ul>
                     {item.items.map((subItem) => (
                       <li>
@@ -161,7 +171,7 @@ if (!title) title = 'Astral Halo';
                               ? { onclick: subItem.onclick }
                               : { id: 'side-' + subItem.onclick.id }))}
                           title={i18n(subItem.text)}
-                          class="btn-ghost"
+                          useDefaultClass={false}
                         >
                           <span class="text-xl">{i18n(subItem.text)}</span>
                         </Button>
@@ -186,7 +196,7 @@ if (!title) title = 'Astral Halo';
                       ? { onclick: item.onclick }
                       : { id: 'side-' + item.onclick.id }))}
                   title={i18n(item.text)}
-                  class="btn-ghost"
+                  useDefaultClass={false}
                 >
                   <span class="text-xl">{i18n(item.text)}</span>
                 </Button>
@@ -206,7 +216,7 @@ if (!title) title = 'Astral Halo';
                 (typeof item.onclick === 'string'
                   ? { onclick: item.onclick }
                   : { id: 'side-' + item.onclick.id }))}
-              class="btn-ghost"
+              useDefaultClass={false}
             >
               <Icon name={item.icon} height="1.5rem" width="1.5rem" />
               <span class="text-xl">{i18n(item.text)}</span>

@@ -8,6 +8,7 @@ export const en: Translation = {
   [Key.search]: 'Search',
   [Key.links]: 'Links',
   [Key.time]: 'Time',
+  [Key.menu]: 'Menu',
 
   [Key.tags]: 'Tags',
   [Key.categories]: 'Categories',

@@ -8,6 +8,7 @@ export const zh_CN: Translation = {
   [Key.search]: '搜索',
   [Key.links]: '友链',
   [Key.time]: '时间',
+  [Key.menu]: '菜单',
 
   [Key.tags]: '标签',
   [Key.categories]: '分类',

@@ -8,6 +8,7 @@ export const zh_TW: Translation = {
   [Key.search]: '搜尋',
   [Key.links]: '連結',
   [Key.time]: '時間',
+  [Key.menu]: '選單',
 
   [Key.tags]: '標籤',
   [Key.categories]: '分類',

@@ -5,6 +5,7 @@ enum I18nKey {
   search = 'search',
   links = 'links',
   time = 'time',
+  menu = 'menu',
 
   tags = 'tags',
   categories = 'categories',