mint/api-v12/resources/views/components/language-switcher.blade.php

@php
$currentLocale = app()->getLocale();
$languages = config('mint.languages');
$currentLanguage = $languages[$currentLocale] ?? 'en';
@endphp

<div class="language-switcher">
    <a href="#" class="language-link">
        <svg class="language-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
            <path d="M512 929.959184c-230.4 0-417.959184-187.559184-417.959184-417.959184s187.559184-417.959184 417.959184-417.959184 417.959184 187.559184 417.959184 417.959184-187.559184 417.959184-417.959184 417.959184z m0-794.122449c-207.412245 0-376.163265 168.75102-376.163265 376.163265s168.75102 376.163265 376.163265 376.163265 376.163265-168.75102 376.163265-376.163265-168.75102-376.163265-376.163265-376.163265z" p-id="4472"></path>
            <path d="M512 929.959184c-11.493878 0-20.897959-9.404082-20.897959-20.89796V114.938776c0-11.493878 9.404082-20.897959 20.897959-20.89796s20.897959 9.404082 20.897959 20.89796v794.122448c0 11.493878-9.404082 20.897959-20.897959 20.89796z" p-id="4473"></path>
            <path d="M909.061224 532.897959H114.938776c-11.493878 0-20.897959-9.404082-20.89796-20.897959s9.404082-20.897959 20.89796-20.897959h794.122448c11.493878 0 20.897959 9.404082 20.89796 20.897959s-9.404082 20.897959-20.89796 20.897959z" p-id="4474"></path>
            <path d="M227.787755 809.795918c-5.22449 0-10.971429-2.089796-15.15102-6.269387C136.359184 725.159184 94.040816 621.191837 94.040816 512s42.318367-213.159184 118.595919-291.526531c7.836735-8.359184 21.420408-8.359184 29.779592-0.522449 8.359184 7.836735 8.359184 21.420408 0.522449 29.779592C173.97551 320.261224 135.836735 413.257143 135.836735 512s38.138776 191.738776 106.579592 262.269388c7.836735 8.359184 7.836735 21.420408-0.522449 29.779592-3.657143 3.657143-8.881633 5.746939-14.106123 5.746938z" p-id="4475"></path>
            <path d="M504.163265 929.959184c-0.522449 0-0.522449 0 0 0-110.759184-2.089796-214.204082-47.020408-291.52653-126.432653-7.836735-8.359184-7.836735-20.897959 0-29.257143 39.183673-40.228571 84.636735-71.57551 135.836734-92.995919 5.22449-2.089796 10.971429-2.089796 16.195919 0s9.404082 6.269388 11.493877 11.493878c29.779592 76.8 78.889796 146.285714 141.583674 200.097959 6.791837 5.746939 8.881633 15.15102 5.746939 23.510204-3.134694 7.836735-10.971429 13.583673-19.330613 13.583674z m-246.595918-141.061225c53.289796 49.110204 118.073469 80.979592 188.604082 93.518368-42.318367-44.930612-76.277551-97.17551-100.832653-153.6-31.869388 15.673469-61.64898 35.526531-87.771429 60.081632zM356.310204 344.293878c-2.612245 0-5.746939-0.522449-8.359184-1.567347-51.2-21.942857-96.653061-53.289796-135.836734-92.995919-7.836735-8.359184-7.836735-20.897959 0-29.257143C289.959184 141.061224 392.881633 96.653061 503.640816 94.040816c8.881633-0.522449 16.718367 5.22449 19.853062 13.583674s0.522449 17.763265-5.746939 23.510204C454.530612 184.946939 405.420408 253.910204 375.640816 331.232653c-2.089796 5.22449-6.269388 9.404082-11.493877 11.493878-2.089796 1.044898-5.22449 1.567347-7.836735 1.567347zM257.567347 235.102041c26.644898 24.555102 55.902041 44.408163 87.771429 60.604081 24.555102-56.42449 59.036735-108.669388 100.832653-153.6-70.530612 12.016327-135.314286 43.885714-188.604082 92.995919zM796.212245 809.795918c-5.22449 0-10.44898-2.089796-14.628572-5.746938-8.359184-7.836735-8.359184-21.420408-0.522449-29.779592C850.02449 703.738776 888.163265 610.742857 888.163265 512s-38.138776-191.738776-106.579592-262.269388c-7.836735-8.359184-7.836735-21.420408 0.522449-29.779592 8.359184-7.836735 21.420408-7.836735 29.779592 0.522449C887.640816 298.840816 929.959184 402.808163 929.959184 512s-42.318367 213.159184-118.595919 291.526531c-4.179592 4.179592-9.404082 6.269388-15.15102 6.269387z" p-id="4476"></path>
            <path d="M514.612245 929.959184c-8.881633 0-16.718367-5.22449-19.330612-13.583674-3.134694-8.359184-0.522449-17.240816 5.746938-22.987755 63.738776-54.334694 112.84898-124.342857 142.628572-202.187755 2.089796-5.22449 6.269388-9.404082 11.493877-11.493878 5.22449-2.089796 10.971429-2.089796 16.195919 0 52.767347 21.942857 100.310204 53.812245 140.538775 95.085715 7.836735 8.359184 7.836735 20.897959 0 29.257143-78.889796 80.457143-184.42449 124.865306-297.273469 125.910204z m159.869388-203.755102c-25.077551 57.991837-59.559184 111.281633-102.922449 157.257142 72.620408-11.493878 140.016327-43.885714 194.873469-94.563265-27.689796-25.6-58.514286-46.497959-91.95102-62.693877zM662.987755 346.383673c-2.612245 0-5.746939-0.522449-8.359184-1.567346-5.22449-2.089796-9.404082-6.269388-11.493877-11.493878-29.779592-77.844898-78.889796-147.853061-142.628572-202.187755-6.791837-5.746939-8.881633-15.15102-5.746938-22.987755 3.134694-8.359184 10.971429-13.583673 19.330612-13.583674 112.84898 0.522449 217.861224 45.453061 296.75102 126.432653 7.836735 8.359184 7.836735 20.897959 0 29.257143-40.228571 41.273469-87.24898 73.142857-140.538775 95.085715-1.567347 0.522449-4.702041 1.044898-7.314286 1.044897z m-91.428571-205.844897c42.840816 45.97551 77.844898 99.265306 102.922449 157.257142 33.436735-16.195918 64.783673-37.093878 91.95102-62.693877-54.857143-50.677551-122.253061-83.069388-194.873469-94.563265z" p-id="4477"></path>
            <path d="M356.310204 721.502041c-2.612245 0-5.746939-0.522449-8.359184-1.567347-5.22449-2.089796-9.404082-6.269388-11.493877-11.493878-24.032653-62.693878-36.571429-128.522449-36.571429-195.918367s12.016327-133.22449 36.571429-195.918367c2.089796-5.22449 6.269388-9.404082 11.493877-11.493878s10.971429-2.089796 16.195919 0c47.020408 19.330612 96.653061 29.257143 147.853061 29.257143 49.632653 0 97.697959-9.404082 143.15102-28.212245 5.22449-2.089796 10.971429-2.089796 16.195919 0s9.404082 6.269388 11.493877 11.493878c23.510204 62.171429 35.526531 127.477551 35.526531 193.828571 0 66.873469-12.016327 132.179592-35.526531 193.828571-2.089796 5.22449-6.269388 9.404082-11.493877 11.493878-5.22449 2.089796-10.971429 2.089796-16.195919 0-45.453061-18.808163-93.518367-28.212245-143.15102-28.212245-51.2 0-100.832653 9.926531-147.330612 29.779592-2.612245 2.612245-5.746939 3.134694-8.359184 3.134694z m12.538776-370.416327c-17.763265 51.722449-26.644898 106.057143-26.644898 160.914286s8.881633 109.191837 26.644898 160.914286c45.97551-16.718367 94.040816-25.077551 143.15102-25.077551 47.542857 0 94.040816 7.836735 138.44898 23.510204 17.240816-51.2 26.122449-105.012245 26.122449-159.346939 0-54.857143-8.881633-108.146939-26.122449-159.346939-44.408163 15.673469-90.906122 23.510204-138.44898 23.510204-49.632653 0-97.697959-8.359184-143.15102-25.077551z" p-id="4478"></path>
        </svg>
        {{ $currentLanguage }}
    </a>
    <ul class="language-dropdown">
        @foreach ($languages as $locale => $language)
        <li>
            <a href="{{ route(Route::currentRouteName(), array_merge(request()->route()->parameters(), ['lang' => $locale])) }}"
                class="language-dropdown-item {{ $locale === $currentLocale ? 'active' : '' }}">
                {{ $language }}
            </a>
        </li>
        @endforeach
    </ul>
