fix: stagger meteor delays for full-width appearance, move SidebarTrigger to AppHeader after logo
Docker Build / Build and Push Docker Image (push) Successful in 3m34s
Docker Build / Build and Push Docker Image (push) Successful in 3m34s
This commit is contained in:
@@ -23,6 +23,7 @@ import { LanguageSwitcher } from '@/components/language-switcher'
|
||||
import { NotificationPopover } from '@/components/notification-popover'
|
||||
import { ProfileDropdown } from '@/components/profile-dropdown'
|
||||
import { Search } from '@/components/search'
|
||||
import { SidebarTrigger } from '@/components/ui/sidebar'
|
||||
import { defaultTopNavLinks } from '../config/top-nav.config'
|
||||
import { type TopNavLink } from '../types'
|
||||
import { Header } from './header'
|
||||
@@ -113,6 +114,7 @@ export function AppHeader({
|
||||
<>
|
||||
<Header>
|
||||
<SystemBrand variant='inline' />
|
||||
<SidebarTrigger variant='ghost' className='size-8' />
|
||||
|
||||
{leftContent ? (
|
||||
<div className='ms-2 flex items-center'>{leftContent}</div>
|
||||
|
||||
@@ -17,7 +17,6 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
For commercial licensing, please contact admin@modelstoken.com
|
||||
*/
|
||||
import { cn } from '@/lib/utils'
|
||||
import { SidebarTrigger } from '@/components/ui/sidebar'
|
||||
|
||||
type HeaderProps = React.HTMLAttributes<HTMLElement>
|
||||
|
||||
@@ -32,7 +31,6 @@ export function Header({ className, children, ...props }: HeaderProps) {
|
||||
>
|
||||
<div className='flex h-full items-center gap-1.5 px-2 sm:gap-2 sm:px-3'>
|
||||
{children}
|
||||
<SidebarTrigger variant='ghost' className='size-8' />
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
|
||||
+7
-7
@@ -509,14 +509,14 @@ export function Docs() {
|
||||
.dark .meteor::after {
|
||||
background: linear-gradient(to bottom, oklch(0.78 0.15 210 / 0.7) 0%, oklch(0.78 0.15 210 / 0.35) 15%, oklch(0.78 0.15 210 / 0.1) 50%, transparent 100%);
|
||||
}
|
||||
.meteor-1 { left: 5%; top: -2%; animation-duration: 2.0s; animation-delay: 1s; }
|
||||
.meteor-1 { left: 5%; top: -2%; animation-duration: 2.0s; animation-delay: 0s; }
|
||||
.meteor-2 { left: 20%; top: -2%; animation-duration: 1.7s; animation-delay: 5s; }
|
||||
.meteor-3 { left: 38%; top: -2%; animation-duration: 2.2s; animation-delay: 9s; }
|
||||
.meteor-4 { left: 52%; top: -2%; animation-duration: 1.8s; animation-delay: 13s; }
|
||||
.meteor-5 { left: 65%; top: -2%; animation-duration: 2.1s; animation-delay: 17s; }
|
||||
.meteor-6 { left: 78%; top: -2%; animation-duration: 1.6s; animation-delay: 21s; }
|
||||
.meteor-7 { left: 88%; top: -2%; animation-duration: 1.9s; animation-delay: 25s; }
|
||||
.meteor-8 { left: 95%; top: -2%; animation-duration: 2.3s; animation-delay: 29s; }
|
||||
.meteor-3 { left: 38%; top: -2%; animation-duration: 2.2s; animation-delay: 2s; }
|
||||
.meteor-4 { left: 52%; top: -2%; animation-duration: 1.8s; animation-delay: 8s; }
|
||||
.meteor-5 { left: 65%; top: -2%; animation-duration: 2.1s; animation-delay: 3s; }
|
||||
.meteor-6 { left: 78%; top: -2%; animation-duration: 1.6s; animation-delay: 10s; }
|
||||
.meteor-7 { left: 88%; top: -2%; animation-duration: 1.9s; animation-delay: 1s; }
|
||||
.meteor-8 { left: 95%; top: -2%; animation-duration: 2.3s; animation-delay: 6s; }
|
||||
@keyframes meteor-fall {
|
||||
0% { opacity: 0; transform: translateY(-150px) translateX(0) rotate(220deg); }
|
||||
5% { opacity: 1; }
|
||||
|
||||
@@ -474,15 +474,15 @@ export function Hero(props: HeroProps) {
|
||||
);
|
||||
}
|
||||
.meteor-1 { left: 5%; top: -2%; animation-duration: 2.0s; animation-delay: 0s; }
|
||||
.meteor-2 { left: 15%; top: -2%; animation-duration: 1.7s; animation-delay: 3s; }
|
||||
.meteor-3 { left: 25%; top: -2%; animation-duration: 2.2s; animation-delay: 6s; }
|
||||
.meteor-4 { left: 35%; top: -2%; animation-duration: 1.8s; animation-delay: 9s; }
|
||||
.meteor-5 { left: 48%; top: -2%; animation-duration: 2.1s; animation-delay: 12s; }
|
||||
.meteor-6 { left: 58%; top: -2%; animation-duration: 1.6s; animation-delay: 15s; }
|
||||
.meteor-7 { left: 68%; top: -2%; animation-duration: 1.9s; animation-delay: 18s; }
|
||||
.meteor-8 { left: 78%; top: -2%; animation-duration: 2.3s; animation-delay: 21s; }
|
||||
.meteor-9 { left: 88%; top: -2%; animation-duration: 1.7s; animation-delay: 24s; }
|
||||
.meteor-10 { left: 95%; top: -2%; animation-duration: 2.0s; animation-delay: 27s; }
|
||||
.meteor-2 { left: 15%; top: -2%; animation-duration: 1.7s; animation-delay: 7s; }
|
||||
.meteor-3 { left: 25%; top: -2%; animation-duration: 2.2s; animation-delay: 3s; }
|
||||
.meteor-4 { left: 35%; top: -2%; animation-duration: 1.8s; animation-delay: 11s; }
|
||||
.meteor-5 { left: 48%; top: -2%; animation-duration: 2.1s; animation-delay: 1s; }
|
||||
.meteor-6 { left: 58%; top: -2%; animation-duration: 1.6s; animation-delay: 9s; }
|
||||
.meteor-7 { left: 68%; top: -2%; animation-duration: 1.9s; animation-delay: 5s; }
|
||||
.meteor-8 { left: 78%; top: -2%; animation-duration: 2.3s; animation-delay: 13s; }
|
||||
.meteor-9 { left: 88%; top: -2%; animation-duration: 1.7s; animation-delay: 2s; }
|
||||
.meteor-10 { left: 95%; top: -2%; animation-duration: 2.0s; animation-delay: 8s; }
|
||||
@keyframes meteor-fall {
|
||||
0% {
|
||||
opacity: 0;
|
||||
|
||||
+7
-7
@@ -394,13 +394,13 @@ export function Pricing() {
|
||||
background: linear-gradient(to bottom, oklch(0.78 0.15 210 / 0.7) 0%, oklch(0.78 0.15 210 / 0.35) 15%, oklch(0.78 0.15 210 / 0.1) 50%, transparent 100%);
|
||||
}
|
||||
.meteor-1 { left: 5%; top: -2%; animation-duration: 2.0s; animation-delay: 0s; }
|
||||
.meteor-2 { left: 20%; top: -2%; animation-duration: 1.7s; animation-delay: 4s; }
|
||||
.meteor-3 { left: 38%; top: -2%; animation-duration: 2.2s; animation-delay: 8s; }
|
||||
.meteor-4 { left: 52%; top: -2%; animation-duration: 1.8s; animation-delay: 12s; }
|
||||
.meteor-5 { left: 65%; top: -2%; animation-duration: 2.1s; animation-delay: 16s; }
|
||||
.meteor-6 { left: 78%; top: -2%; animation-duration: 1.6s; animation-delay: 20s; }
|
||||
.meteor-7 { left: 88%; top: -2%; animation-duration: 1.9s; animation-delay: 24s; }
|
||||
.meteor-8 { left: 95%; top: -2%; animation-duration: 2.3s; animation-delay: 28s; }
|
||||
.meteor-2 { left: 20%; top: -2%; animation-duration: 1.7s; animation-delay: 6s; }
|
||||
.meteor-3 { left: 38%; top: -2%; animation-duration: 2.2s; animation-delay: 2s; }
|
||||
.meteor-4 { left: 52%; top: -2%; animation-duration: 1.8s; animation-delay: 9s; }
|
||||
.meteor-5 { left: 65%; top: -2%; animation-duration: 2.1s; animation-delay: 4s; }
|
||||
.meteor-6 { left: 78%; top: -2%; animation-duration: 1.6s; animation-delay: 11s; }
|
||||
.meteor-7 { left: 88%; top: -2%; animation-duration: 1.9s; animation-delay: 1s; }
|
||||
.meteor-8 { left: 95%; top: -2%; animation-duration: 2.3s; animation-delay: 7s; }
|
||||
@keyframes meteor-fall {
|
||||
0% { opacity: 0; transform: translateY(-150px) translateX(0) rotate(220deg); }
|
||||
5% { opacity: 1; }
|
||||
|
||||
Reference in New Issue
Block a user