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

feat: Open Pseudo-tabs for the currently opened page #12

Draft
wants to merge 3 commits into
base: main
Choose a base branch
from

Conversation

dayvidpham
Copy link

Resolves #8. I've got a minimally working example working right now. This is what it looks like:

Wide screen layout

image

Small screen layout

image

* Incorrect version of npm though
* Had to hardcode some margin/padding values to work around Navbar
@micahdbak micahdbak self-requested a review May 15, 2024 18:50
Copy link
Collaborator

@micahdbak micahdbak left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm happy to merge these changes if you're happy with them, David! I'm going to start a new PR using React Router's HashRouter

@@ -0,0 +1 @@
use flake .
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yippee the nix stuff!!


import pythonIcon from '../images/python.png';

export const TabBar = ({ view }) => {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm happy with this implementation; thanks!

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Assuming I use HashRouter as I commented in the related issue, maybe "view" can be renamed to "filename". Then it can be up to the router to describe what is put in the TabBar.

setView(searchParams.get('view'));
}
}, []);
const searchParams = new URLSearchParams(window.location.search);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll update this stuff in a new PR for using the HashRouter, but thanks for looking into why it sucks 😎

@micahdbak
Copy link
Collaborator

Hi David, I've merged a hash routing feature - could you test that it resolves your concerns? I've put routing under src/index.js, and I think you can use the useLocation hook from react-router-dom to display the current location in the tabs. Also, could you rename this component from 'TabsBar' to 'NavTabs' or 'NavTabsBar'? I'm going with a 'NavX' naming convention for all navigation components.

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

Successfully merging this pull request may close these issues.

Pseudo-tabs for the currently opened page
2 participants