Skip to content
This repository was archived by the owner on Sep 4, 2025. It is now read-only.

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

Draft
dayvidpham wants to merge 3 commits into
CSSS:mainfrom
dayvidpham:tabs
Draft

feat: Open Pseudo-tabs for the currently opened page#12
dayvidpham wants to merge 3 commits into
CSSS:mainfrom
dayvidpham:tabs

Conversation

@dayvidpham

Copy link
Copy Markdown

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

@micahdbak micahdbak left a comment

Copy link
Copy Markdown
Collaborator

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

Comment thread .envrc
@@ -0,0 +1 @@
use flake .

Copy link
Copy Markdown
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
Copy Markdown
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
Copy Markdown
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.

Comment thread src/App.js
setView(searchParams.get('view'));
}
}, []);
const searchParams = new URLSearchParams(window.location.search);

Copy link
Copy Markdown
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
Copy Markdown
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 subscribe to this conversation on GitHub. Already have an account? Sign in.

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