Semantic-UI is probably the only Modern UI that does not offer Responsive Navigation Bar. &nbsp;<figure class="image"><img src="https://images.unsplash.com/photo-1584714268709-c3dd9c92b378?ixlib=rb-1.2.1&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=1080&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjE1NDAxMH0"><figcaption>Photo by <a target="_blank" rel="noopener noreferrer" href="https://unsplash.com/@thenewmalcolm?utm_source=DNX&amp;utm_medium=referral">Obi Onyeador</a> on <a target="_blank" rel="noopener noreferrer" href="https://unsplash.com/?utm_source=DNX&amp;utm_medium=referral">Unsplash</a></figcaption></figure><blockquote>Neither Semantic UI nor Semantic UI React offer a responsive navbar, however, it&nbsp;can be implemented easily. It can be more complicated, but you can create really flexible markup.</blockquote>The quote above is from Semantic-UI “Responsive” <a target="_blank" rel="noopener noreferrer" href="https://github.com/Semantic-Org/Semantic-UI-React/blob/master/docs/src/layouts/HomepageLayout.js">HomePageLayout</a> example code. It's way too complicated and hard to use in my opinion. I believe they can do better, but no sure why they came up with this cumbersome solution using “Menu”, “Sidebar”, and “Visibility” components along with the third party Media/Device detection package, like, “mobile-detect” in the version &lt; 1.0.0 (BTW, there was actually a bug in their old example, and I have a fixed version <a target="_blank" rel="noopener noreferrer" href="https://deniapps.com/playground/home">here</a>,) and then “@artsy/fresnel”. &nbsp;As I see they have two sets of layout, and then based on the Media/Device to render one of them either from Client Side (browser) or Server Side (SSR.)As I see, the responsive navigation bar could be achieved purely by CSS styles based on Media Queries. If we have only render one set of layout, then there is no need to worries about the SSR issue.I was about the switch to Bootstrap due to this limitation, but I do love everything else about Semantic UI, so I did the research online, and came up, which I think, &nbsp;a much better solution. You could see from this website, or from the<a target="_blank" rel="noopener noreferrer" href="https://deniapps.com/playground/dna-rn"> demo page</a>.If you are using Semantic-UI-React, then you may give it a try. I created the NPM package: <a target="_blank" rel="noopener noreferrer" href="https://www.npmjs.com/package/dna-responsive-nav">dna-responsive-nav</a> to help you integrate it easily.&nbsp;

Semantic-UI is probably the only Modern UI that does not offer Responsive Navigation Bar. I created the NPM package: dna-responsive-nav to fix this limitation. If you are using Semantic-UI-React, then you may give it a try. 

Responsive Navigation Bar For Semantic-UI

The blog system of DeniApps has a field named Tags. When writing a new post, I can either create a new one or choose the existing one. As more tags were added into the system, one day, I found that I could not find the tag 'React' which I am pretty sure is in the system. I looked into this issue and realized that the Tags dropdown options are populated when the page is rendered. Due to the default pagination size of FeathersJS, only 10 records are fetched. Since I have way more than 10 tags in the system, not all tags are available.&nbsp;<figure class="image"><img src="https://images.unsplash.com/photo-1608556984766-105e2dc59706?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=MnwxNTQwMTB8MHwxfHNlYXJjaHw5fHxzZWxlY3Rpb258ZW58MHx8fHwxNjM0NTE4MzE4&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=1080"><figcaption>Photo by <a target="_blank" rel="noopener noreferrer" href="https://unsplash.com/@claybanks?utm_source=DNX&amp;utm_medium=referral">Clay Banks</a> on <a target="_blank" rel="noopener noreferrer" href="https://unsplash.com/?utm_source=DNX&amp;utm_medium=referral">Unsplash</a></figcaption></figure>One simple solution is increasing the page size, but I would like to do something better. Semantic UI Dropdown supports a prop named <code>onSearchChange</code>, where we can create a handler to call the backend API to get the real-time options based on the search query.&nbsp;<h3>Semantic UI Dropdown</h3>Here is the fronted change I made in the Dropdown Component:<pre><code class="language-javascript" id="ZlZ_sZVtM">&lt;Dropdown
 placeholder={props.placeholder || "Please choose"}
 name={props.name}
 selection
 search
 options={props.options}
 multiple
 value={props.value ? props.value : []}
 allowAdditions
 onChange={handleDropdownChange}
 onSearchChange={handleSearchChange}
 onAddItem={handleAddition}
/&gt;;

const handleSearchChange = (event, search) =&gt; {
 if (props.handleSearchChange) {
 props.handleSearchChange(search.searchQuery);
 }
};</code></pre>As you see, the handleSearchChange will pass the searchQuery to the function in the parent component:<pre><code class="language-javascript" id="PnxHjXEum">handleSearchChange = (kw) =&gt; {
 this.debounceFun(kw);
};

