ristoo/privatedocs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: responsive

Browse Source
This commit is contained in:
Ruben 2025-03-28 21:12:10 +01:00
parent 015094e9c5
commit 921007ae13
6 changed files with 76 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/app/admin/layout.tsx
View File

@ -33,26 +33,3 @@ export default function Dashboard({ children }: { children: ReactNode }) {
</div > </div >
) )
} }
/*
<div className="sidebar r-m-0 d-flex flex-column pt-[16px] max-w-[90px] h-[100vh] relative ">
<div className="logo r-flex-center pt-[13px] px-[20px] ">
<icons.Logo aria-label="Logo" className="scale-95" />
</div>
<div className="nav-menu r-column-center h-max pt-[160px] r-gap-40 ">
<Link href="#" className="nav-item r-flex-center ">
<icons.HomeIcon aria-label="Home" className="nav-home scale-100" />
</Link>
<Link href="#" className="nav-item border-none r-flex-center ">
<icons.CompaniesIcon aria-label="Companies" className="scale-100 " width={24} height={24} />
</Link>
<Link href="#" className="nav-item r-flex-center ">
<icons.UserGroup aria-label="Admins" className="scale-100" width={24} height={24} />
</Link>
</div>
</div>
<div className="logout absolute bottom-[60px] left-[22px]">
<icons.Logout aria-label="Logout" />
</div>
*/

6
src/app/globals.css
View File

