yadunut/clan-core
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

add: fix responsive layout transition

Browse Source
This commit is contained in:
Johannes Kirschbauer
2023-08-12 13:44:35 +02:00
parent d26a011fea
commit 6ab0298b1b
3 changed files with 19 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
pkgs/ui/pconf.cjs
View File

@@ -1,4 +1,5 @@
// prettier.config.js
module.exports = {
plugins: ["prettier-plugin-tailwindcss"],
tailwindFunctions: ["clsx", "tw"],
};

15
pkgs/ui/src/app/layout.tsx
View File

@@ -16,8 +16,8 @@ import { StyledEngineProvider } from "@mui/material/styles";
import { darkTheme, lightTheme } from "./theme/themes";
import { Sidebar } from "@/components/sidebar";
import MenuIcon from "@mui/icons-material/Menu";
import { ChevronLeft } from "@mui/icons-material";
import Image from "next/image";
import { tw } from "@/utils/tailwind";
const roboto = localFont({
src: [
@@ -29,6 +29,9 @@ const roboto = localFont({
],
});
// add negative margin for smooth transition to fill the space of the sidebar
const translate = tw`lg:-ml-64 -ml-14`;
export default function RootLayout({
children,
}: {
@@ -65,8 +68,12 @@ export default function RootLayout({
show={showSidebar}
onClose={() => setShowSidebar(false)}
/>
<div className="flex flex-col w-full h-full">
<div className="static min-h-10 top-0 mb-2 py-2">
<div
className={tw`${
!showSidebar && translate
} flex h-full w-full flex-col transition-[margin] ease-in-out duration-150`}
>
<div className="min-h-10 static top-0 mb-2 py-2">
<div className="grid grid-cols-3">
<div className="col-span-1">
<IconButton
@@ -76,7 +83,7 @@ export default function RootLayout({
{!showSidebar && <MenuIcon />}
</IconButton>
</div>
<div className="col-span-1 block lg:hidden w-full text-center font-semibold text-white ">
<div className="col-span-1 block w-full text-center font-semibold text-white lg:hidden ">
<Image
src="/logo.svg"
alt="Clan Logo"

14
pkgs/ui/src/components/sidebar/index.tsx
View File

@@ -63,8 +63,8 @@ const menuEntries: MenuEntry[] = [
},
];
const hideSidebar = tw`-translate-x-12 absolute lg:-translate-x-64`;
const showSidebar = tw`lg:translate-x-0 static`;
const hideSidebar = tw`-translate-x-14 lg:-translate-x-64`;
const showSidebar = tw`lg:translate-x-0`;
interface SidebarProps {
show: boolean;
@@ -76,7 +76,7 @@ export function Sidebar(props: SidebarProps) {
<aside
className={tw`${
show ? showSidebar : hideSidebar
} z-9999 dark:bg-boxdark left-0 top-0 flex h-screen w-12 flex-col overflow-x-hidden overflow-y-hidden bg-zinc-950 lg:w-64 transition ease-in-out duration-150`}
} z-9999 dark:bg-boxdark static left-0 top-0 flex h-screen w-14 flex-col overflow-x-hidden overflow-y-hidden bg-zinc-950 transition duration-150 ease-in-out lg:w-64`}
>
<div className="py-5.5 lg:py-6.5 flex items-center justify-between gap-2 overflow-hidden px-0 lg:px-6">
<div className="mt-8 hidden w-full text-center font-semibold text-white lg:block">
@@ -91,15 +91,15 @@ export function Sidebar(props: SidebarProps) {
</div>
<Divider
flexItem
className="mx-8 mb-4 mt-9 bg-zinc-600 hidden lg:block"
className="mx-8 mb-4 mt-9 hidden bg-zinc-600 lg:block"
/>
<div className="w-full flex justify-center">
<div className="flex w-full justify-center">
<IconButton size="large" className="text-white" onClick={onClose}>
<ChevronLeftIcon fontSize="inherit" />
</IconButton>
</div>
<div className="flex flex-col overflow-hidden overflow-y-auto">
<List className="mb-14 px-0 pb-4 text-white lg:px-4 lg:mt-1">
<List className="mb-14 px-0 pb-4 text-white lg:mt-1 lg:px-4">
{menuEntries.map((menuEntry, idx) => {
return (
<ListItem
@@ -131,7 +131,7 @@ export function Sidebar(props: SidebarProps) {
})}
</List>
<Divider flexItem className="mx-8 my-10 bg-zinc-600 hidden lg:block" />
<Divider flexItem className="mx-8 my-10 hidden bg-zinc-600 lg:block" />
<div className="max-w-60 shadow-default mx-auto mb-8 hidden w-full rounded-sm px-4 py-6 text-center align-bottom lg:block">
<h3 className="mb-1 w-full font-semibold text-white">
Clan.lol Admin