popov/mwitnessing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

layout optimisation and adjustments

Browse Source
This commit is contained in:
Dobromir Popov
2024-02-28 12:44:28 +02:00
parent 138530597a
commit 243405db0c
9 changed files with 156 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
components/sidebar.tsx
View File

@ -17,7 +17,7 @@ function SidebarMenuItem({ item, session, isSubmenu }) {
//const [isOpen, setIsOpen] = useState(false && collapsable);
// Initialize isOpen to true for non-collapsible items, ensuring they are always "open" // xOR
const baseClass = `sidemenu-item flex items-center ${isSubmenu ? "px-4 py-1" : ""} mt-1 transition-colors duration-3000 transform rounded-md`;
const baseClass = `sidemenu-item flex items-center ${isSubmenu ? "px-3 py-1" : ""} mt-1 pr-0 transition-colors duration-3000 transform rounded-md`;
const activeClass = isActive ? "sidemenu-item-active text-blue-600 bg-gray-100 dark:text-blue-400 dark:bg-blue-900" : "text-gray-700 dark:text-gray-300";
const hoverClasses = "hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-gray-200 hover:text-gray-700";
@ -64,7 +64,7 @@ function SidebarMenuItem({ item, session, isSubmenu }) {
{item.svgData && <svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d={item.svgData} stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>}
<span className="mx-4 font-medium">{item.text}</span>
<span className="ml-3 mr-1 font-medium">{item.text}</span>
{item.children && <DropDownIcon isOpen={isOpen} />}
</div>
{isOpen && item.children && (
@ -89,7 +89,7 @@ function DropDownIcon({ isOpen }) {
export default function Sidebar({ isSidebarOpen, toggleSidebar }) {
const { data: session, status } = useSession();
const sidebarWidth = 256; // Simplify by using a constant
const sidebarWidth = 226; // Simplify by using a constant
const sidebarRef = useRef(null);
//const [locations, setLocations] = useState([]);
@ -126,7 +126,7 @@ export default function Sidebar({ isSidebarOpen, toggleSidebar }) {
return (
<>
<button onClick={toggleSidebar}
className="fixed top-0 left-0 z-40 m-4 text-xl bg-white border border-gray-200 p-2 rounded-full shadow-lg focus:outline-none"
className="fixed top-1 left-4 z-40 m- text-xl bg-white border border-gray-200 p-2 rounded-full shadow-lg focus:outline-none"
style={{ transform: isSidebarOpen ? `translateX(${sidebarWidth - 64}px)` : 'translateX(-20px)' }}>☰</button>
<aside id="sidenav" ref={sidebarRef}
className="px-2 fixed top-0 left-0 z-30 h-screen overflow-y-auto bg-white border-r dark:bg-gray-900 dark:border-gray-700 transition-all duration-300 w-64"
@ -163,7 +163,7 @@ function UserSection({ session }) {
function SignInButton() {
return (
<div className="items-center py-6" onClick={() => signIn()}>
<div className="items-center py-4" onClick={() => signIn()}>
<a href="/api/auth/signin">Впишете се</a>
</div>
);
@ -173,13 +173,13 @@ function UserDetails({ session }) {
return (
<>
<hr className="m-0" />
<div className="flex items-center py-4 -mx-2">
<div className="flex items-center">
{session.user.image && (
<img className="object-cover mx-2 rounded-full h-9 w-9" src={session.user.image} alt="avatar" />
)}
<div className="ml-3 overflow-hidden">
<p className="mx-2 mt-2 text-sm font-medium text-gray-800 dark:text-gray-200">{session.user.name}</p>
<p className="mx-2 mt-1 text-sm font-medium text-gray-600 dark:text-gray-400">{session.user.role}</p>
<p className="mx-1 mt-1 text-sm font-medium text-gray-800 dark:text-gray-200">{session.user.name}</p>
<p className="mx-1 mt-1 text-sm font-medium text-gray-600 dark:text-gray-400">{session.user.role}</p>
<a href="/api/auth/signout" className={styles.button} onClick={(e) => { e.preventDefault(); signOut(); }}>Излезте</a>
</div>
</div>
@ -198,7 +198,7 @@ function FooterSection() {
footerMenu.map((item, index) => (
<div
key={index}
className="px-4 py-2 mt-2 cursor-pointer hover:underline hover:text-blue-600 dark:hover:text-blue-400 "
className="px-4 py-1 mt-2 cursor-pointer hover:underline hover:text-blue-600 dark:hover:text-blue-400 "
onClick={() => navigateTo(item.url)}
>
<span className="text-gray-700 dark:text-gray-300 font-medium">{item.text}</span>