layout/shell/header.py

from dash_iconify import DashIconify
# header.py (或你專案中產生 header 的檔案)
from dash import html
import dash_mantine_components as dmc
from student_login import create_student_badge

HEADER_H = 50  # 想大一點改 72/80 即可



def generate_header():
    # 漢堡：手機版才顯示 / 桌機版才顯示
    burger_mobile = dmc.Burger(
        id="mobile-burger", size="sm", hiddenFrom="sm", opened=False,
        style={"marginTop": "6px"}  # 往下些
    )
    burger_desktop = dmc.Burger(
        id="desktop-burger", size="sm", visibleFrom="sm", opened=True,
        style={"marginTop": "6px"}  # 往下些
    )

    left = dmc.Group(
        align="center",
        gap="md",
        wrap="nowrap",
        children=[
            burger_mobile,
            burger_desktop,
            dmc.Image(src="/assets/logo.svg", h=HEADER_H - 20, fit="contain"),
            dmc.Text(
                "微積分教學網站",
                fw=800, size="sm",
                style={"whiteSpace": "nowrap", "textOverflow": "ellipsis"},
            ),
        ],
        style={"height": "100%"},
    )

    right = dmc.Group(
        align="center",
        children=[
            create_student_badge(),
            dmc.Anchor(
                href="/teacher",
                children=dmc.Tooltip(
                    label="老師後台",
                    children=dmc.ActionIcon(
                        DashIconify(icon="tabler:layout-dashboard", height=18),
                        size="md",
                        variant="subtle",
                        color="gray",
                    ),
                ),
                style={"lineHeight": 0},
            ),
            dmc.Switch(
                id="color-scheme-switch", size="lg", color="gray",
                onLabel="🌙", offLabel="☀️", persistence=True
            ),
        ],
        style={"height": "100%"},
    )

    return dmc.AppShellHeader(
        h=HEADER_H, px="md", withBorder=True,
        children=dmc.Group(justify="space-between", align="center", h="100%", children=[left, right]),
    )