/ var / www / html / events / src / components / [ HOME SHELL ]

Name	Size	Permission	Action
ui	[ DIR ]	drwxrwxr-x
AddEvent.js	8.29 KB	-rw-rw-r--
AddUser.js	5.79 KB	-rw-rw-r--
CustomInput.js	3.43 KB	-rw-rw-r--
EventTableRow.js	2.23 KB	-rw-rw-r--
Events.js	3.39 KB	-rw-rw-r--
Home.js	11.2 KB	-rw-rw-r--
Navbar.js	10.61 KB	-rw-rw-r--
NextToast.js	62 B	-rw-rw-r--
PaginateItems.js	2.61 KB	-rw-rw-r--
Provider.js	171 B	-rw-rw-r--
ShowEvent.js	8.95 KB	-rw-rw-r--
ShowHomeEvent.js	3.26 KB	-rw-rw-r--
UpdateEvent.js	10.27 KB	-rw-rw-r--
UpdateUser.js	8.89 KB	-rw-rw-r--
UserTableRow.js	1.64 KB	-rw-rw-r--

Code Editor : Navbar.js

"use client";
import Image from "next/image";
import Link from "next/link";
import React, { useEffect, useState } from "react";
import { getSession, signOut } from "next-auth/react";

function TopNavbar({ children }) {
  const [show, setShow] = useState(false);
  const [logo, setLogo] = useState("");
  const [currentUser, setCurrentUser] = useState({
    fname: "",
    lname: "",
    email: "",
    role: "",
    status: "",
  });
  const session = async () => {
    const curr = await getSession();
    const { fname, lname, email, role, status } = curr.user;
    
    setCurrentUser({
      fname: fname,
      lname: lname,
      email: email,
      role: role,
      status: status,
    });
  };
  useEffect(() => {
    session();
  }, []);

return (
    <>
      {currentUser.role === "admin" ? (
        <div className="h-screen">
          <div className="flex h-full">
            <div
              className={
                show
                  ? "w-60 flex-col bg-slate-600"
                  : "w-20 flex-col bg-slate-600"
              }
            >
              <div className="bg-teal-500 h-20 p-3 border-white border-b-2 border-r-2">
                <h1 className="text-2xl font-bold  text-white">IIITD</h1>
                <h1 className="text-2xl mb-2 text-white">{logo}</h1>
              </div>
              <div className="p-3 ">
                <div className="flex justify-start">
                  <Image
                    className="mt-3 mb-10 ml-1"
                    src="https://img.icons8.com/ios/50/user-male-circle--v1.png"
                    width={38}
                    height={38}
                    alt="user"
                  />
                  <h1
                    className={`mt-5 ml-4 font-bold text-xl text-white ${
                      show ? "" : "hidden"
                    }`}
                  >
                    {currentUser.role === "admin" ? "Admin" : "Co-Admin"}
                  </h1>
                </div>
                <Link
                  className={`flex justify-start overflow-hidden mb-10 hover:shadow-md hover:bg-slate-700 `}
                  href="/dashboardAdmin"
                >
                  <Image
                    className=" ml-3 py-2 flex-2"
                    src="https://img.icons8.com/external-kmg-design-basic-outline-kmg-design/32/external-dashboard-ui-essential-kmg-design-basic-outline-kmg-design.png"
                    width={28}
                    height={28}
                    alt="dashboard"
                    layout="fixed"
                  />
                  <h2
                    className={` ml-4 pl-1 mt-3 font-semibold text-xl text-white ${
                      show ? "" : "hidden"
                    }`}
                  >
                    Dashboard
                  </h2>
                </Link>
                <div className="flex flex-col justify-start">
                  <div>
                    <Link
                      href="/manageUsers"
                      className={`flex overflow-hidden hover:shadow-md hover:bg-slate-700`}
                    >
                      <Image
                        className=" mr-2"
                        src="https://img.icons8.com/pastel-glyph/64/user-settings.png"
                        width={48}
                        height={30}
                        alt="employee"
                        layout="fixed"
                      />
                      <h2
                        className={`ml-1 font-semibold text-xl text-white ${
                          show ? "" : "hidden"
                        }`}
                      >
                        Manage Users
                      </h2>
                    </Link>
                  </div>

<div className="bottom-0 absolute mb-10 ml-1">
                    <button
                      onClick={() => {
                        signOut({ callbackUrl: "http://events.iiitd.edu.in/login" });
                      }}
                      className=""
                    >
                      <div className=" flex hover:shadow-md hover:bg-slate-700 ">
                        <Image
                          src="https://img.icons8.com/external-anggara-basic-outline-anggara-putra/24/external-logout-social-media-interface-anggara-basic-outline-anggara-putra.png"
                          width={34}
                          height={34}
                          alt="logout"
                        />
                        <h2
                          className={`ml-5 pl-1 font-semibold text-xl text-white ${
                            show ? "" : "hidden"
                          }`}
                        >
                          Log out
                        </h2>
                      </div>
                    </button>
                  </div>
                </div>
              </div>
            </div>
            <div className="w-screen">
              <div className="flex justify-between p-5 h-20 bg-teal-500">
                <button
                  onClick={() => {
                    setShow(!show);
                    if (show) {
                      setLogo("");
                    } else {
                      setLogo("Events Portal");
                    }
                  }}
                >
                  <Image
                    src="https://img.icons8.com/ios-glyphs/30/000000/menu--v1.png"
                    width={30}
                    height={30}
                    alt="menu"
                  />
                </button>

<div className="flex space-x-5">
                  <Image
                    src="https://img.icons8.com/ios/50/user-male-circle--v1.png"
                    width={36}
                    height={20}
                    alt="user"
                  />

<h1 className="text-xl">
                    {currentUser.fname + " " + currentUser.lname}
                  </h1>
                </div>
              </div>
              <div className="">{children}</div>
            </div>
          </div>
        </div>
      ) : (
        <div className="h-screen">
          <div className="flex h-full">
            <div
              className={
                show
                  ? "w-60 flex-col bg-slate-600"
                  : "w-20 flex-col bg-slate-600"
              }
            >
              <div className="bg-teal-500 h-20 p-3 border-white border-b-2 border-r-2">
                <h1 className="text-2xl font-bold  text-white">IIITD</h1>
                <h1 className="text-2xl mb-2 text-white">{logo}</h1>
              </div>
              <div className="p-3">
                <div className="flex justify-start">
                  <Image
                    className="mt-3 mb-10 ml-1"
                    src="https://img.icons8.com/ios/50/user-male-circle--v1.png"
                    width={38}
                    height={38}
                    alt="user"
                  />
                  <h1
                    className={`mt-5 ml-4 font-bold text-xl text-white ${
                      show ? "" : "hidden"
                    }`}
                  >
                    {currentUser.role === "admin" ? "Admin" : "Co-Admin"}
                  </h1>
                </div>
                <Link
                  className={`flex justify-start overflow-hidden mb-10 hover:shadow-md hover:bg-slate-700 `}
                  href="/dashboardAdmin"
                >
                  <Image
                    className=" ml-3 py-2 flex-2"
                    src="https://img.icons8.com/external-kmg-design-basic-outline-kmg-design/32/external-dashboard-ui-essential-kmg-design-basic-outline-kmg-design.png"
                    width={28}
                    height={28}
                    alt="dashboard"
                    layout="fixed"
                  />
                  <h2
                    className={`ml-4 pl-1 mt-3 font-semibold text-xl text-white ${
                      show ? "" : "hidden"
                    }`}
                  >
                    Dashboard
                  </h2>
                </Link>
                <div className="flex flex-col justify-start">
                  <div>
                    <button
                      onClick={() => {
                        signOut({ callbackUrl: "http://events.iiitd.edu.in/login" });
                      }}
                      className=""
                    >
                      <div className="bottom-0 absolute mb-10 ml-1 flex overflow-hidden hover:shadow-md hover:bg-slate-700 ">
                        <Image
                          src="https://img.icons8.com/external-anggara-basic-outline-anggara-putra/24/external-logout-social-media-interface-anggara-basic-outline-anggara-putra.png"
                          width={34}
                          height={34}
                          alt="logout"
                        />
                        <h2 className="ml-5 pl-1 font-semibold text-xl text-white">
                          {show ? "Log out" : " "}
                        </h2>
                      </div>
                    </button>
                  </div>
                </div>
              </div>
            </div>
            <div className="w-screen">
              <div className="flex justify-between p-5 h-20 bg-teal-500">
                <button
                  onClick={() => {
                    setShow(!show);
                    if (show) {
                      setLogo("");
                    } else {
                      setLogo("Events Portal");
                    }
                  }}
                >
                  <Image
                    src="https://img.icons8.com/ios-glyphs/30/000000/menu--v1.png"
                    width={30}
                    height={30}
                    alt="menu"
                  />
                </button>

<div className="flex space-x-5">
                  <Image
                    src="https://img.icons8.com/ios/50/user-male-circle--v1.png"
                    width={36}
                    height={20}
                    alt="user"
                  />

<h1 className="text-xl">
                    {currentUser.fname + " " + currentUser.lname}
                  </h1>
                </div>
              </div>
              <div className="">{children}</div>
            </div>
          </div>
        </div>
      )}
    </>
  );
}

export default TopNavbar;

Urban Research Lab

Urban Research Lab

The Urban Research Lab (URL) at IIIT-Delhi was established in 2020, during a time when the pandemic brought the complexities of urban life more visible than ever. What started as an initiative by faculty and students has grown into a collaborative space for critically exploring and reimagining the urban questions through research, dialogue, and interdisciplinary engagement.