Mirroring/my-links
1
0
Fork 0
mirror of https://github.com/Sonny93/my-links.git synced 2025-12-09 23:15:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add layout transition

Browse Source
This commit is contained in:
Sonny
2024-05-17 19:26:10 +02:00
committed by Sonny
parent a910b898c7
commit 8077f8f9c9
9 changed files with 29 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
inertia/components/layouts/_transition_layout.tsx Normal file
View File

@@ -0,0 +1,8 @@
import styled from '@emotion/styled';
import { fadeInScale } from '~/styles/keyframes';
const TransitionLayout = styled.div(({ theme }) => ({
animation: `${theme.transition.delay} ${fadeInScale} both`,
}));
export default TransitionLayout;

3
inertia/components/layouts/content_layout.tsx
View File

@@ -1,10 +1,11 @@
import styled from '@emotion/styled';
import { ReactNode } from 'react';
import Footer from '~/components/footer/footer';
import TransitionLayout from '~/components/layouts/_transition_layout';
import Navbar from '../navbar/navbar';
import BaseLayout from './_base_layout';
const ContentLayoutStyle = styled.div(({ theme }) => ({
const ContentLayoutStyle = styled(TransitionLayout)(({ theme }) => ({
height: '100%',
width: theme.media.small_desktop,
maxWidth: '100%',

3
inertia/components/layouts/dashboard_layout.tsx
View File

@@ -1,8 +1,9 @@
import styled from '@emotion/styled';
import { ReactNode } from 'react';
import TransitionLayout from '~/components/layouts/_transition_layout';
import BaseLayout from './_base_layout';
const DashboardLayoutStyle = styled.div(({ theme }) => ({
const DashboardLayoutStyle = styled(TransitionLayout)(({ theme }) => ({
height: '100%',
width: theme.media.medium_desktop,
maxWidth: '100%',