New with react here. I love the defi world so I'm trying to fork the PancakeSwap frontend from GitHub.
I already figure out how to add my own styling to it, changed de menu items, etc. The only problem I have, is I cant figure out how to change the href of the icons on the footer (Twitter and Telegram).
Anyone can help me? Probably is very easy but I am stuck.
Thanks!
In my case, I just had to hide the entire footer to hide those links. There is one more suggestion which can solve your problem to some extend.
On the file views/App.tsx,
you may remove the Menu call.
This removes the header and footer from the pages. But it is easy to reconstruct a new custom Menu like headerbar with the UIKit.
I have searched across the files and I was able to hide only the footer links and not the social icons.
The footer links can be hidden by not passing footerlinks on the Menu component at ./components/Menu/index.tsx:
return (
<UikitMenu
.
.
// footerLinks={footerLinks(t)}
.
.
/>);
Or, you may use the Menu component from a UIKit fork at https://github.com/nguyenphu27/pancake-toolkit-testnet. The previous builds was not having a footer and hence this UIKit is not having a footer.
Sorry, I was not able to find a perfect solution within the same UI library.
Related
I am making a react js application. Within this application i understand i have a tag inside a tag like so:
<a><a></a></a>
I have located the issue in hand as you can see in these pictures. But I am unable to fix the problem. If anyone could give me a hand i would be very thankful.
The commented out code is where i am having my issue. As you can see i have a Link tag and inside that Link tag i have a Dropdown tag. The Dropdown is causing the issue but it is needed for my application.
Edit:
I understand an a-tag cannot live inside another a-tag, i have tried a few different ways to to get the full use of the dropdown and the link. As you can see in these new pictures i am trying to get the card to be a link to a group while also having a dropdown with two options, Edit and Delete.
This is what the card looks like, the three dots is the dropdown menu. when this card is clicked it brings me to the "/group/manage/" page.
This is what the card looks like with the dropdown menu clicked.
I recommend restructuring your component in a way similar to this:
<Card>
<Link>
{mainContent}
</Link>
<Dropdown>
{dropDownItems}
</Dropdown>
</Card>
Then use CSS to position the dropdown to the top right, on top of the main content.
I am new to React. Basically, I have been given a HTML Bootstrap template. It is pretty simple... a left sidebar (always present), an adjacent menu (always present) and all other components fit adjacent to side bar and under menu. I have attached a pic so you can easily see what I mean.
I can display the components but my dynamic components or the components that change are rendered below the sidebar and NOT next to it.
I have tried to solve this issue for days... no luck. Help would be greatly appreciated.
Thank you
Vincent
It seems like a css issue, make sure you have your child divs inside the parent and nothing is position absolute. if you have it online I can take a look.
I'm trying to have a simple bar in which I will put a logo, and below, a drawer. The problem is when I open the drawer, the simple bar moves with it. Besides, I can see the logo text is hidden by drawer.
I've tried to add zIndex to the simpleBar but it doesn't work. I'm really not familiar with react and material ui so don't see how to fix my problem.
Here's my codesandbox https://codesandbox.io/embed/sharp-browser-lsolr?fontsize=14 , if anyone can help.
I'm sorry, when clicking on my codesandbox, you'll see an error I don't get 'cause my code comes from material-ui and I don't see what the problem is.. Just click on the cross to close it.
Many thanks in advance !
Try this: https://codesandbox.io/s/sad-matsumoto-c84r8
The SimpleAppBar component was removed, and the MiniDrawer component which already has an AppBar has been modified so that everything looks right and you can put your logo where you want it.
I've built out a react data grid. I've added the sortable optional feature and on my system is working with the sort icon(s) rendering to the right of the header text, which is how I'd prefer it.
Others in my group have pulled my code when they run it the sort icon is rendered to the left of the header text (I'm assuming somehow inserting the pull-left style to the icon span).
I can find no information that outlines how exactly this can be controlled, or why it would work differently from one system another.
Hopefully someone is still using this component that can shed some light on this.
You should be able to target the icon and override with CSS. If you inspect the element in Dev tools, it will tell you the classname of the icon. Use CSS to move its position.
I am trying to use navigation images on left as well right of <super-navbar> but it is stated in the official documentation, that only text is supported in super-navbar buttons. But there must be some way around to do this. Below is my code, where I want to place images instead of text:
<super-navbar>
<super-navbar-button side="left" id="hamburger" onclick="supersonic.ui.drawers.open()">Menu</super-navbar-button>
<super-navbar-title>MyApp</super-navbar-title>
<super-navbar-button side="right">Search</super-navbar-button>
</super-navbar>
Instead of "menu" text I want to have hamburger type icon or png image at least. Same for search text.
Thanks.
This can be accomplished right now by removing the <super-navbar> section and writing your own html header.
If you look in the layout file for your project there is an import statement as you mentioned:
<link rel="import" href="/components/supersonic/components/import.html">
There is a section that states:
* #name super-navbar-button
* When used inside theelement, creates a button that will be displayed on the navigation bar. Only text content is supported for the button title.
Support for icons has been requested. You can subscribe to their github to get notifications of issues. https://github.com/AppGyver/steroids
One work around to be able to keep using <super-navbar> and have icons is to use something like this which will render as ≡
<super-navbar-button ng-click="toggleMenuDrawer()">
≡
</super-navbar-button>
They have a good forum on Muut as well. This issue is most likely related to trying to add icons in the <super-navbar>. I experienced a disappearing navbar after trying to add markup: <i class="icon super-search"></i>
It works in the main content area, but makes the navbar behave differently when nested in a <super> element.