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.

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

Sidebar Removal and Design Centering #113

Open
11 tasks
JosueBrenes opened this issue Dec 11, 2024 · 45 comments
Open
11 tasks

Sidebar Removal and Design Centering #113

JosueBrenes opened this issue Dec 11, 2024 · 45 comments

Comments

@JosueBrenes
Copy link
Contributor

Sidebar Removal and Design Centering

Description

Remove the sidebar from app/house/page.tsx and app/page.tsx, clean related styles, and update layouts to center content while maintaining responsiveness. Test across screen sizes to ensure proper alignment, spacing, and navigation functionality, with no visual regressions or layout shifts.

Overview

Remove sidebar component and center design layout in main views:

  • app/house/page.tsx
  • app/page.tsx

Current State

The sidebar is currently present in main views, taking up space and affecting the centered layout of content.

![Current sidebar layout](reference image shows sidebar on left)

Required Changes

Files to Modify

app/
├── house/
│   └── page.tsx
└── page.tsx

Sidebar Removal

  • Remove sidebar component import from both pages
  • Remove sidebar component from JSX structure
  • Clean up any sidebar-related styles and dependencies

Layout Centering

  • Update main container width to use full available space
  • Add proper margin/padding for centered content
  • Adjust grid/flex layouts for proper content alignment

Acceptance Criteria

  • Sidebar completely removed from both views
  • Content properly centered in viewport
  • Responsive design maintained
  • No layout shifts when navigating between pages
  • Maintains consistent spacing and alignment

Testing Requirements

  • Test across multiple screen sizes
  • Verify navigation functionality
  • Check content alignment and spacing
  • Ensure no visual regressions

Additional Notes

  • Consider impact on responsive breakpoints
  • Update any related documentation
  • Review accessibility implications
@Ibinola
Copy link
Contributor

Ibinola commented Dec 12, 2024

I'm a frontend developer with experience using React, Next.js and TypeScript. I’m a first time contributor to SafeTrust, and would love to tackle this issue.

Relevant experience contributing to open-source projects where I used the technologies mentioned above (Pear AI and SpotNet). 

Would love to tackle this!

Plan for Tackling the Issue

  1. Remove and clean up any sidebar related content
  2. Ensure the main content uses the available spaces and is properly aligned

@mimisavage
Copy link
Contributor

May I pick this up?

@Ayoazeez26
Copy link

I will remove the sidebar as instructed and update layouts to center content while retaining responsiveness. I will test across various screen sizes using the developer webtools to ensure proper alignment, spacing and navigation functionality. I will make sure I cleanup the code and remove unnecessary imports of the sidebar component before making PR. I will make sure all acceptance criteria are met and I test my implementation before making my submission
ETA - 2 days.

@Superior212
Copy link

Hey! I'm Superior,
I'm a member of BuidlGuidl and have contributed to various projects such as:
CoinSafe
Web3Bridge
GuildAudit
I haven’t contributed to any OnlyDust projects yet, but I’m eager to use my experience to make a strong impact on this task.
Plan to Solve the Issue:
Study the Codebase: I’ll review the existing structure and functionality to understand the current implementation.
Understand the Problem: I’ll carefully read the issue details to comprehend the task at hand fully.
Leverage Resources: I’ll utilize any provided resources or references within the issue to guide my solution.
Seek Clarifications: If I encounter challenges, I’ll ask questions in the Telegram group to ensure steady progress.
Submit PR: Once the solution is implemented, I’ll open a pull request and await your feedback.
I’m excited to contribute and am confident in my ability to solve this issue effectively!

@josephchimebuka
Copy link

Can I take this issue?

@Steph3097
Copy link

Hello! Im Sttef,
I'm part of dojo coding team and I’d love to contribute on this issue! With my background in front-end development, I’ll make sure the content is centered and well-organized. Here’s how I’ll tackle the task:
-I’ll completely remove the sidebar from both pages and clean up any unnecessary styles to keep the code neat and maintainable.
-I’ll update the layout to ensure the content is centered.
-Check that everything is working as expected
Thank you for your time and consideration!

@0xdevcollins
Copy link
Contributor

0xdevcollins commented Dec 12, 2024

Can I work on this, please?

I am a Full Stack Blockchain Developer with proficiency in Solidity/Rust, Next.js, TypeScript, React, and Node.js. I've demonstrated my ability to adjust to a variety of requirements, perform well under pressure, and reliably produce user-centric blockchain solutions with 46 significant contributions spread over 12 OnlyDust projects.

@khayss
Copy link

khayss commented Dec 12, 2024

Let me handle this issue!

