Anjing Webshells

Website : rimsha.abasa.com
: / var / www / talha_silentcontent / src / components / Header /
Filename : Sidebar.tsx
back
// @ts-nocheck

"use client";

//import useState hook to create menu collapse state
import React, { useEffect, useState } from "react";

//import react pro sidebar components
import {
  ProSidebar,
  Menu,
  MenuItem,
  SidebarHeader,
  SidebarFooter,
  SidebarContent,
} from "react-pro-sidebar";

//import icons from react icons
import { FaList } from "react-icons/fa";
import {
  FiHome,
  FiLogOut,
} from "react-icons/fi";
import { RiPencilLine } from "react-icons/ri";
import { BiCog } from "react-icons/bi";
import sidebarImage from "@/images/bg1.jpg";
import logo from "@/images/silentcontent.png";
import smlogo from "@/images/silentcontentlogo2.png"
import Image from "next/image";
import Link from "next/link";
import { useQuery } from "@tanstack/react-query";
import axios from "axios";
import { useRouter } from "next/navigation"; 
import {FaWordpressSimple} from "react-icons/fa"
import {SiAwsorganizations} from "react-icons/si"

import sclogo from "@/images/sc-logo-4.svg"
import homeIcon from "@/images/dashboard.svg";
import articlesIcon from "@/images/articles.svg";
import organizationsIcon from "@/images/organization.svg";
import sitesIcon from "@/images/pencil.svg";
import settingsIcon from "@/images/settings.svg";
import helpIcon from "@/images/help.svg";

//import sidebar css from react-pro-sidebar module and our custom css
import "react-pro-sidebar/dist/css/styles.css";
import "./Sidebar.css";
import { toast } from "../ui/use-toast";

const Sidebar = ({className = '', ...props}) => {
  //create initial menuCollapse state using useState hook
  const [menuCollapse, setMenuCollapse] = useState(false);
  const router = useRouter()

  //create a custom function that will change menucollapse state from false to true and true to false
  const menuIconClick = () => {
    //condition checking to change state from true to false and vice versa
    menuCollapse ? setMenuCollapse(false) : setMenuCollapse(true);
  };

  // Function to handle media query change
  const handleMediaQueryChange = (e) => {
    if (e.matches) {
      setMenuCollapse(false); // Large screen, expand sidebar
    } else {
      setMenuCollapse(true); // Small screen, collapse sidebar
    }
  };

  useEffect(() => {
    // Create a media query list
    const mediaQueryList = window.matchMedia('(min-width: 1024px)'); // Tailwind's lg breakpoint

    // Set initial state based on media query
    handleMediaQueryChange(mediaQueryList);

    // Add listener to handle media query changes
    mediaQueryList.addEventListener('change', handleMediaQueryChange);

    // Cleanup listener on component unmount
    return () => {
      mediaQueryList.removeEventListener('change', handleMediaQueryChange);
    };
  }, []);

  return (
    <>
    {/* @ts-ignore */}
      <div id="header" className={className} style={{ position: "-webkit-sticky", width: menuCollapse ? '50px' : '220px', position: "sticky", top: 0, }}>
        {/* collapsed props to change menu size using menucollapse state */}

        <ProSidebar collapsed={menuCollapse}   >
          <SidebarHeader >
            <div
              className=" text-center cursor-pointer py-4 text-white h-full flex justify-center"
              onClick={menuIconClick}
            >
              {menuCollapse ? (
                // <p className="m-4" style={{fontSize: 18}}>SC</p>
                <Image
                src={smlogo.src}
                alt="silentcontent"
                width={70}
                height={40}
                className="w-max"
              />
              ) : (
                <Image
                  src={sclogo.src}
                  alt="silentcontent"
                  width={70}
                  height={40}
                  className="w-max py-4 px-6"
                />
              )}
            </div>

          </SidebarHeader>
          <SidebarContent>
            <Menu>
              <MenuItem active={false} icon={<Image src={homeIcon} alt="Home" width={20} height={20} />}>
                <Link className="" href='/dashboard'>Create Content</Link>
              </MenuItem>
              <MenuItem icon={<Image src={articlesIcon} alt="Articles" width={20} height={20} />}>
                <Link href='/batches'>Articles</Link>
              </MenuItem>
              <MenuItem icon={<Image src={organizationsIcon} alt="Organizations" width={20} height={20} />}>
                <Link href='/organizations'>Organizations</Link>
              </MenuItem>
              <MenuItem icon={<Image src={sitesIcon} alt="Standard Sites" width={20} height={20} />}>
                <Link href='/sites'>Standard Sites</Link>
              </MenuItem>
              <MenuItem icon={<Image src={settingsIcon} alt="Settings" width={20} height={20} />}>
                <Link href='/settings'>Settings</Link>
              </MenuItem>
            </Menu>
          </SidebarContent>
        </ProSidebar>
      </div>
    </>
  );
};

export default Sidebar;