sozsoft/sozsoft-platform
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

Public sayfa Demo butonu düzenlemesi

Browse source
This commit is contained in:
Sedat ÖZTÜRK 2026-06-25 11:39:42 +03:00
parent 876844b078
commit 84db5c672e
2 changed files with 37 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
ui/src/components/layouts/PublicLayout.tsx
View file

@ -10,7 +10,6 @@ import {
LuBriefcase,
LuPackage,
LuBookOpen,
LuMonitorPlay,
LuPhone,
LuMapPin,
LuMail,
@ -93,12 +92,6 @@ const PublicLayout = () => {
path: ROUTES_ENUM.public.blog,
icon: LuBookOpen,
},
{
resourceKey: 'App.Demos',
name: translate('::App.Demos'),
action: () => setIsDemoOpen(true),
icon: LuMonitorPlay,
},
{
resourceKey: 'Public.nav.contact',
name: translate('::App.Contact'),
@ -114,21 +107,36 @@ const PublicLayout = () => {
const isLoginLink = (resourceKey?: string) => resourceKey === 'Public.nav.giris'
const demoButton = (className = '', onClick?: () => void) => (
<button
type="button"
onClick={() => {
setIsDemoOpen(true)
onClick?.()
}}
className={`group inline-flex items-center justify-center gap-1.5 text-sm font-semibold text-gray-200 hover:text-white transition-colors ${className}`}
>
<span className="relative inline-flex h-7 w-7 items-center justify-center overflow-visible rounded-full border-2 border-stone-700 bg-gradient-to-b from-red-400 via-red-600 to-red-800 shadow-[inset_0_-3px_6px_rgba(0,0,0,0.35),0_1px_3px_rgba(0,0,0,0.35)] ring-1 ring-black/60 transition-all duration-200 group-hover:scale-105 group-hover:from-red-300 group-hover:via-red-500 group-hover:to-red-700 group-hover:shadow-[inset_0_-3px_6px_rgba(0,0,0,0.3),0_2px_8px_rgba(239,68,68,0.35)]">
<span className="absolute inset-x-1 top-1 h-2 rounded-full bg-white/35 blur-[1px] transition-colors group-hover:bg-white/50" />
<span className="absolute left-1/2 top-1/2 z-10 w-12 -translate-x-1/2 -translate-y-1/2 text-center uppercase leading-none tracking-tight text-white drop-shadow">
{translate('::App.Demos')}
</span>
</span>
</button>
)
const themeToggle = (
<div className="inline-flex items-center rounded-lg p-0.5 shadow-inner shadow-black/10">
<div className="inline-flex items-center rounded-lg p-0.5">
<button
type="button"
onClick={() => setThemeMode(THEME_ENUM.MODE_LIGHT)}
aria-pressed={!isDarkMode}
title="Light mode"
className={`inline-flex h-8 w-8 xl:w-auto items-center justify-center gap-1.5 px-0 xl:px-2.5 text-xs font-semibold transition-colors rounded-l-md ${
!isDarkMode
? 'bg-white text-gray-950'
: 'text-gray-300 hover:bg-white/10 hover:text-white'
!isDarkMode ? 'bg-white text-gray-950' : 'text-gray-300 hover:text-white'
}`}
>
<LuSun size={15} strokeWidth={1.8} />
<span className="hidden xl:inline">{translate('::App.Light')}</span>
</button>
<button
@ -137,11 +145,10 @@ const PublicLayout = () => {
aria-pressed={isDarkMode}
title="Dark mode"
className={`inline-flex h-8 w-8 xl:w-auto items-center justify-center gap-1.5 px-0 xl:px-2.5 text-xs font-semibold transition-colors rounded-r-md ${
isDarkMode ? 'bg-white text-gray-950' : 'text-gray-300 hover:bg-white/10 hover:text-white'
isDarkMode ? 'bg-white text-gray-950' : 'text-gray-300 hover:text-white'
}`}
>
<LuMoon size={15} strokeWidth={1.8} />
<span className="hidden xl:inline">{translate('::App.Dark')}</span>
</button>
</div>
)
@ -221,7 +228,11 @@ const PublicLayout = () => {
{/* Right side: Language + Login */}
<div className="relative z-10 hidden lg:flex lg:col-start-2 xl:col-start-3 lg:justify-self-end items-center gap-2 xl:gap-3">
<LanguageSelector />
<div className="inline-flex items-center gap-1">
{demoButton('h-9 px-3 rounded-lg')}
<div className="w-px h-5 bg-white/20"></div>
<LanguageSelector className="!bg-transparent hover:!bg-transparent dark:hover:!bg-transparent" />
</div>
{themeToggle}
<div className="w-px h-5 bg-white/20" />
{navLinks
@ -252,8 +263,10 @@ const PublicLayout = () => {
{/* Mobile Navigation */}
<div
className={`lg:hidden overflow-hidden transition-all duration-300 ease-in-out ${
isOpen ? 'max-h-screen opacity-100' : 'max-h-0 opacity-0'
className={`lg:hidden transition-all duration-300 ease-in-out ${
isOpen
? 'max-h-screen overflow-visible opacity-100'
: 'max-h-0 overflow-hidden opacity-0'
}`}
>
<div className="border-t border-white/10 bg-gray-950/98 backdrop-blur-md">
@ -314,12 +327,13 @@ const PublicLayout = () => {
</div>
<div className="mt-1 border-t border-white/10 pt-2 pb-1">
<div className="flex items-center justify-between gap-3">
<div className="flex h-10 min-w-10 items-center justify-center rounded-lg bg-white/5 ring-1 ring-white/10">
<LanguageSelector />
</div>
<div className="flex h-10 items-center rounded-lg bg-white/5 px-1 ring-1 ring-white/10">
{themeToggle}
<div className="flex items-center gap-1">
{demoButton('h-10 px-3 rounded-lg', toggleMenu)}
<div className="flex h-10 min-w-10 items-center justify-center rounded-lg">
<LanguageSelector className="!bg-transparent hover:!bg-transparent dark:hover:!bg-transparent" />
</div>
</div>
<div className="flex h-10 items-center rounded-lg px-1">{themeToggle}</div>
{navLinks
.filter((l) => isLoginLink(l.resourceKey))
.map((link) =>

2
ui/src/components/template/LanguageSelector.tsx
View file

@ -61,7 +61,7 @@ const _LanguageSelector = ({ className }: CommonProps) => {
}
return (
<Dropdown renderTitle={selectedLanguage} placement="bottom-end">
<Dropdown renderTitle={selectedLanguage} placement="bottom-start" menuClass="z-[60]">
{languageList?.map((lang) => (
<Dropdown.Item
key={lang.cultureName}