Skip to content

Commit

Permalink
feat: redone sidebar
Browse files Browse the repository at this point in the history
  • Loading branch information
@FilipeR13
FilipeR13 committed Feb 24, 2025
1 parent f60f063 commit 6d74a8b
Show file tree
Hide file tree
Showing 3 changed files with 41 additions and 60 deletions.
14 changes: 7 additions & 7 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
"lint": "prettier --write \"**/*.{js,jsx,ts,tsx,md,mdx,astro}\" && eslint --fix \"src/**/*.{js,ts,jsx,tsx,astro}\""
},
"devDependencies": {
"@astrojs/tailwind": "^5.1.0",
"@astrojs/tailwind": "^6.0.0",
"@iconify-json/fa-brands": "^1.1.8",
"@iconify-json/mdi": "^1.1.64",
"@tailwindcss/forms": "^0.5.7",
Expand All @@ -33,23 +33,23 @@
},
"dependencies": {
"@astrojs/netlify": "^5.1.3",
"@astrojs/react": "^3.0.10",
"@astrojs/react": "^4.2.0",
"@aws-sdk/client-ses": "^3.750.0",
"@fontsource-variable/inter": "^5.0.16",
"@headlessui/react": "^1.7.18",
"@heroicons/react": "^2.1.1",
"@supabase/supabase-js": "^2.39.6",
"@types/react": "^18.2.58",
"@types/react-dom": "^18.2.19",
"@types/react": "^19.0.10",
"@types/react-dom": "^19.0.4",
"flowbite": "^2.3.0",
"heroicons": "^2.1.1",
"lucide-react": "^0.469.0",
"micromodal": "^0.4.10",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"sharp": "^0.33.1",
"short-unique-id": "^5.0.3",
"tailwindcss": "^3.4.1",
"tailwindcss": "^3.4.17",
"tiny-invariant": "^1.3.1"
}
}
84 changes: 32 additions & 52 deletions src/components/sidebar.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
"use client"

import { Menu, X, LogOut } from "lucide-react"
import { useState } from "react"

export default function Sidebar({ items }) {
Expand All @@ -16,59 +15,40 @@ export default function Sidebar({ items }) {
}
}

return (
<>
{/* Mobile Toggle Button */}
<button
type="button"
onClick={() => setIsOpen(!isOpen)}
className="fixed left-4 top-4 z-40 rounded-md bg-gray-800 p-2 text-white md:hidden"
aria-label={isOpen ? "Close Menu" : "Open Menu"}
>
{isOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
return (
<>
<button data-drawer-target="logo-sidebar" data-drawer-toggle="logo-sidebar" aria-controls="logo-sidebar" type="button" className="inline-flex items-center p-2 mt-2 ms-3 text-sm text-gray-500 rounded-lg sm:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 ">
<span className="sr-only">Open sidebar</span>
<svg className="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path clipRule="evenodd" fillRule="evenodd" d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z"></path>
</svg>
</button>

{/* Sidebar */}
<aside
className={`${
isOpen ? "translate-x-0" : "-translate-x-full"
} fixed left-0 top-0 z-30 flex h-full w-64 flex-col bg-zinc-900 justify-between border-r border-zinc-800 transition-transform duration-300 ease-in-out md:translate-x-0`}
>
{/* Logo Area */}
<div className="p-4">
<h1 className="text-xl font-bold text-green-600">BackOffice</h1>
</div>

{/* Navigation Links */}
<nav className="flex-1 space-y-1 px-2 py-4">
{items.map((item) => (
<a
key={item.name}
href={item.url}
className="flex items-center rounded-lg px-4 py-2 text-gray-700 hover:bg-zinc-800 hover:text-white shadow-md shadow-green-900 cursor-pointer"
>
<span>{item.name}</span>
</a>
))}
</nav>

{/* Sign Out Button */}
<div className="p-4">
<button
onClick={onSignOut}
className="flex w-full items-center justify-center gap-2 rounded-lg bg-red-800 p-2 text-white text-sm hover:bg-red-900"
>
<LogOut className="h-5 w-5" />
<span>Sign Out</span>
</button>
</div>
<aside id="logo-sidebar" className="fixed top-0 left-0 z-40 w-64 h-screen transition-transform -translate-x-full sm:translate-x-0 items-" aria-label="Sidebar">
<div className="flex flex-col justify-between h-full px-3 py-4 overflow-y-auto bg-zinc-900">
<div>
<div className="flex items-center justify-center pb-4">
<span className="text-xl font-bold whitespace-nowrap text-green-500">BugsByte</span>
</div>
<ul className="space-y-2 font-medium">
{items.map((item, index) => (
<li key={index} className="shadow-lg shadow-green-900 bg-zinc-800 rounded">
<a href={item.url} className="flex items-center p-2 text-white rounded-lg hover:bg-green-900 group">
<span className="ms-3">{item.name}</span>
</a>
</li>
))}
</ul>
</div>
<button onClick={onSignOut} className="flex items-center p-2 text-white rounded-lg bg-zinc-800 hover:bg-red-800 group">
<svg className="shrink-0 w-5 h-5 text-gray-500 transition duration-75 group-hover:text-red-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 16">
<path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M1 8h11m0 0L8 4m4 4-4 4m4-11h3a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-3"/>
</svg>
<span className="ms-3 whitespace-nowrap">Log Out</span>
</button>
</div>
</aside>

{/* Overlay for mobile */}
{isOpen && (
<div className="fixed inset-0 z-20 bg-black bg-opacity-50 md:hidden" onClick={() => setIsOpen(false)} />
)}
</>
)
</>
)
}

3 changes: 2 additions & 1 deletion src/pages/admin/dashboard.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,10 @@
import BaseLayout from "~/layouts/baseLayout.astro";
import DashboardComponent from "~/components/dashboard.jsx";
import Sidebar from "~/components/sidebar.jsx";
import { Users } from "lucide-react"
const navigationItems = [
{ name: "Teams", href: "/admin/dashboard" },
{ name: "Teams", url: "/admin/dashboard" },
];
---
Expand Down

0 comments on commit 6d74a8b

Please sign in to comment.