I am a fullstack developer. I can work on frontend applications using ReactJS, NextJS, TypeScript, TailwindCSS and vanilla CSS.

@melnikga
Copy link

melnikga commented Dec 12, 2024

Can I contribute to this one?
Hi, my name is Georgiy, I'm a fullstack blockchain developer. I have extensive experience in developing tools for Starknet, and I've participated in almost all ODHacks, during which I worked on many projects. My OnlyDust profile: https://app.onlydust.com/u/melnikga

@SudiptaPaul-31
Copy link

Would love to work on this issue

I'm a fullstack and blockchain developer with experience this field for more than 1.5 years and had worked on previous session of odhack my profile:(https://app.onlydust.com/u/SudiptaPaul-31)

@emmz3230
Copy link

hi
I am a front-end web developer with skills like HTML, CSS, JavaScript, React.js, and Next.js.
I have experience writing code for websites and web apps.
I would love to remove the sidebars and make the design layout centered and responsive for all devices by testing it first in my local system and browser from the 320px to the larger device.
Thanks, I will love to contribute to this project.

@A6dulmalik
Copy link
Contributor

Can I start working on this? My name is Abdulmalik A. a front-end developer conversant with react, java script, typescript and css/tailwind css. I am a new contributor and would like to work on this.

@Kachimercy1
Copy link

Could I take on this issue?

@DanielEmmanuel1
Copy link

Can I attempt this issue?

I will remove the sidebar component from the app/house/page.tsx and app/page.tsx files, clean up any related styles and dependencies, and then update the main container width to use the full available space. I will adjust the grid or flex layouts as needed to properly center the content while maintaining responsiveness across different screen sizes.

@Michaelkingsdev
Copy link
Contributor

Is it okay if I tackle this?

@martinvibes
Copy link

i'm a frontend dev and blockchain dev
i would love to work on this and get it done
I’m interested in this one.
kindly assign

@lauchaves
Copy link
Contributor

Hey! I'm Lau Chaves, I have been contributing to this project and would like to keep doing so I would like to contribute to this issue!
I have over 5 years of experience with JavaScript, ReactJS,React Native TypeScript, and Ruby. I’m now enthusiastic about web3 and eager to learn more! I’m also a member of Dojo Coding Costa Rica.

For this one Id make sure I follow the steps mentioned, its responsive, Id remove the sidebar and center the content :)

@0xdevcollins
Copy link
Contributor

Could I try solving this?

My Background
I am a Full Stack Blockchain Developer with proficiency in Solidity/Rust, Next.js, TypeScript, React, and Node.js. I've demonstrated my ability to adjust to a variety of requirements, perform well under pressure, and reliably produce user-centric blockchain solutions with 46 significant contributions spread over 12 OnlyDust projects.

@emarc99
Copy link

emarc99 commented Dec 12, 2024

I’d like to resolve this. I will build/test. I have 2 years nextjs, tailwind, eslinting, and react vite.

@System625
Copy link

Hi! I'm Olamiposi, a frontend developer experienced with Next.js and responsive layout implementations. I've worked extensively with Tailwind CSS and have successfully completed similar layout restructuring tasks in production applications.

Proposed Solution:

  1. Remove sidebar components and clean up imports in both page files
  2. Implement centered layout using Tailwind's utility classes (max-w-7xl, mx-auto)
  3. Add responsive padding/margin system for proper spacing
  4. Update container structure to maintain content alignment
  5. Test across multiple breakpoints (mobile, tablet, desktop)
  6. Document layout changes and verify navigation functionality

ETA: 1-2 days, including:

  • Day 1: Implementation and initial testing
  • Day 2: Cross-browser testing, responsive checks, and PR submission

I've reviewed the current implementation and can ensure a smooth transition to the centered layout while maintaining responsiveness and proper spacing.

@Ekene001
Copy link

Hello I'm Ekene, a frontend and blockchain developer, and I’m new to the OnlyDust platform. This is my first time contributing to this repository, and I’m excited about the opportunity to collaborate and bring my skills to the table.

how I'll tackle this task:

I will remove the sidebar from the app/house/page.tsx and app/page.tsx files and clean up any related styles to streamline the layout. I will then update the designs to ensure the content is centered while maintaining responsiveness. Once the layouts are updated, I will test them across various screen sizes to verify alignment, spacing, and navigation functionality. Finally, I will confirm there are no visual regressions or layout shifts, ensuring the design remains clean and user-friendly.

@7-falseparfait
Copy link

Mind if I take this issue?