@ -25,9 +25,11 @@
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
--foreground: #04060F; --foreground: #2a2a2a;
--background: #ffffff; --background: #ffffff;
} --cinder: #999;
--bluegray: --primary;
}
} }
body { body {

2
src/app/layout.tsx
View File

@ -25,7 +25,7 @@ export default function RootLayout({
<body> <body>
<AuthProvider> <AuthProvider>
<QueryClientProvide> <QueryClientProvide>
<NextTopLoader color="#246BFD" shadow="0" /> <NextTopLoader color="#246BFD" shadow="0" />
{children} {children}
</QueryClientProvide> </QueryClientProvide>
</AuthProvider> </AuthProvider>

48
src/assets/css/admin.css
View File

@ -95,14 +95,50 @@
width: 284px; width: 284px;
} }
.header-desktop{
display: flex!important;
}
.mobile{
display: none!important;
}
@media (max-width: 640px) {
@media (max-width: 1024px) { .header, .main{
.admin-infos { padding-left: 22px;
/* justify-content: space-between; */ padding-right: 22px;
/* gap: 30px; */
} }
.admin-card { .header-desktop{
/* max-width: 100%; */ display: none!important;
}
.mobile{
display: flex!important;
}
.mobile-flex{
display: flex;
}
.mobile-none{
display: none;
}
.header .name{
padding-left: 44px;
}
.sidebar{
transition: all ease-in-out .4s;
}
.hamburger{
position: absolute;
top: 43px;
left: 22px;
transform: scale(2);
}
.hamburger.shifted{
left: 100px;
}
.hamburger-icon{
color: var(--primary);
border-radius: 4px;
} }
} }

22
src/components/admin/adminHeader.tsx
View File

@ -12,22 +12,27 @@ export default function AdminHeader() {
return ( return (
<> <>
<nav className="header r-flex-between px-[44px] py-[20px] "> <nav className="header r-flex-between items-center px-[44px] py-[20px] ">
<p className="name text-[26px]">Bienvenue, <span>Ken B.</span> </p> <p className="name text-[26px]">Bienvenue, <span>Ken B.</span> </p>
<div className="r-flex-between justify-center items-center r-gap-12"> <div className="r-flex-between justify-center items-center r-gap-12">
<Theme />
{/* <ProfilePicture /> */} {/* <ProfilePicture /> */}
<button type="button" className="icon-border"> <div className="header-desktop">
<Theme />
</div>
<button type="button" className="icon-border header-desktop">
<Image src={icons.notificationsIcon} alt="Notifications" /> <Image src={icons.notificationsIcon} alt="Notifications" />
</button> </button>
<div className="relative"> <div className="relative">
<DropdownMenu.Root open={open} onOpenChange={setOpen}> <DropdownMenu.Root open={open} onOpenChange={setOpen}>
<DropdownMenu.Trigger asChild> <DropdownMenu.Trigger asChild>
<div className="r-flex-between justify-center items-center r-gap-12 cursor-pointer "> <div className="r-flex-between justify-center items-center r-gap-12 cursor-pointer">
<button type="button" className="icon-borderd mobile scale-120" >
<Image src={icons.arrowLeft} alt="options" className={`transition-transform duration-300 ${open ? "scale-x-[-1]" : ""}`} />
</button>
<Image src={icons.profilePicture} alt="ProfilePicture" /> <Image src={icons.profilePicture} alt="ProfilePicture" />
<button className="IconButton" aria-label="Customise options"> <button className="IconButton header-desktop" aria-label="Customise options">
<Image src={icons.arrowUp} alt="arrowUp" className={`transition-transform duration-300 ${open ? "scale-y-[-1]" : ""}`}/> <Image src={icons.arrowUp} alt="arrowUp" className={`transition-transform duration-300 ${open ? "scale-y-[-1]" : ""}`} />
</button> </button>
</div> </div>
</DropdownMenu.Trigger> </DropdownMenu.Trigger>
@ -40,6 +45,9 @@ export default function AdminHeader() {
Profil Profil
</Link> </Link>
</DropdownMenu.Item> </DropdownMenu.Item>
{/* <DropdownMenu.Item className="DropdownMenuItem dropdown-item flex items-center content-center text-[14px] mobile">
<Theme />
</DropdownMenu.Item> */}
<DropdownMenu.Item className="DropdownMenuItem dropdown-item text-[14px]"> <DropdownMenu.Item className="DropdownMenuItem dropdown-item text-[14px]">
<Link href="#" className="d-flex items-start r-danger "> <Link href="#" className="d-flex items-start r-danger ">
<Image src={icons.logoutRed} alt="Deconnexion" /> <Image src={icons.logoutRed} alt="Deconnexion" />

15
src/components/admin/sidebar.tsx
View File

@ -4,15 +4,22 @@ import { icons } from "#/assets/icons"
import NavItem from "./navItem"; import NavItem from "./navItem";
import { usePathname } from "next/navigation"; import { usePathname } from "next/navigation";
import Link from "next/link"; import Link from "next/link";
import { useState } from "react";
export default function Sidebar() { export default function Sidebar() {
const pathname = usePathname(); const pathname = usePathname();
const [mobileVisible, setmobileVisible] = useState(false)
const handleMobileVisible = ()=> {
setmobileVisible(!mobileVisible)
}
return ( return (
<> <>
<div className="sidebar-holder min-w-[78px] max-w-[90px] h-[100vh] "> <div className={` ${ mobileVisible? "mobile-flex" : "mobile-none" } sidebar-holder min-w-[78px] max-w-[90px] h-[100vh] relative `}>
<div className="sidebar r-m-0 d-flex flex-column pt-[25px] max-w-[90px] h-[100vh] "> <div className="sidebar r-m-0 d-flex flex-column pt-[25px] max-w-[90px] h-[100vh] ">
<div className="logo r-flex-center px-[19px] "> <div className="logo r-flex-center px-[19px] ">
<Image src={icons.logo} alt="Logo" className="scale-95" /> <Image src={icons.logo} alt="Logo" className="scale-95" />
@ -29,6 +36,12 @@ export default function Sidebar() {
</div> </div>
</div> </div>
</div> </div>
<div onClick={() => handleMobileVisible()} className={`${mobileVisible ? "shifted" : ""} hamburger mobile`}>
{/* <Image src={icons.logo} alt="Logo" className="scale-95" /> */}
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-list hamburger-icon" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5"/>
</svg>
</div>
</> </>
) )
} }