ahmd shajmeer
ahmd shajmeer
PostsComments
KPCKevin Powell - Community
Created by ahmd shajmeer on 2/17/2025 in #front-end
Profile Picture Upload semicircle Input
thanks
4 replies
KPCKevin Powell - Community
Created by ahmd shajmeer on 2/6/2025 in #resources
One Line Code of Clip-Path for Inverted Borders
I have another shape like this so am looking for a tool to mark the coordinates like this.
4 replies
KPCKevin Powell - Community
Created by ahmd shajmeer on 1/28/2025 in #front-end
Mobile Layout not taking full space
I understand only a bit from your view, but I appreciate you for pointing out this. Lets keep my code aside and can you provide code that how you will approach this layout with the four components? This will help me a lot for comparing my code and figure out the issue.
9 replies
KPCKevin Powell - Community
Created by ahmd shajmeer on 1/28/2025 in #front-end
Mobile Layout not taking full space
<>
  {isMobile && isCollapsed && (
    <button className="h-14 w-14 rounded-full bg-[#1C1C1C] text-white flex items-center justify-center" onClick={() => setIsCollapsed(false)}>
      <ChevronsRight className="h-6 w-6" />
    </button>
  )}
  {isMobile && !isCollapsed && (
    <div className="fixed inset-0 bg-black/50 z-30" onClick={() => setIsCollapsed(true)} />
  )}
  <aside
    className={cn(
      "flex flex-col gap-4 bg-[#1C1C1C] p-4 text-white transition-all duration-300 h-fit",
      isMobile && ["fixed left-0 top-0 bottom-0 z-40", isCollapsed ? "-translate-x-full" : "translate-x-0"],
      !isMobile && ["relative rounded-3xl", isCollapsed ? "w-[70px]" : "w-[250px]"],
      isMobile && !isCollapsed && "w-[250px]",
      "rounded-r-3xl lg:rounded-3xl"
    )}
  >
    <div className="flex items-center justify-between">
      {!isCollapsed && (
        <h2 className="text-xl font-extrabold font-nunitoSans text-white transition-all duration-600">
          <span className="text-[#ddff8f]">EA</span> Games
        </h2>
      )}
      <Button
        variant="ghost"
        size="icon"
        className={cn("h-6 w-6 text-white hover:bg-transparent hover:text-white", isCollapsed ? "mx-auto" : "ml-auto")}
        onClick={() => setIsCollapsed(!isCollapsed)}
      >
        {isCollapsed ? <ChevronsRight className="h-4 w-4 transition-transform" /> : <ChevronsLeft className="h-4 w-4 transition-transform" />}
      </Button>
    </div>
    <nav className="flex flex-1 flex-col gap-2">
      <NavItem
        icon={LayoutDashboard}
        title="Dashboard"
        to="/dashboard"
        isCollapsed={isCollapsed}
        isActive={location.pathname === '/dashboard'}
      />
      {/* Other Nav Items */}
    </nav>
  </aside>
</>
<>
  {isMobile && isCollapsed && (
    <button className="h-14 w-14 rounded-full bg-[#1C1C1C] text-white flex items-center justify-center" onClick={() => setIsCollapsed(false)}>
      <ChevronsRight className="h-6 w-6" />
    </button>
  )}
  {isMobile && !isCollapsed && (
    <div className="fixed inset-0 bg-black/50 z-30" onClick={() => setIsCollapsed(true)} />
  )}
  <aside
    className={cn(
      "flex flex-col gap-4 bg-[#1C1C1C] p-4 text-white transition-all duration-300 h-fit",
      isMobile && ["fixed left-0 top-0 bottom-0 z-40", isCollapsed ? "-translate-x-full" : "translate-x-0"],
      !isMobile && ["relative rounded-3xl", isCollapsed ? "w-[70px]" : "w-[250px]"],
      isMobile && !isCollapsed && "w-[250px]",
      "rounded-r-3xl lg:rounded-3xl"
    )}
  >
    <div className="flex items-center justify-between">
      {!isCollapsed && (
        <h2 className="text-xl font-extrabold font-nunitoSans text-white transition-all duration-600">
          <span className="text-[#ddff8f]">EA</span> Games
        </h2>
      )}
      <Button
        variant="ghost"
        size="icon"
        className={cn("h-6 w-6 text-white hover:bg-transparent hover:text-white", isCollapsed ? "mx-auto" : "ml-auto")}
        onClick={() => setIsCollapsed(!isCollapsed)}
      >
        {isCollapsed ? <ChevronsRight className="h-4 w-4 transition-transform" /> : <ChevronsLeft className="h-4 w-4 transition-transform" />}
      </Button>
    </div>
    <nav className="flex flex-1 flex-col gap-2">
      <NavItem
        icon={LayoutDashboard}
        title="Dashboard"
        to="/dashboard"
        isCollapsed={isCollapsed}
        isActive={location.pathname === '/dashboard'}
      />
      {/* Other Nav Items */}
    </nav>
  </aside>
</>
9 replies
KPCKevin Powell - Community
Created by ahmd shajmeer on 1/28/2025 in #front-end
Mobile Layout not taking full space
SideBar.tsx
9 replies
KPCKevin Powell - Community
Created by ahmd shajmeer on 1/28/2025 in #front-end
Mobile Layout not taking full space
<div className="min-h-screen p-4 grid grid-cols-[auto,1fr]">
      {/* Left sidebar - visible on all screens */}
      <div className="mr-2">
        <SidebarProvider>
          <Sidebar />
        </SidebarProvider>
      </div>

      {/* Main content area */}
      <div className="grid grid-cols-1 md:grid-cols-[1fr,auto] gap-4">
        {/* Top navbar */}
        <div className="col-span-full">
          <Navbar
            colors={themeColors}
            onSelect={handleColorSelect}
            onClear={handleClearColor}
          />
        </div>

        {/* Main content */}
        <div
          className="col-span-full md:col-span-1 row-span-4"
          style={{ backgroundColor: selectedThemeColor || 'white' }}
        >
          <MainLayout>
            <Outlet />
          </MainLayout>
        </div>

        {/* Right sidebar */}
        <div
          className="col-span-full md:col-span-1 md:col-start-2 row-span-4"
          style={{ backgroundColor: selectedThemeColor || 'white' }}
        >
          <RightBar />
        </div>
      </div>
    </div>
<div className="min-h-screen p-4 grid grid-cols-[auto,1fr]">
      {/* Left sidebar - visible on all screens */}
      <div className="mr-2">
        <SidebarProvider>
          <Sidebar />
        </SidebarProvider>
      </div>

      {/* Main content area */}
      <div className="grid grid-cols-1 md:grid-cols-[1fr,auto] gap-4">
        {/* Top navbar */}
        <div className="col-span-full">
          <Navbar
            colors={themeColors}
            onSelect={handleColorSelect}
            onClear={handleClearColor}
          />
        </div>

        {/* Main content */}
        <div
          className="col-span-full md:col-span-1 row-span-4"
          style={{ backgroundColor: selectedThemeColor || 'white' }}
        >
          <MainLayout>
            <Outlet />
          </MainLayout>
        </div>

        {/* Right sidebar */}
        <div
          className="col-span-full md:col-span-1 md:col-start-2 row-span-4"
          style={{ backgroundColor: selectedThemeColor || 'white' }}
        >
          <RightBar />
        </div>
      </div>
    </div>
9 replies
KPCKevin Powell - Community
Created by ahmd shajmeer on 1/28/2025 in #front-end
Mobile Layout not taking full space
App.tsx
9 replies
KPCKevin Powell - Community
Created by ahmd shajmeer on 12/28/2024 in #front-end
Infinite Scroll text behind and infront of a image
I have achieved similar scroll effect using only tailwindcss but it is not in a loop, so I tried a trick from YT that dupicating the content but it also not working. Is it possible achieve that without any JS.
12 replies
KPCKevin Powell - Community
Created by ahmd shajmeer on 12/28/2024 in #front-end
Infinite Scroll text behind and infront of a image
https://codepen.io/ahmd_shajmeer/pen/yyBzNBR
12 replies
KPCKevin Powell - Community
Created by ahmd shajmeer on 12/28/2024 in #front-end
Infinite Scroll text behind and infront of a image
12 replies
KPCKevin Powell - Community
Created by ahmd shajmeer on 12/28/2024 in #front-end
Infinite Scroll text behind and infront of a image
Sorry for the delayed reply , https://codepen.io/ahmd_shajmeer/pen/QwLMYMJ , I worked on this but how to achieve the infinite scroll effect on this , as you can see in the codepen the text starts from position, so instead of that I want to remove that start or end , just scroll all time.
12 replies
KPCKevin Powell - Community
Created by ahmd shajmeer on 12/28/2024 in #front-end
Infinite Scroll text behind and infront of a image
No, I cleared all the code am trying to do again from the scratch, so if you have any idea how do you approach this design like how many div tags or something
12 replies
KPCKevin Powell - Community
Created by ahmd shajmeer on 8/26/2024 in #front-end
What causing the overflow of navbar after deployment?
It helped thanks, but I am really curious why it isn't showing while developing and only after deployed.
5 replies