Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Made the aside bar responsive for mobile #2071

Merged
merged 5 commits into from
Aug 9, 2024
Merged

Made the aside bar responsive for mobile #2071

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a299d2d
Made the aside bar responsive for mobile
Saipradyumnagoud Jul 30, 2024
8e5cc97
Updated Aside Bar Made it Resposnsive
Saipradyumnagoud Aug 9, 2024
7d6c19b
Made Aside Bar Resposnive
Saipradyumnagoud Aug 9, 2024
3302337
Updated orders page
Saipradyumnagoud Aug 9, 2024
405b805
Updated
Saipradyumnagoud Aug 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 2 additions & 4 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

73 changes: 51 additions & 22 deletions src/User/components/Aside/Aside.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,21 +5,22 @@ import { Link, useNavigate, useLocation } from "react-router-dom";

const CartIcon = () => {
const cartItems = useSelector((state) => state.cart.items);

const noOfItems = cartItems.reduce((a, b) => a + b.quantity, 0);

return (
<Link
to="/dashboard-cart"
className="flex items-center space-x-2 p-2 hover:bg-green-700 rounded-md relative">
className="flex items-center space-x-2 p-2 hover:bg-green-700 rounded-md relative"
>
<lord-icon
style={{
height: "20px",
width: "20px",
}}
src="https://cdn.lordicon.com/pbrgppbb.json"
trigger="hover"
colors="primary:#ffffff"></lord-icon>
colors="primary:#ffffff"
></lord-icon>
<span>Cart</span>
<div className="absolute right-2 top-1 bg-red-500 text-xs text-white rounded-full w-5 h-5 flex items-center justify-center mt-1">
{noOfItems}
Expand All @@ -35,15 +36,17 @@ const WishlistIcon = () => {
return (
<Link
to="/dashboard-wishlist"
className="flex items-center space-x-2 p-2 hover:bg-green-700 rounded-md relative">
className="flex items-center space-x-2 p-2 hover:bg-green-700 rounded-md relative"
>
<lord-icon
style={{
height: "20px",
width: "20px",
}}
src="https://cdn.lordicon.com/ulnswmkk.json"
trigger="hover"
colors="primary:#ffffff"></lord-icon>
colors="primary:#ffffff"
></lord-icon>
<span>Wishlist</span>
<div className="absolute right-2 top-1 bg-red-500 text-xs text-white rounded-full w-5 h-5 flex items-center justify-center mt-1">
{noOfItem}
Expand All @@ -53,21 +56,19 @@ const WishlistIcon = () => {
};

const Aside = () => {
const [isOpen, setIsOpen] = useState(false);
const navigate = useNavigate();
const location = useLocation();

useEffect(() => {
const params = new URLSearchParams(location.search);
// const email = params.get("email");
const name = params.get("name");

if (name) {
// localStorage.setItem("useremail", email);
localStorage.setItem("username", name);
}
}, [location]);

const userEmail = localStorage.getItem("useremail");
const username = localStorage.getItem("username") || "Admin";

const handleLogout = () => {
Expand Down Expand Up @@ -105,11 +106,18 @@ const Aside = () => {
});
};

const toggleSidebar = () => {
setIsOpen(!isOpen);
};

return (
<>
<aside
className="w-64 bg-[#2d4031] text-white flex flex-col fixed top-0 mt-20 index-"
style={{ position: "sticky" }}>
className={`w-64 bg-[#2d4031] text-white flex flex-col fixed top-0 mt-20 transform ${
isOpen ? "translate-x-0" : "-translate-x-full"
} transition-transform md:translate-x-0 z-40`}
style={{ position: "sticky" }}
>
<div className="flex items-center space-x-4 mt-10 ml-5">
<div className="h-10 bg-green-700 flex items-center justify-center p-8 rounded-lg gap-2">
<lord-icon
Expand All @@ -119,36 +127,41 @@ const Aside = () => {
}}
src="https://cdn.lordicon.com/hrjifpbq.json"
trigger="hover"
colors="primary:#ffffff"></lord-icon>
colors="primary:#ffffff"
></lord-icon>
<span className="text-white">{username}</span>
</div>
</div>
<nav className="flex-1 px-4 py-8 space-y-2">
<Link
to="/profile"
className="flex items-center space-x-2 p-2 hover:bg-green-700 rounded-md">
className="flex items-center space-x-2 p-2 hover:bg-green-700 rounded-md"
>
<lord-icon
style={{
height: "20px",
width: "20px",
}}
src="https://cdn.lordicon.com/hrjifpbq.json"
trigger="hover"
colors="primary:#ffffff"></lord-icon>
colors="primary:#ffffff"
></lord-icon>
<span>My Profile</span>
</Link>

<Link
to="/dashboard-order"
className="flex items-center space-x-2 p-2 hover:bg-green-700 rounded-md">
className="flex items-center space-x-2 p-2 hover:bg-green-700 rounded-md"
>
<lord-icon
style={{
height: "20px",
width: "20px",
}}
src="https://cdn.lordicon.com/xljvqlng.json"
trigger="hover"
colors="primary:#ffffff"></lord-icon>
colors="primary:#ffffff"
></lord-icon>
<span>Orders</span>
</Link>

Expand All @@ -158,15 +171,17 @@ const Aside = () => {

<Link
to="/dashboard-notifications"
className="flex items-center space-x-2 p-2 hover:bg-green-700 rounded-md relative">
className="flex items-center space-x-2 p-2 hover:bg-green-700 rounded-md relative"
>
<lord-icon
style={{
height: "20px",
width: "20px",
}}
src="https://cdn.lordicon.com/lznlxwtc.json"
trigger="hover"
colors="primary:#ffffff"></lord-icon>
colors="primary:#ffffff"
></lord-icon>
<span>Notifications</span>
<span className="absolute right-2 top-1 bg-red-500 text-xs text-white rounded-full w-5 h-5 flex items-center justify-center mt-1">
2
Expand All @@ -175,28 +190,32 @@ const Aside = () => {

<Link
to="/Help"
className="flex items-center space-x-2 p-2 hover:bg-green-700 rounded-md">
className="flex items-center space-x-2 p-2 hover:bg-green-700 rounded-md"
>
<lord-icon
style={{
height: "20px",
width: "20px",
}}
src="https://cdn.lordicon.com/ojnjgkun.json"
trigger="hover"
colors="primary:#ffffff"></lord-icon>
colors="primary:#ffffff"
></lord-icon>
<span>Help</span>
</Link>
<Link
to="/contact"
className="flex items-center space-x-2 p-2 hover:bg-green-700 rounded-md">
className="flex items-center space-x-2 p-2 hover:bg-green-700 rounded-md"
>
<lord-icon
style={{
height: "20px",
width: "20px",
}}
src="https://cdn.lordicon.com/srsgifqc.json"
trigger="hover"
colors="primary:#ffffff"></lord-icon>
colors="primary:#ffffff"
></lord-icon>
<span>Contact Us</span>
</Link>

Expand All @@ -209,12 +228,22 @@ const Aside = () => {
padding: "12px 30px",
borderRadius: "8px",
border: "1px solid #98bf8cff",
}}>
}}
>
Logout
</button>
</div>
</nav>
</aside>

<div className="md:hidden fixed top-1/2 left-0 transform -translate-y-1/2 z-50">
<button
onClick={toggleSidebar}
className="bg-green-700 p-2 rounded-md text-white flex items-center"
>
<span>{isOpen ? "<" : ">"}</span>
</button>
</div>
</>
);
};
Expand Down