diff --git a/dashboard/src/common/components/header/menu.tsx b/dashboard/src/common/components/header/menu.tsx
@@ -16,6 +16,7 @@ import { ThemeToggle } from "@marzneshin/features/theme-switch";
import { useAuth, Logout } from "@marzneshin/modules/auth";
import { useScreenBreakpoint } from "@marzneshin/common/hooks/use-screen-breakpoint";
import { useTranslation } from "react-i18next";
+import { VersionIndicator } from "@marzneshin/features/version-indicator";
export const HeaderMenu: FC = () => {
@@ -61,10 +62,11 @@ export const HeaderMenu: FC = () => {
<DropdownMenuSeparator />
<DropdownMenuGroup>
<LanguageSwitchMenu />
+ <ThemeToggle />
</DropdownMenuGroup>
<DropdownMenuSeparator />
- <DropdownMenuGroup>
- <ThemeToggle />
+ <DropdownMenuGroup className="py-1 shrink-0">
+ <VersionIndicator />
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu >
diff --git a/dashboard/src/features/language-switch/index.tsx b/dashboard/src/features/language-switch/index.tsx
@@ -32,8 +32,8 @@ export const LanguageSwitchMenu: FC = () => {
return (
<DropdownMenuSub>
<DropdownMenuSubTrigger arrowDir="left">
- <div className="hstack items-center justify-end">
- <span className="mx-1">{t("language")}</span>
+ <div className="hstack items-center gap-2 w-full justify-end">
+ <span>{t("language")}</span>
<Languages className="size-[1rem]" />
</div>
</DropdownMenuSubTrigger>
diff --git a/dashboard/src/features/theme-switch/theme-toggle/index.tsx b/dashboard/src/features/theme-switch/theme-toggle/index.tsx
@@ -28,17 +28,19 @@ export function ThemeToggle() {
return (
<DropdownMenuSub>
<DropdownMenuSubTrigger arrowDir="left" className="w-full flex">
- <div className="flex items-center ml-auto">
- <Sun className="w-4 h-4 m-0 transition-all transform scale-100 rotate-0 dark:scale-0 dark:-rotate-90" />
- <Moon className="w-4 h-4 m-0 transition-all transform scale-0 rotate-90 dark:scale-100 dark:rotate-0" />
+ <div className="hstack gap-2 items-center justify-end w-full">
+ <span>{t('theme')}</span>
+ <div className="flex items-center">
+ <Sun className="w-4 h-4 m-0 transition-all transform scale-100 rotate-0 dark:scale-0 dark:-rotate-90" />
+ <Moon className="w-4 h-4 m-0 transition-all transform scale-0 rotate-90 dark:scale-100 dark:rotate-0" />
+ </div>
</div>
- <span>{t('theme')}</span>
</DropdownMenuSubTrigger>
<DropdownMenuPortal>
<DropdownMenuSubContent className="space-y-1">
+ <ThemeItem schema="system" />
<ThemeItem schema="light" />
<ThemeItem schema="dark" />
- <ThemeItem schema="system" />
</DropdownMenuSubContent>
</DropdownMenuPortal>
</DropdownMenuSub>
diff --git a/dashboard/src/features/version-indicator/index.tsx b/dashboard/src/features/version-indicator/index.tsx
@@ -3,8 +3,8 @@ import { Badge } from "@marzneshin/common/components";
export const VersionIndicator = () => {
return (
<div className="size-full flex justify-center items-center dark:text-neutral-300 text-neutral-800">
- <Badge>
- Marzneshin {import.meta.env.VITE_LATEST_APP_VERSION}
+ <Badge variant="outline" className="border-none">
+ {import.meta.env.VITE_LATEST_APP_VERSION}
</Badge>
</div>
)
diff --git a/dashboard/src/modules/auth/logout/index.tsx b/dashboard/src/modules/auth/logout/index.tsx
@@ -12,10 +12,10 @@ export const Logout: FC<LogoutProps> = () => {
}, [navigate]);
return (
<Button
- size="sm"
+ size="icon"
variant="ghost"
onClick={handleLogout}
- className="hstack gap-1 items-center justify-between w-full h-fit p-0"
+ className="hstack gap-2 items-center justify-end w-full h-4 p-0"
>
Logout
<LogOut className="size-4" />
diff --git a/dashboard/src/routes/_dashboard.tsx b/dashboard/src/routes/_dashboard.tsx
@@ -23,7 +23,6 @@ import {
import { useGithubRepoStatsQuery, GithubRepo } from "@marzneshin/features/github-repo";
import { CommandBox } from "@marzneshin/features/search-command";
import { DashboardBottomMenu } from "@marzneshin/features/bottom-menu";
-import { VersionIndicator } from "@marzneshin/features/version-indicator";
export const DashboardLayout = () => {
const isDesktop = useScreenBreakpoint("md");
@@ -87,9 +86,6 @@ export const DashboardLayout = () => {
<Outlet />
</Suspense>
</main>
- <footer className="h-10 py-2 shrink-0">
- <VersionIndicator />
- </footer>
</ResizablePanel>
</ResizablePanelGroup>
) : (
@@ -98,7 +94,7 @@ export const DashboardLayout = () => {
<Suspense fallback={<Loading />}>
<Outlet />
</Suspense>
- <footer className="h-30 border-t-3 py-2 px-5">
+ <footer className="h-30 border-t-3 shrink-0 py-2 px-5">
<DashboardBottomMenu variant={isSudo() ? "sudo-admin" : "admin"} />
</footer>
</main>