Merge pull request #287 from permitio/filipermit/fix-mobile-view

Fixed broken mobile and algolia navbar overflow
permitio · Mar 15, 2024 · 1e638f0 · 1e638f0
2 parents 71e9d1a + 6e9b57a
commit 1e638f0
Show file tree

Hide file tree

Showing 2 changed files with 115 additions and 132 deletions.
diff --git a/docs/home.mdx b/docs/home.mdx
@@ -4,154 +4,140 @@ slug: /
 title: Permit.io Docs
 sidebar_label: 👋 Welcome to Permit
 hide_table_of_contents: true
-full_width: true
 pagination_next: null
 ---
 
-import DocCardList from '../src/theme/DocCardList';
-import NodeSvg from '../static/sdks/nodejs.svg';
+import DocCardList from "../src/theme/DocCardList";
+import NodeSvg from "../static/sdks/nodejs.svg";
 
 # Welcome to Permit.io
+
 Here you'll find comprehensive guides and resources to help you get started with Permit and explore our platform.
-<hr/>
+
+<hr />
 
 ### Explore Permit.io ⤵
+
 <DocCardList
-    items={
-        [
-            {  type: 'link',
-                href: "quickstart",
-                label: "Overview",
-                icon: '🌎',
-                description: "Learn what Permit is and how it works",
-            },
-            {  type: 'link',
-                href: "category/-guides--tutorials",
-                label: "Tutorials",
-                icon: '📖',
-                description: "Best practices and how-to guides",
-            },
-            {  type: 'link',
-                href: "sdk/sdks-overview",
-                label: "SDKs",
-                icon: '🔩',
-                description: "Explore the supported SDKs and frameworks",
-            },
-            {  type: 'link',
-                href: "category/-integrate-to-applications",
-                label: "Integrations",
-                icon: '🧰',
-                description: "Integrate Permit with your favorite tools",
-            },
-        ]
-    }
+  items={[
+    {
+      type: "link",
+      href: "quickstart",
+      label: "Overview",
+      icon: "🌎",
+      description: "Learn what Permit is and how it works",
+    },
+    {
+      type: "link",
+      href: "category/-guides--tutorials",
+      label: "Tutorials",
+      icon: "📖",
+      description: "Best practices and how-to guides",
+    },
+    {
+      type: "link",
+      href: "sdk/sdks-overview",
+      label: "SDKs",
+      icon: "🔩",
+      description: "Explore the supported SDKs and frameworks",
+    },
+    {
+      type: "link",
+      href: "category/-integrate-to-applications",
+      label: "Integrations",
+      icon: "🧰",
+      description: "Integrate Permit with your favorite tools",
+    },
+  ]}
 />
 
 ### Explore by Feature ⤵
+
 <DocCardList
-    articleClassName={"col col--4 margin-bottom--md "}
-    items={
-        [
-            {  type: 'link',
-                href: "concepts/multitenancy",
-                label: "Multi-Tenancy",
-                icon: '🏢',
-                description: "Learn how to manage multi-tenancy with Permit",
-            },
-            {  type: 'link',
-                href: "integrations/gitops/overview",
-                label: "GitOps",
-                icon: '🔄',
-                description: "GitOps-ready Permission Management",
-            },
-            {  type: 'link',
-                href: "integrations/infra-as-code/terraform-provider",
-                label: "Terraform",
-                icon: '☁️',
-                description: "Manage you policy with Terraform",
-            },
-            {  type: 'link',
-                href: "embeddable-uis/overview",
-                label: "Permit Elements",
-                icon: '🎨',
-                description: "Pre-built UI components for your app",
-            },
-            {  type: 'link',
-                href: "how-to/build-policies/rebac/overview",
-                label: "ReBAC",
-                icon: '🌴',
-                description: "Relationship-based Access Control",
-            },            {  type: 'link',
-                href: "how-to/build-policies/abac/overview",
-                label: "ABAC",
-                icon: '🔖',
-                description: "Attribute-based Access Control",
-            },
-        ]
-    }
+  articleClassName={"col col--4 margin-bottom--md "}
+  items={[
+    {
+      type: "link",
+      href: "concepts/multitenancy",
+      label: "Multi-Tenancy",
+      icon: "🏢",
+      description: "Learn how to manage multi-tenancy with Permit",
+    },
+    {
+      type: "link",
+      href: "integrations/gitops/overview",
+      label: "GitOps",
+      icon: "🔄",
+      description: "GitOps-ready Permission Management",
+    },
+    {
+      type: "link",
+      href: "integrations/infra-as-code/terraform-provider",
+      label: "Terraform",
+      icon: "☁️",
+      description: "Manage you policy with Terraform",
+    },
+    {
+      type: "link",
+      href: "embeddable-uis/overview",
+      label: "Permit Elements",
+      icon: "🎨",
+      description: "Pre-built UI components for your app",
+    },
+    {
+      type: "link",
+      href: "how-to/build-policies/rebac/overview",
+      label: "ReBAC",
+      icon: "🌴",
+      description: "Relationship-based Access Control",
+    },
+    {
+      type: "link",
+      href: "how-to/build-policies/abac/overview",
+      label: "ABAC",
+      icon: "🔖",
+      description: "Attribute-based Access Control",
+    },
+  ]}
 />
 
 ### Our SDKs ⤵