debounceFun = _.debounce(async (kw) =&gt; {
 console.log(kw);
 const ret = await searchTags(kw);

 const matchedTags = ret.data;
 const tagsInputOptions = matchedTags.map((item) =&gt; ({
 value: item.slug,
 text: item.name,
 key: item._id
 }));
 const newAllOptions = {
 ...this.state.allOptions,
 tags: tagsInputOptions
 };

 this.setState({ allOptions: newAllOptions });
}, 500);</code></pre>Nothing special here, but I use lodash.debounce to prevent too many requests from killing the backend server.<blockquote>Creates a debounced function that delays invoking <code>func</code> until after <code>wait</code> milliseconds have elapsed since the last time the debounced function was invoked. The debounced function comes with a <code>cancel</code> method to cancel delayed <code>func</code> invocations and a <code>flush</code> method to immediately invoke them. Provide <code>options</code> to indicate whether <code>func</code> should be invoked on the leading and/or trailing edge of the <code>wait</code> timeout. The <code>func</code> is invoked with the last arguments provided to the debounced function. Subsequent calls to the debounced function return the result of the last <code>func</code> invocation.</blockquote>Learn more about <a target="_blank" rel="noopener noreferrer" href="https://lodash.com/docs/4.17.15#debounce">debounce</a>.The <code>searchTag</code> function is like below:<pre><code class="language-javascript" id="Qi-saLYwn">const searchTags = (kw) =&gt; {
 return agent({
 method: "get",
 url: "/tags/?$search=" + encodeURIComponent(kw),
 });
};</code></pre>Note agent is the wrapper of API calls, here is the <a target="_blank" rel="noopener noreferrer" href="https://github.com/deniapps/nextfeathers/blob/master/next/lib/agent.js">source code.</a> And the “<code>/tags/?$search</code>” is the API endpoint.<h3>FeathersJS Search API</h3>The DeniApps Blog system uses FeathersJS as a backend with MongoDB. To implement the search function, I use <a target="_blank" rel="noopener noreferrer" href="https://www.npmjs.com/package/feathers-mongodb-fuzzy-search">‘feather-mongodb-fuzzy-search’</a>, which supports both ‘full-text’ search and ‘filed pattern’ matching. For the tags search, I use the latter. - For example, when I type in ‘r’, I would expect any tags whose name starts with ‘r’, like ‘react’ returned. To implement this.<ul><li>add whitelist to enable some special params in src/servcies/tags/tags.service.js</li></ul><pre><code class="language-javascript" id="W2jMo556M">module.exports = function (app) {
 const options = {
 Model: createModel(app),
 paginate: app.get("paginate"),
 whitelist: ["$populate", "$text", "$search", "$regex"],
 };

 // Initialize our service with any options it requires
 app.use("/tags", new Tags(options, app));

 // Get our initialized service so that we can register hooks
 const service = app.service("tags");

 service.hooks(hooks);
};</code></pre><ul><li>add search hook in src/services/tags/tags.hook.js</li></ul><pre><code class="language-javascript" id="Lpgf7VQHZ">const search = require("feathers-mongodb-fuzzy-search");