</div>

<style>
    .language-switcher {
        position: relative;
        display: inline-block;
    }

    .language-link {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        color: white;
        text-decoration: none;
        font-size: 0.95rem;
        font-weight: 500;
        transition: opacity 0.2s;
        white-space: nowrap;
        padding: 0.25rem 0;
    }

    .language-link:hover {
        opacity: 0.8;
        color: white;
    }

    .language-icon {
        width: 18px;
        height: 18px;
        fill: currentColor;
    }

    .language-dropdown {
        position: absolute;
        top: 100%;
        right: 0;
        /* 背景颜色和透明度 - 调整 rgba 的最后一个值(0.85)来改变透明度，范围 0-1 */
        background: rgba(0, 0, 0, 0.85);
        /* 毛玻璃效果 - 调整数值(10px)来改变模糊程度，数值越大越模糊 */
        backdrop-filter: blur(10px);
        /* Safari 兼容性 */
        -webkit-backdrop-filter: blur(10px);
        /* 边框（可选） - 添加微妙的边框增强层次感 */
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 0.375rem;
        /* 阴影效果 */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        list-style: none;
        margin: 0.5rem 0 0 0;
        padding: 0.5rem 0;
        min-width: 150px;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: all 0.2s ease;
        z-index: 1000;
    }

    .language-switcher:hover .language-dropdown {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .language-dropdown li {
        margin: 0;
        padding: 0;
    }

    .language-dropdown-item {
        display: block;
        padding: 0.5rem 1rem;
        /* 下拉菜单文字颜色 */
        color: #fff;
        text-decoration: none;
        font-size: 0.9rem;
        transition: background 0.2s;
        white-space: nowrap;
    }

    .language-dropdown-item:hover {
        /* 悬停背景 - 调整 rgba 的最后一个值(0.2)来改变悬停时的高亮程度 */
        background: rgba(255, 255, 255, 0.2);
        color: #fff;
    }

    .language-dropdown-item.active {
        /* 当前选中项的背景 - 调整 rgba 的最后一个值(0.3)来改变高亮程度 */
        background: rgba(255, 255, 255, 0.3);
        font-weight: 600;
        color: #fff;
    }

    /* 移动端样式 */
    @media (max-width: 768px) {
        .language-switcher {
            width: 100%;
        }

        .language-link {
            justify-content: flex-start;
            padding: 0;
        }

        .language-dropdown {
            position: static;
            opacity: 1;
            visibility: visible;
            transform: none;
            box-shadow: none;
            /* 移动端菜单背景 - 完全透明，融入侧边栏 */
            background: transparent;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            border: none;
            margin-top: 0.5rem;
            padding: 0;
        }

        .language-dropdown-item {
            color: white;
            padding: 0.75rem 1rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .language-dropdown-item:hover {
            background: rgba(255, 255, 255, 0.1);
            color: white;
        }

        .language-dropdown-item.active {
            background: rgba(255, 255, 255, 0.15);
            color: white;
        }
    }
</style>