I am a Front-end and Smart Contract Developer skilled in Tailwind CSS, Next.js, TypeScript, and JavaScript, with a strong focus on creating responsive and accessible layouts. I also have experience in refining and documenting codebases to ensure clarity and maintainability. I would be thrilled to take on this task, removing the sidebar and centering the design layout while maintaining responsiveness and ensuring no visual regressions.

@JoelVR17
Copy link
Contributor

Request to Work on Sidebar Removal and Design Centering Issue

Hello, team!

I would like to take on the task of removing the sidebar from app/house/page.tsx and app/page.tsx, centering the design layout, and ensuring responsiveness across screen sizes.

Plan of Action:

  • Sidebar Removal: Remove the sidebar component and clean up any related styles and dependencies.
  • Layout Updates: Update the layout to properly center content while maintaining spacing and alignment.
  • Testing: Test thoroughly across different screen sizes to verify responsiveness and avoid any visual regressions.
  • Functionality: Maintain navigation functionality and address any potential accessibility concerns.

If approved, I will provide a detailed pull request with clear documentation of the changes. Let me know if there are any additional considerations or expectations for this task.

Thank you!
Joel Vargas

@aniruddhaaps
Copy link

to address this issue, I would remove the sidebar component and related styles from app/house/page.tsx and app/page.tsx. Update layout styles to center content using responsive flex or grid layouts. Test across various screen sizes to ensure proper alignment, spacing, and navigation without layout shifts or regressions. Confirm consistency with accessibility and design standards.

@wugalde19
Copy link

Hi team,
I’m William from Costa Rica 🇨🇷 and a member of the Dojo Coding community.
I am interested in contributing to this issue and believe my skills and background make me well-suited for the task. I’ve worked over 7 years as a Full-Stack engineer in several technologies including the ones used on this project, Typescript mostly on web3 projects that I’ve contributed in both Hackathons and OD Hacks

Profiles:
https://app.onlydust.com/u/wugalde19
https://github.com/wugalde19

As mentioned in the requirements I'll modify app/house/page.tsx and app/page.tsx files only to remove sidebar and all related code to that functionality. Also, refactor the code a little bit to implement grid/flex layouts to make it easier to center the content and make it look good on different viewports

@ONEONUORA
Copy link

Can I take this from here? I am a full stack and blockchain developer. ETA 24 hours

@3th-Enjay
Copy link

Let me try this one!

@Luluameh
Copy link

Hi, I’m a frontend developer with experience in TypeScript and responsive design. I’ve reviewed the requirements for the Sidebar Removal and Design Centering issue and am confident I can implement the necessary changes to improve the layout and responsiveness.

Plan to Solve the Issue:

Sidebar Removal:

Remove the sidebar component import and its JSX structure from both app/house/page.tsx and app/page.tsx.
Clean up any related styles, dependencies, or unused code that is associated with the sidebar.
Layout Centering:

Update the main container width to use the full available space after the sidebar removal.
Adjust margins and padding to center the content within the viewport while ensuring responsiveness.
Modify grid or flex layouts to ensure proper alignment of content across screen sizes.
Testing and Validation:

Test the updated layout across multiple screen sizes to ensure proper alignment, spacing, and no layout shifts.
Verify that navigation functionality is intact and that the content remains centered without visual regressions.
Ensure the design remains responsive and maintains consistent spacing.
Additional Considerations:

Account for any responsive breakpoints to maintain a smooth layout experience on all devices.
Review any accessibility implications, such as ensuring proper focus management and navigation.
Update related documentation if necessary.
Estimated Completion Time: 2 days

@fabrobles92
Copy link

Hello Fab here,
I am a Dojo Coding member and working as Full Stack full time with experience in React, Next and Vue.

I think this is easily doable by deleting the described elements and then centering using flexbox, then test this is compatible with different screen sizes following the standards breakpoints for different devices.

Would love to do my 1st contrib to this project :)

@kayceeDev
Copy link

kayceeDev commented Dec 12, 2024

Hi everyone,
I am a software engineer with over 3 years of experience in frontend and backend technologies.
After looking at the issues and reading through the requirements, here is how I will approach the issue.t

I will fork and clone the repository to my local machine.
Then install the necessary dependencies.
checkout to a new branch
Locate the app/house/page.tsx and app/page.tsx, , already created to start working on the issue.
I will leverage my tailwind, Reatjs, typescript, CSS, and frontend skills to ensure that the sidebar is removed completely and all related styles are cleaned completely.
I will update the relevant layout and center contents.
I will make sure they are responsive with proper alignment on all devices by testing extensively.
I will add and commit my changes.
Pull and rebase from upstream before pushing to my forked repository
Lastly create A pull request with a good summary and title as expected in the contribution guide.
My ETA is 8hrs to 10hrs maximum.