module.exports = {
 before: {
 all: [],
 find: [search({ fields: ["name", "slug"] })],
 ...</code></pre><ul><li>mutate param.query in src/services/tags/tags.class.js</li></ul>I thought this should be handled by search hook, but I got this error because I mutated the param.query.<blockquote>error: MongoError: unknown top level operator: $regex. If you have a field name that starts with a '$' symbol, consider using $getField or $setField.</blockquote>And then, I found that the query after search hook is something like:<pre><code class="language-javascript" id="6lrRMbtGv"> query: { '$regex': /r/i },</code></pre>By look into MongoDB doc, the correct syntax should be:<pre><code class="language-javascript" id="f5Eo_zxIg">{ &lt;field&gt;: { $regex: /pattern/&lt;options&gt; } }</code></pre>So I have to update the query in tags.class.js as below:<pre><code class="language-javascript" id="Q9wy3YmU-">exports.Tags = class Tags extends Service {
 async find(params) {
 if (params.query.$regex) {
 params.query = {
 name: params.query,
 };
 }
 return super.find(params);
 }
};</code></pre>Note: <code>name</code> is the field of tags table, where I would like to search for.

In this article, I show you how I implemented the tags function using remote data. The frontend is done by the Semantic UI Dropdown component and the backend is implemented using FeathersJS with Mongodb. 

Semantic UI Dropdown with Remote Data

Semantic UI's table component is not quite mobile-friendly even with the stackable option. Actually, there is no standard way to make a stable responsive. A horizontal scrollable table is often being used, but if you like a stackable way, and with a table header as a label on each row, then in this article, I will show you how to do it using existing Semantic UI's table component with some small changes.<figure class="image"><img src="https://images.unsplash.com/photo-1513542789411-b6a5d4f31634?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=MnwxNTQwMTB8MHwxfHNlYXJjaHw4fHxyZXNwb25zaXZlfGVufDB8fHx8MTY0OTAyMjIwNA&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=1080"><figcaption>Photo by <a target="_blank" rel="noopener noreferrer" href="https://unsplash.com/@jessbaileydesigns?utm_source=DNX&amp;utm_medium=referral">Jess Bailey</a> on <a target="_blank" rel="noopener noreferrer" href="https://unsplash.com/?utm_source=DNX&amp;utm_medium=referral">Unsplash</a></figcaption></figure><blockquote>here is a <a target="_blank" rel="noopener noreferrer" href="https://deniapps.com/playground/responsive-table">demo</a></blockquote>First of all, let's disable the stackable, i.e. use “unstackable” instead., and then add “data-label” attribute to the table cell. which is corresponding to the table header. And the sample HTML code like below:<pre><code class="language-html" id="3xiOTigIt"> &lt;Table celled unstackable striped className="dnxTable"&gt;
 &lt;Table.Header&gt;
 &lt;Table.Row&gt;
 &lt;Table.HeaderCell&gt;Header1&lt;/Table.HeaderCell&gt;
 &lt;Table.HeaderCell&gt;Header2&lt;/Table.HeaderCell&gt;
 &lt;Table.HeaderCell&gt;Header3&lt;/Table.HeaderCell&gt;
 &lt;/Table.Row&gt;
 &lt;/Table.Header&gt;

 &lt;Table.Body&gt;
 &lt;Table.Row&gt;
 &lt;Table.Cell data-label="Header1"&gt;Cell&lt;/Table.Cell&gt;
 &lt;Table.Cell data-label="Header2"&gt;Cell&lt;/Table.Cell&gt;
 &lt;Table.Cell data-label="Header3"&gt;Cell&lt;/Table.Cell&gt;
 &lt;/Table.Row&gt;
 ...
 &lt;/Table.Body&gt;
 &lt;/Table&gt; </code></pre>Next, we need to add some CSS, which is applied to the small screen only.<pre><code class="language-css" id="nEz4fULEL">@media only screen and (max-width: 767px) {
 table.dnxTable {
 border: none !important;
 }
 
 table.dnxTable th,
 table.dnxTable td {
 padding: 1em 0.5em;
 position: relative;
 }

 table.dnxTable tr,
 table.dnxTable td,
 table.dnxTable tfoot {
 display: block !important;
 width: 100%;
 }

 table.denxTable tbody tr {
 border-top: 1px solid rgba(34, 36, 38, 0.1);
 }

 table.denxTable tfoot tr {
 border: none !important;
 }

 table.dnxTable td {
 border-top: none !important;
 border-left: none !important;
 }
 
 table.dnxTable tbody tr {
 padding: 0.25em 0;
 border: 1px solid rgba(34, 36, 38, 0.2);
 }

 table.dnxTable tbody tr:not(:last-child) {
 margin-bottom: 0.25em;
 }

 /** important1: hide theader **/
 table.dnxTable thead {
 display: none !important;
 }

 table.dnxTable tbody td {
 padding: 0.3em 0.5em 0.3em 7.5em !important;
 }

 .dnxTable td:not(:last-child) {
 border-bottom: 1px solid rgba(34, 36, 38, 0.1);
 }

 /** important2: use data-label attribute as a table header **/
 table.dnxTable tbody td:before {
 content: attr(data-label);
 left: 0.5em;
 position: absolute;
 top: 0.15em;
 font-weight: bold;
 text-overflow: ellipsis;
 white-space: nowrap;
 width: 6em;
 overflow: hidden;
 }
}</code></pre>As the comments in the CSS code able, there are two important things:<ol><li>Hide the regular table header, because the table cells are stacked, and we show the corresponding table header at the beginning of the cell content.&nbsp;</li><li>Use the <code>data-label </code>attribute as the content of <code>td:before</code>.&nbsp;</li></ol><blockquote>td.before has “absolute” position, so it does not auto-wrap. In the case, the header is very long, I use &nbsp;ellipsis to hide the overflow part. And the width: 6em need to be matched to the padding left of &lt;td&gt;, which is 7.5em. so there are 1.5em padding between label and cell content.</blockquote>Other CSS definitions could be customized especially those paddings.Here is the <a target="_blank" rel="noopener noreferrer" href="https://deniapps.com/playground/responsive-table">demo</a>

Semantic UI's table component is not quite mobile-friendly even with the stackable option. Actually, there is no standard way to make a stable responsive. A horizontal scrollable table is often being used, but if you like a stackable way, and with a table header as a label on each row, then in this article, I will show you how to do it using existing Semantic UI's table component with some small changes.

All Posts In Semantic-ui-react