[dashboard] remove responsive menu

Author: svenefftinge

components/dashboard/src/components/Menu.tsx

@@ -18,7 +18,7 @@ interface Entry {
 
 function MenuItem(entry: Entry) {
     const location = useLocation();
-    let classes = "flex block text-sm font-medium lg:px-3 px-0 py-1.5 rounded-md";
+    let classes = "flex block text-sm font-medium px-3 px-0 py-1.5 rounded-md";
     if (location.pathname.toLowerCase() === entry.link.toLowerCase() ||
         entry.matches && entry.matches.test(location.pathname.toLowerCase())) {
         classes += " bg-gray-200";
@@ -41,35 +41,20 @@ function Menu(props: { left: Entry[], right: Entry[] }) {
 
     return (
         <header className="lg:px-28 px-10 bg-white flex flex-wrap items-center py-4">
-            <style dangerouslySetInnerHTML={{
-                __html: `
-                #menu-toggle:checked+#menu {
-                    display: block;
-                }
-                `}} />
             <div className="flex justify-between items-center pr-3">
                 <Link to="/">
                     <img src={images.gitpodIcon} className="h-6" />
                 </Link>
             </div>
-            <div className="lg:hidden flex-grow" />
-            <label htmlFor="menu-toggle" className="pointer-cursor lg:hidden block">
-                <svg className="fill-current text-gray-700"
-                    xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
-                    <title>menu</title>
-                    <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
-                </svg>
-            </label>
-            <input className="hidden" type="checkbox" id="menu-toggle" />
-            <div className="hidden lg:flex lg:flex-1 lg:items-center lg:w-auto w-full" id="menu">
-                <nav className="lg:flex-1">
-                    <ul className="lg:flex lg:flex-1 items-center justify-between text-base text-gray-700 space-x-2">
+            <div className="flex flex-1 items-center w-auto w-full" id="menu">
+                <nav className="flex-1">
+                    <ul className="flex flex-1 items-center justify-between text-base text-gray-700 space-x-2">
                         {props.left.map(MenuItem)}
                         <li className="flex-1"></li>
                         {props.right.map(MenuItem)}
                     </ul>
                 </nav>
-                <div className="lg:ml-3 flex items-center justify-start lg:mb-0 mb-4 pointer-cursor m-l-auto rounded-full border-2 border-white hover:border-gray-200 p-0.5 font-medium">
+                <div className="ml-3 flex items-center justify-start mb-0 pointer-cursor m-l-auto rounded-full border-2 border-white hover:border-gray-200 p-0.5 font-medium">
                     <ContextMenu menuEntries={[
                     {
                         title: (user && User.getPrimaryEmail(user)) || '',