@Supa-mega
Copy link

Is it okay if I tackle this?

@Jonatan-Chaverri
Copy link

Hi! Can I work on this?

@CoderPrime99
Copy link

Hi! I'm Carlos, a Software Developer with over 2 years of experience. I've worked with C++, Java, and JavaScript, and I'm excited to make my first contribution to OnlyDust. It would be great to contribute to the project's sucess, I am also part of Dojo Coding.

I would start by opening app/house/page.tsx and app/page.tsx to remove the sidebar component, including its import and usage in the JSX. After that, I’d go through the styles to delete any code related to the sidebar. Then, I would adjust the layout by centering the main content using flexbox or grid, ensuring the design looks good on all screen sizes. I’d test the pages on different devices to check alignment, spacing, and navigation. Finally, I’d make sure everything works smoothly without layout issues and update any necessary documentation.

@kimcascante
Copy link

I'm Kimberly Cascante, a proud member of Dojo Coding! ⛩️
I have previously worked with TypeScript, including implementing conditional logic to disable buttons based on specific criteria. I'm passionate about design and frontend development and excited to contribute to this project.
My plan is to start by reviewing the code, sidebar, then proceed to remove it and update what is needed, test the solution, and prepare a PR for review.
I value clear communication and constructive feedback, as I believe they are key to collaborative success.
Happy to contribute!

@pablomadrigal
Copy link

I'm Pablo Madrigal.

I'm a Fullstack Developer with more than 5 years of experience primary on React and Node.js and now learning web3, I'm also part of Dojo Coding ⛩️

Problem

Sidebar Removal and Design Centering

Solution

I would modify this components to remove the sidebar

  1. app/house/page.tsx
  2. app/page.tsx

Steps

1. Modify the selected routes to remove the sidebar

Modify the file app/page.tsx to render the sidebar component only in the pages that is required, creating a new prop needSidebar initialized as true and pass it ass false on the required components

2. Modify the pages to center the layout of content

Modify the files on

  1. app/house/page.tsx
  2. app/page.tsx

to be centered using Tailwind

4. Review the Acceptance Criteria

Make sure the PR is ready with the Acceptance Criteria given by the issue

  • Sidebar completely removed from both views
  • Content properly centered in viewport
  • Responsive design maintained
  • No layout shifts when navigating between pages
  • Maintains consistent spacing and alignment

@ShantelPeters
Copy link

I’d like to help with this.

@Amarjeet325
Copy link

Can I take care of this issue?

@vestor-dev
Copy link

hey sir i would love to work on this issue
i'm a blockchain dev and i would love to handle this issue
assign me and i'll get to work

@Jagadeeshftw
Copy link

Hi,
I’d love to work on this issue as I have strong experience in building and managing APIs, handling server-side operations, and ensuring robust back-end performance.
Please assign this to me, and I’ll deliver a secure and high-quality PR within 12-24 hours.

@1nonlypiece
Copy link

Could I try solving this?

@TheSQLguy
Copy link

i am new to open-source
To address this issue, I would remove the sidebar component and related styles from app/house/page.tsx and app/page.tsx. Update layout styles to center content using responsive flex or grid layouts. Test across various screen sizes to ensure proper alignment, spacing, and navigation without layout shifts or regressions. Confirm consistency with accessibility and design standards.

@SimplementeCao
Copy link

Hi, I'm Leandro, Front-end developer.
I would solve the issue first by reviewing the code and adjusting to the component-based development guideline to maintain consistency and scalability of the project.
Estimated delivery time: 20 hours.

I have contributed before to other projects like:

Cairo Book
Starknet Book
Starknet Docs
Starknet Security Challenges Factory
Starkane

Can I work on this issue?

Check my OnlyDust, I've contributed to many projects: OnlyDust Profile,
and my GitHub

@Jemiiah
Copy link

Jemiiah commented Dec 12, 2024

Hello Jeremiah I'm a frontend developer in web3 I have contributed to previous OD hacks. i have made over 85+ contribution in past OD Hacks Here's my OD Hack profile: https://app.onlydust.com/Jemiiah I intend to solve this issue with the following approach:

@brolag
Copy link
Contributor

brolag commented Dec 12, 2024

I've been working in maintaining code bases for several years. My plan for this task is to remove the desired sidebar component and check with manually and with AI that there are no more leftovers of the component. After that proceed to center the layout to a smooth responsive transition.

@Yunusabdul38
Copy link

May I be assigned to this?
I have solid experience in both web2 and web3 and have contributed to open-source projects that ended up being merged both on web2 and web3
will be glad to work on this as my first contribution to this project

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests