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/navigation/navbar/components/NavCollapseButton.tsx

@@ -0,0 +1,75 @@
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { motion } from 'framer-motion';
+import { useRecoilState } from 'recoil';
+
+import {
+  IconLayoutSidebarLeftCollapse,
+  IconLayoutSidebarRightCollapse,
+} from '@/ui/display/icon';
+import { IconButton } from '@/ui/input/button/components/IconButton';
+import { isNavbarOpenedState } from '@/ui/layout/states/isNavbarOpenedState';
+
+const StyledCollapseButton = styled(motion.div)`
+  align-items: center;
+  background: inherit;
+  border: 0;
+  &:hover {
+    background: ${({ theme }) => theme.background.quaternary};
+  }
+  border-radius: ${({ theme }) => theme.border.radius.md};
+
+  color: ${({ theme }) => theme.font.color.light};
+  cursor: pointer;
+
+  display: flex;
+  height: 24px;
+  justify-content: center;
+
+  padding: 0;
+
+  user-select: none;
+  width: 24px;
+`;
+
+type NavCollapseButtonProps = {
+  direction?: 'left' | 'right';
+  show?: boolean;
+};
+
+const NavCollapseButton = ({
+  direction = 'left',
+  show = true,
+}: NavCollapseButtonProps) => {
+  const [isNavbarOpened, setIsNavbarOpened] =
+    useRecoilState(isNavbarOpenedState);
+
+  const iconSize = 'small';
+  const theme = useTheme();
+
+  return (
+    <>
+      <StyledCollapseButton
+        animate={{
+          opacity: show ? 1 : 0,
+        }}
+        transition={{
+          duration: theme.animation.duration.normal,
+        }}
+        onClick={() => setIsNavbarOpened(!isNavbarOpened)}
+      >
+        <IconButton
+          Icon={
+            direction === 'left'
+              ? IconLayoutSidebarLeftCollapse
+              : IconLayoutSidebarRightCollapse
+          }
+          variant="tertiary"
+          size={iconSize}
+        />
+      </StyledCollapseButton>
+    </>
+  );
+};
+
+export default NavCollapseButton;