Refactor UI folder (#2016)

* Added Overview page

* Revised Getting Started page

* Minor revision

* Edited readme, minor modifications to docs

* Removed sweep.yaml, .devcontainer, .ergomake

* Moved security.md to .github, added contributing.md

* changes as per code review

* updated contributing.md

* fixed broken links & added missing links in doc, improved structure

* fixed link in wsl setup

* fixed server link, added https cloning in yarn-setup

* removed package-lock.json

* added doc card, admonitions

* removed underline from nav buttons

* refactoring modules/ui

* refactoring modules/ui

* Change folder case

* Fix theme location

* Fix case 2

* Fix storybook

---------

Co-authored-by: Nimra Ahmed <nimra1408@gmail.com>
Co-authored-by: Nimra Ahmed <50912134+nimraahmed@users.noreply.github.com>

front/src/modules/ui/layout/page/DefaultLayout.tsx

@@ -0,0 +1,86 @@
+import styled from '@emotion/styled';
+import { AnimatePresence, LayoutGroup } from 'framer-motion';
+import { useRecoilValue } from 'recoil';
+
+import { AuthModal } from '@/auth/components/Modal';
+import { useOnboardingStatus } from '@/auth/hooks/useOnboardingStatus';
+import { OnboardingStatus } from '@/auth/utils/getOnboardingStatus';
+import { CommandMenu } from '@/command-menu/components/CommandMenu';
+import { NavbarAnimatedContainer } from '@/ui/navigation/navbar/components/NavbarAnimatedContainer';
+import { MOBILE_VIEWPORT } from '@/ui/theme/constants/theme';
+import { AppNavbar } from '~/AppNavbar';
+import { CompaniesMockMode } from '~/pages/companies/CompaniesMockMode';
+
+import { isNavbarOpenedState } from '../states/isNavbarOpenedState';
+
+const StyledLayout = styled.div`
+  background: ${({ theme }) => theme.background.noisy};
+  display: flex;
+  flex-direction: row;
+  height: 100vh;
+  position: relative;
+  scrollbar-color: ${({ theme }) => theme.border.color.medium};
+
+  scrollbar-width: 4px;
+  width: 100vw;
+
+  *::-webkit-scrollbar {
+    height: 4px;
+    width: 4px;
+  }
+
+  *::-webkit-scrollbar-corner {
+    background-color: transparent;
+  }
+
+  *::-webkit-scrollbar-thumb {
+    background-color: transparent;
+    border-radius: ${({ theme }) => theme.border.radius.sm};
+  }
+`;
+
+const NAVBAR_WIDTH = '236px';
+
+const StyledMainContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
+  width: ${() =>
+    useRecoilValue(isNavbarOpenedState)
+      ? `calc(100% - ${NAVBAR_WIDTH})`
+      : '100%'};
+  @media (max-width: ${MOBILE_VIEWPORT}px) {
+    width: ${() => (useRecoilValue(isNavbarOpenedState) ? '0' : '100%')};
+  }
+`;
+
+type DefaultLayoutProps = {
+  children: React.ReactNode;
+};
+
+export const DefaultLayout = ({ children }: DefaultLayoutProps) => {
+  const onboardingStatus = useOnboardingStatus();
+
+  return (
+    <StyledLayout>
+      <CommandMenu />
+      <NavbarAnimatedContainer>
+        <AppNavbar />
+      </NavbarAnimatedContainer>
+      <StyledMainContainer>
+        {onboardingStatus && onboardingStatus !== OnboardingStatus.Completed ? (
+          <>
+            <CompaniesMockMode />
+            <AnimatePresence mode="wait">
+              <LayoutGroup>
+                <AuthModal>{children}</AuthModal>
+              </LayoutGroup>
+            </AnimatePresence>
+          </>
+        ) : (
+          <>{children}</>
+        )}
+      </StyledMainContainer>
+    </StyledLayout>
+  );
+};