+
 <DocCardList
-    articleClassName={"col col--4 margin-bottom--md "}
-    items={
-        [
-            {
-                type: 'link',
-                href: "category/golang",
-                label: "Golang",
-                icon: ' ',
-            },
-            {  type: 'link',
-                href: "category/nodejs",
-                label: "Node.js",
-                icon: ' ',
-            },
-            {  type: 'link',
-                href: "category/python",
-                label: "Python",
-                icon: ' ',
-            },
-            {  type: 'link',
-                href: "category/ruby",
-                label: "Ruby",
-                icon: ' ',
-            },
-            {  type: 'link',
-                href: "category/java",
-                label: "Java",
-                icon: ' ',
-            },
-            {  type: 'link',
-                href: "category/dotnet",
-                label: ".NET",
-                icon: ' ',
-            },
-        ]
-    }
+  articleClassName={"col col--4 margin-bottom--md "}
+  items={[
+    {
+      type: "link",
+      href: "category/golang",
+      label: "Golang",
+      icon: " ",
+    },
+    { type: "link", href: "category/nodejs", label: "Node.js", icon: " " },
+    { type: "link", href: "category/python", label: "Python", icon: " " },
+    { type: "link", href: "category/ruby", label: "Ruby", icon: " " },
+    { type: "link", href: "category/java", label: "Java", icon: " " },
+    { type: "link", href: "category/dotnet", label: ".NET", icon: " " },
+  ]}
 />
 
 ### Need More Help ? Join Our Community ⤵
 
 <DocCardList
-    articleClassName={"col col--6 margin-bottom--md "}
-    items={
-        [
-            {
-                type: 'link',
-                href: "https://permit-io.slack.com/join/shared_invite/zt-nz6yjgnp-RlP9rtOPwO0n0aH_vLbmBQ#/shared-invite/email",
-                autoAddBaseUrl: false,
-                label: "Permit.io Slack Community",
-                icon: '👥',
-            },
-            {  type: 'link',
-                href: "https://github.com/permitio",
-                autoAddBaseUrl: false,
-                label: "Github",
-                icon: '🐙',
-            },
-        ]
-    }
+  articleClassName={"col col--6 margin-bottom--md "}
+  items={[
+    {
+      type: "link",
+      href: "https://permit-io.slack.com/join/shared_invite/zt-nz6yjgnp-RlP9rtOPwO0n0aH_vLbmBQ#/shared-invite/email",
+      autoAddBaseUrl: false,
+      label: "Permit.io Slack Community",
+      icon: "👥",
+    },
+    {
+      type: "link",
+      href: "https://github.com/permitio",
+      autoAddBaseUrl: false,
+      label: "Github",
+      icon: "🐙",
+    },
+  ]}
 />
-
-
diff --git a/src/css/components/_algolia-searchbar.scss b/src/css/components/_algolia-searchbar.scss
@@ -13,12 +13,9 @@ html[data-theme='dark'] {
 
 //overrides
 .algolia-search {
-    width: 100%;
-    min-width: 30vw;
+    width: 65%;
 
     @media (max-width: 996px) {
-        width: 200px;
-        min-width: 40%;
         position: unset !important;
     }